5月12日 -30DAYSトライアル2nd-
１．今日の目標
30DAYSトライアル2ndを進める
２．結果・感想
今まで見出しを毎日手入力していたが、下書き作ってコピペした方が断然早い。さらに大見出しの設定までコピーしてくれるからとても助かる。でもはてなブログの記事閲覧の所から本文をコピーする場合、リンクつきの単語があるとそのリンクまでコピーされてしまうようでHTMLで見るとすごいことになっていた。今後文章をコピペする際は気を付ける。
参考URLを貼っているが、あとで見返した時にそのページで参考にしたことが分からないので何が書いているのか、そのページを見てどんなメリットがあるのかを簡単に書くようにする。
３．学んだことの書き出し
displayプロパティについて
セレクタ{プロパティ:値}
display:(block,inline,inline-block,none)
block(要素が横までいっぱいに広がり、縦に並んでいく)
inline(要素が平べったく横に並んでいく)
inline-block(並びはinline的、中身はblock的)
none(非表示にする)
基本はblockかinlineを利用
inline-blockを使うのはソーシャルボタンを横並びにする場合、メニューバーでボタンを横に並べたい場合など
noneにしても読み込みはされるので読み込み時間の短縮にはならない
calcについて
余白の制御をする場合、CSSのcalc関数を使って余白を計算させながらパーセント指定し、nth-childという疑似クラスを使う
calc関数は%と固定値(pxなど)でも計算可能
プロパティ: calc(計算式);
calc(5px + calc(100px *2));のように入れ子にも出来る
疑似クラス、nth-childについて
疑似クラスとはクラスの「特別な状態」に関して指定する方法
親要素に属する子要素の順番に応じて選択出来る
first-childはnth-child(1)でOK
last-childは数が変わっても常に最後を指定するので便利
:nth-child(-n+X) 最初からX番目まで
:nth-child(n+X) X番目から最後まで
:nth-child(n+X):nth-child(-n+Y) XからY番目まで
:not(nth-child(X)) X番目以外
:nth-child(2n) 偶数
:nth-child(2n-1) 奇数
Perfect Pixelを使ってずれている場所を確認する
今回は飛ばして6の見出しに追加しておく
おそらく仕事でWebデザインする場合には重要になると思う
GoogleChromeのデベロッパーツールについて
ショートカットキーで起動(WinはF12)
デベロッパーツールの「閉じるアイコン」の隣の「・・・」を押すと表示位置を変更可能(画面下配置が便利らしい)
スマートフォンアイコンを押すとモバイルエミュレーション(レスポンシブデザインで確認)できる
要素を選択する「矢印アイコン」のショートカットキー(WinはCtrl+Shift+c)
デベロッパーツールで変更すると変更が動的に確認できる
Source→Pageから保存したいファイルを右クリック→Save asと進むとデベロッパーツールでの変更を直接保存可能
４．明日の課題
30DAYSトライアルを進める
５．参考URL
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
displayについて分かりやすくまとめられた表がある
CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び | HPcode
2カラム3カラムの変更をcalcとnth-childで変更できるテンプレあり
[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス
calcを使った実例が載っている
nth-childについてこれを見れば基本を抑えられる
６．今後やりたいこと・高めたいスキル・優先順位
30DAYSトライアル、PerfectPixel、JQuory、Wordpress、PHP実践練習、はてなブログの機能、線形代数(詳細ではなく全体の流れ)、SEO
