CODEPREPで勉強しようその3

CODEPREP勉強中です
各ブックの感想など
次回の記事について

その1(CODEPREPとは/学習予定ブック紹介)はこちら
その2(Sass,Bootstrap,Fontawesome編)はこちら
その4(HTML&CSS実践編後編)はこちら
その5(JavaScript編前編)はこちら
その6(JavaScript編後編)はこちら
その7(Three.js,moment.js,Canvas編)はこちら
その8(React,Vue.js編)はこちら
その9(Rust,GoogleMap,Webカメラ編)はこちら
その10(~~Ruby,~~Scala編)はこちら
その11(CODEPREPやってみた感想等)はこちら

CODEPREP勉強中です

相変わらずCODEPREPで様々な事柄を絶賛勉強中の筆者です。
そして、またある程度勉強したブックが溜まってきたので…前回同様に記事を書いちゃおうかなと。

今回のジャンルは「HTML&CSS実践編」で、具体的には以下のブックを勉強してきました。

HTMLとCSS3でつくるトグルスイッチ
HTMLとCSS3で作るサイドメニュー
HTML&CSSでつくるスマホ風メニュー
HTMLとCSS3でつくるパンくず
HTML&CSS3でつくるローディング画面
HTMLとCSS3でつくるクルクル回転するローディング
HTML&CSSでつくる斜め型ボックスレイアウト
HTML&CSS3でつくる付箋風デザイン
HTML&CSS3でつくる張り紙風デザイン
HTML&CSSでつくるノートPC風デザイン
HTMLとCSS3で作る通知ベル

ただ、この量のブックの感想を1記事にまとめると、ちょっと量がやばいかなと思ったので…。
今回は上記の内1〜6のブックの感想を書いていきたいと思います。

各ブックの感想など

いつもの様に、各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。

HTMLとCSS3でつくるトグルスイッチ

トグルスイッチという、下記の様なスイッチを作るブックでした。
※そのままコードを載せるのはどうかなと思い、CODEPREPさんで学んだコードをちょっと改変したものを載せてます

See the Pen CODEPREP Tutorial toggle-switch by Aik (@aik0aaac) on CodePen.

外部のライブラリ等に頼らずとも、こんなにリッチなものって出来るんだなぁと感動しました…CSS3の力はすごいですね( ﾟдﾟ)ｳﾑ

HTMLとCSS3で作るサイドメニュー

下記の様なサイドメニューを作るブックでした。

See the Pen CODEPREP Tutorial side-menu by Aik (@aik0aaac) on CodePen.

メニューの開閉なんてリッチな事が、CSS3のアニメーションだけで出来るなんてびっくりです！
CSS3のアニメーション機能恐るべし…！

HTML&CSSでつくるスマホ風メニュー

下記の様なスマホ風メニューを作るブックでした。

See the Pen CODEPREP Tutorial mobile-menu by Aik (@aik0aaac) on CodePen.

また、CSSで「ある要素の後ろにある要素を選択する」セレクタ~も学べました。
これを使えば、下記の様なコードで "divの中にあるinputがチェック状態になった時のlabel" を指定が下記の様にできるのです。 div > input:checked ~ label{...}

<div>
  <input id="i1" type="checkbox">
  <label for="i1">Checkbox</label>
</div>

個人的にはすごい大発見…と言うか、以前この辺りで手詰まりになりHTML構成をわざわざ変えてから対応した時もあったのですよね…。
でもこれから、そんな思いしなくて済みます…！知識は力なり！！

HTMLとCSS3でつくるパンくず

下記の様なパンくずリストを作るブックでした。

See the Pen CODEPREP Tutorial pankuzu-list by Aik (@aik0aaac) on CodePen.

今回のパンくずリストでは、要素を横並びにするためにCSSのdisplayをflexに指定しております。
ちなみに、CSS3ではdisplay要素にflexやinline-flexを指定した要素を「フレックスコンテナ」と呼ぶそうです。
また、フレックスコンテナでは、従来のブロックレイアウトに紐づく属性は使えなくなりますが…。
代わりに「フレキシブルレイアウト」モジュールという要素が使える様になります。

このフレキシブルレイアウトモジュールを使うと、さながらBootstrapのグリットレイアウトの様な動きが実装可能になるっぽいです…！
この辺りについての詳細は、めちゃくちゃ長くなったので別記事にまとめておきます。

筆者は要素を横並びにするために、よくflexではなくtable-cellを利用していたのですが…。
フレックスコンテナを使う方が柔軟性もよく、いい感じのレイアウトができそうですね。

HTML&CSS3でつくるローディング画面

下記の様な簡単なローディング画面を作るブックでした。

See the Pen CODEPREP Tutorial loading-css-animate by Aik (@aik0aaac) on CodePen.

CSS3のanimation属性が大活躍なブックでした！
このアニメーションのパターンは、ローディング以外にも使い所ありそうですね…|дﾟ＊)

HTMLとCSS3でつくるクルクル回転するローディング

下記の様なローディング画面を作るブックでした。
ソースコードも掲載しています。
※CODEPREPさんで学んだコードをちょっと改変したものを載せてます

See the Pen CODEPREP Tutorial loading-animation-spin by Aik (@aik0aaac) on CodePen.

この回転部分…私このブックをやる前は、何かしらのアイコンを持ってきてそれを回転させると思ってたのですが…。
このブックではspin部分をborderで実装されてました！
確かにborder-radius属性を使えば円形にもできますからね…それでanimation属性で回せば良いのだ、と。
画像使うよりも軽くて良さそうです…！|дﾟ＊)

次回の記事について

次の記事では、今回まとめきれなかった分のブックの感想を書いていく予定です。
ではでは|дﾟ)

Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。