ほんとオウフル - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

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;
}