5月11日 -30DAYSトライアル2nd-
１．今日の目標
30DAYSトライアル2ndを進める
２．結果・感想
はてなブログの大見出し機能使ってみた。見やすいので今までの記事にも適用させていこうと思う。もしかしてはてなブログってもっといっぱい良い機能あるのかも。使える機能は使っていきたい。セクション区切りにして目次作って押した項目に飛ばせるようにしようと思ったんだけど、もしかしてその機能も元々ついてるのかもしれない。
これまではデスクトップファーストで模写をしていた。現在はモバイルからの閲覧の割合がPCと比べてかなり高いので、モバイルファーストで練習するクセをつけようと思う。box-sizing:border-box;でwidthの横幅にpaddingとmarginを含めるように指定する場合としない場合で挙動が変わるので注意しないといけない。
３．学んだことの書き出し
ヘッダーはposition:fixed;で上部に固定
レスポンシブデザイン:単一のファイルでスマホ、タブレット、PCの表示を切り替えられるように設計されたデザインのこと
レスポンシブデザインの特徴
メディアクエリ(クエリはお問い合わせの意)
メディアクエリはCSSファイルに記述する
CSSファイルの全体図のイメージ
/* 共通のスタイル */
/* スマホのスタイル */
/* タブレットのスタイル */
@media all and (min-width: 480px) { }
/* パソコンのスタイル */
@media all and (min-width: 768px) { }
上記のように書いてもスマホで表示させた際にレスポンシブなデザインにならない。理由はスマホ上でもPCのサイトがしっかり表示されるように、画面の幅が980pxと設定されているから。その問題を解消するためにviewport(表示領域)を指定する。以下のようにHTMLファイルに記述する。
<meta name="viewport" content="width=device-width,initial=1.0">
デザインの流れ
小さい方から作っていくデザインを「モバイルファースト」、大きい方から作っていくデザインを「デスクトップファースト」という。現在はモバイルファーストが優勢。
端末の向きを判定する場合
/* 縦向きの場合 */
@media screen and(orientation:prtrait) { }
/* 横向きの場合 */
@media screen and(orientation:landscape) { }
メイン画像(背景画像)の指定(例)
background-image:url();で背景画像のパスを記述
background-size:cover;で画像の縦横比維持
background-position:center;で基準位置を真ん中で維持
background-repeat:no-repeat;で画像の繰り返しをしない
background-attachment:fixed;で背景画像の位置を固定(スクロールしても動かない)
linkで自分のCSSをHTMLに記述する場合、他のCSSで上書きされないように一番下に記述する(より下に書いたCSSの方が強い)
CSSは上から順番に読み取るので、メディアクエリの指定順番はモバイルファーストの場合は「小さい→大きい」、デスクトップファーストの場合は「大きい→小さい」で書く。逆で書いてしまうと必要ない情報まで読み込んでから動くために動作が遅くなる。
box-sizing:border-boxでbox-sizingをborder-boxにする(widthで横幅指定した際にpaddingとborderを含める)
-webkit-はベンダープレフィックスと呼ばれ、色々なウェブブラウザに上手いこと読み込まれるための「おまじない」
主要ブラウザのベンダープレフィックス(接頭辞)
ベンダープレフィックスとはブラウザの提供元が独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、それが拡張機能であることは明示するためにつける識別子のこと。 インターフェイス名の接頭辞は大文字、プロパティとメソッドの接頭辞は小文字。
-moz-はFirefox
-o-はOpera
-ms-はInternet Explorer
flexboxについて
横並びにしたいブロック要素の一つ上の階層にdisplay:flexを指定する
.flex{
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
}
というクラスを定義し、それを利用する。
flexboxのプロパティ
flex-direction:子要素の配置方向(row,column,row-reverse,column-reverse)
flex-wrap:子要素の折り返し設定(no-wrap,wrap,wrap-reverse)
flex-flow:子要素の配置・折り返し設定をまとめて記述(row no-wrap,column wrap)
justify-content:水平方向の揃え方(flex-start,flex-end,center,space-between,space-around)
align-items:垂直方向の揃え方(flex-start,flex-end,center,baseline,stretch)
align-content:複数行になった時の行の揃え方(flex-start,flex-end,center,space-between,space-around)
４．明日の目標
５．参考URL
30DAYSトライアル【DAY1】
https://www.engineer-step.com/entry/web-coder-1
30DAYSトライアル【DAY2】
https://www.engineer-step.com/entry/web-coder-2
レスポンシブデザインサイトの作り方
https://haniwaman.com/responsive/
レスポンシブの基本、メディアクエリの書き方
https://sole-color-blog.com/blog/71/
ベンダープレフィックスについて(HTMLクイックリファレンス)
http://www.htmq.com/csskihon/603.shtml
ベンダープレフィックスについて
https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix
要素を横並びにするならflex boxしかない！
https://qiita.com/HiromuMasuda0228/items/baf8015076d7d90b8fea
６．今後学びたいこと・高めたいスキル・優先順位
JavaScript、JQuory、Wordpress、PHP実践練習、はてなブログの機能、線形代数(詳細ではなく全体の流れ)
