開発においてhtml5とCSSを使う機会が増えてきたので、この際その周辺の
フレームワークの使い方でも覚えておこうかなと考えております。
今回使うフレームワークはPure.CSSです。
だけどフレームワークと言ってもまず数が多くどれを使ったらいいか迷いがちです。
一般的（html5やJavaScriptを触ったことがある人）にはCSSのフレームワーク
といえばbootStrapが浮かびますが
このpureCSSというフレームワークは、それよりも軽量で機能もごちゃごちゃしていないので
webでのwebでの開発の幅を広げたいというかたやbootStrapを始めたけど使いにくいというかたにはおすすめだなと感じました。
筆者もCSSのフレームワークに触れることはほぼなかったので学習もかねてブログに跡を残していきたいと思います。
例えば、なにも手を付けていない状態だと、大きな画像はブラウザを狭めたときに横にスクロールされてしまいページ枠から飛び出してしまいます。
このままでは一定の大きさで表示することができないので、さっそくPure.CSSで修正してみました。
<head>の中に<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”>を入れて
<body>に<img src=“apple.jpg” class=“pure-img”>と記述してみましょう。
すると、見事にブラウザの大きさに合わせてリサイズするようになりました！androidやreactで悩んでいたことがこんな簡単に
できるとは正直考えもしなかったです。classにpure-imgを設定するだけで柔軟に対応できるのですごく使い勝手がいいなと
感じました。
これで満足してしまいそうでしたが、まだhtmlの基本でもあるフォームを作っていないことを思い出したので
とりあえず公式のサンプルを見ながら書いてみました。
※コードは、公式に似たようなものがあるのでそちらをご覧ください。
各フォームとセレクトボタンを作ってみました。従来のhtmlで作るボタンと比べると角がないというか今どきの
フォームっぽくて安心感がありますね。（某就活サイトとかブログの新規登録ページとかがこんな感じでした。）
これだけでも達成感がでてしまいましたが、更に掘り進んでテキストとかボタンの色を変えてみたいなとか思いついたので
送信ボタンの色を変えてみました。
ほんとにサンプルで書かれたものに数行スパイスを加えた程度のコーディングでしたが、特にこれといって難しい問題は
見つからずにいい意味でさっぱりとしたフォームだと思いました。
この次はinput type = “file”やimgタグをいじってみようかと思います。もしこっちでも使用感がよければ
主要フレームワークとして使っていきたいなと思います。
