CODEPREPで勉強しよう その4
その1(CODEPREPとは/学習予定ブック紹介)はこちら
その2(Sass,Bootstrap,Fontawesome編)はこちら
その3(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〜6のブックの感想を書いたので…。
今回の記事では、残りの7〜11のブックの感想を残しておこうと思います。
各ブックの感想など
いつもの様に、各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。
HTML&CSSでつくる斜め型ボックスレイアウト
下記の様な斜めにレイアウトされたボックスを作るブックでした。
※前回の記事同様、そのままコードを載せるのはどうかなと思い、CODEPREPさんで学んだコードをちょっと改変したものを載せてます
See the Pen Layout-Slanting by Aik (@aik0aaac) on CodePen.
前回の記事でもやっていたのですが…私はブックの内容を上記に書き写す際、汎用化等を重視した設計にしてます。
(とはいえ、SCSSで変数化したりするくらいですが)
後、個人的な好みの問題で単位表記をpx→em表記にもしています。こっちの方が自分としてはわかりやすいので…。
しかし今回の様なレイアウト操作では、widthやborder等の細かな数値に対して、かなり繊細な操作を要求されるようで…。
自分としてもなんとか頑張ってみましたが、どうしても汎用化できない部分ができてしまいました。
(コードの最後、beforeとafter属性のborder-left/rignt属性のあたりです)
pxという絶対的な単位の偉大さを学びました…emではフォントサイズを変えてしまうと途端に崩れてしまいますからね。
なかなか思い通りにならないものですな…。
HTML&CSS3でつくる付箋風デザイン
下記の様な付箋風にレイアウトされたボックスを作るブックでした。
See the Pen Layout-TagLike by Aik (@aik0aaac) on CodePen.
付箋風に見せる工夫が随所に凝られており…。
ちょっと使い方を工夫するだけで、ここまでのものが出来るんだなとすっごく感心しました。発想の自由度って大事なんやなぁ…。
HTML&CSS3でつくる張り紙風デザイン
下記の様なテープで止められたメモ紙風のボックスを作るブックでした。
See the Pen Layout-PosterLike by Aik (@aik0aaac) on CodePen.
ブックには左側の白い色合いしかありませんでしたが、せっかくなので…と、暗い感じのものも作ってみました。
個人的には暗い方が好きかもですね…。
ただ、2種類の色指定をするのにいちいち専用の変数使うのもだるく…。
なんかいい方法…例えば配列とかで指定できないかなと調べてみたら、どうやら新しいSassのVersionでは連想配列が使えるらしいとのこと。
早速取り入れてみたら、めっちゃ楽に書けました！
カラーテーマとかを管理するのにいいかなと思いました…他にももっといい方法があるかもしれませんが。
今回使ったダミーテキスト…"Lorem ipsum"を見てて思ったのですが…他にもこういったダミーテキストってあるのかなと。
ダミーテキスト生成ツールとかあればと思ったら、ありました。まぁありそうですよね…。
この辺りに関してはまた別記事にまとめようかと思います。
HTML&CSSでつくるノートPC風デザイン
下記の様なノートPC(Mac)の様な図をCSSオンリーで作るブックでした。
See the Pen drawing-pc by Aik (@aik0aaac) on CodePen.
今回のは特にSCSSに落とし込むのに苦労しました…。
pc上部(pc-head)のwidth,heightの値を変えればある程度それに沿って出来る様にはしましたが…もっと効率のいい設定方法あればいいなぁ。
HTMLとCSS3で作る通知ベル
下記の様な通知ベルを作るブックでした。
See the Pen Simple-Notification-bell by Aik (@aik0aaac) on CodePen.
animationのscale3dのおかげで、拡大する様なアニメーションが実装できています。
また、newクラスにのみアニメーションを実装することで、JSでクラスの付け替えをすればアニメーションのON/OFFを管理できる様にしました。
(入門サイト等ではJSのクラス付け替えでCSSの任意の動作ができる様にしていましたが、これって一般的なのでしょうか…？)
それにしても、これだけ完成されているならば数値部分に手を加えるだけで、今風の通知ベル処理が作れそうですね！
次回の記事について
次からはいよいよJavascript系のブックに手をつけていこうと思います!
ではでは|дﾟ)
