コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

ほんとオウフル

AWFUL

AWFULってひどいって意味ね。読み方はオウフル。僕は稀に帰国子女を自称するのでこんな単語を使います。うざいね。しかも自称です。自重しろって感じだね。ちなみに反対の意味にAWESOME(オウサム)があります。意味はいけてるとかそんな意味です。"nice"の代わりに"awesome"を使うとネイティブっぽくてオウサムらしいですよ。


さてさて、自虐とかうんちくとかで書いても面白く無いので、くだらない前置きはこの辺にしておきましょうかね。今日は何をやってみたかと言いますと例のごとくCODEPREPです。久しぶりに国産の学習サイトを見つけてものっそい勢いで消化してますね。まあ、さくさくできるのが売りなんでそうなってしまうんですけどね。

やってみた

実は記事のタイトルはこれからやるやつのもじりだったりします。そうです。これからやる講座はフォントオウサムです。

おわったよ。外はしっかり中はさくさくだね。
f:id:andron:20170628224248p:plain

個人的に気になるところは区分が「JavaScript」にあるところ。Webフォント系ってCSSって感じするんですけどね。まあ、こんなもの使う人の次第なんでどうでもいいですね。何ができるかは実際にやってみて、公式サイトみてこんなものがあるんだって感じでやっていけばいいと思うよ。

こちらのお天気パネルの作り方と組み合わせるといい感じによくわかんないものができるのでおすすめです。
f:id:andron:20170701001005p:plain


・こんなのをつくってみる
f:id:andron:20170701001051p:plain

まあ、サンプルのほぼコピーですけどね、異なるWebフォントを組み合わせてもいいよって感じです。
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>お天気パネル</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="weather">
    <div class="today">
        <div class="">
          <span class="fa-stack fa-3x">
            <i class="wi fa-pulse wi-day-sunny fa-stack-1x"></i>
            <i class="fa fa-pulse fa-ban fa-stack-2x red "></i>
          </span>
        </div>
        
        <div class="weather-detail">
          <div class="current-temperature">22 <i class="wi wi-celsius"></i></div>
      </div>
    </div>
    </div>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 20px;
}

.weather {
  background: linear-gradient(to bottom right, #04BACC, #68d5e0);
  width: 480px;
  font-size: 21px;
  line-height: 1.5;
  color: #fff;
}

.today {
  padding: 40px 60px;
  display: flex;
  border-bottom: 1px solid #68d5e0;
}


.today .weather-detail .current-temperature {
  font-size: 92px;  
}

.today .weather-detail {
  padding-left: 75px;
}

FontAwesome
Font Awesome, the iconic font and CSS toolkit

WeatherIcons
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap


あとがきのようなもの

そういえば、いまさらなんですが僕も昔、「FontAwesome」についてくっそ適当な記事を書いていました。
今の僕のブログでのふざけ具合と比べるとおとなしいですね。タイトルとか、むかしは訴求効果とか考えてたんだろうなってのが伝わってきます。
inujini.hatenablog.com


それに比べてこの記事のタイトルを見て下さいよ。なんですかこのクソみたいなタイトルは。こんなの誰にも読んでもらえませんよ。もうほんとオウフル。