PAS-POLの模写を始めました。
見本サイト↓
新たに模写を開始するに当たり、今回は以下の事に挑戦しようと思います。
- リセットCSSを使う。
- Bootstrapを使う（パーツだけ）。
- レスポンシブデザインを、スマホサイトから作る（モバイルファースト）。
リセットCSSはどれがいい？
今まではリセットCSSは、＊（アスタリスク）にmargin:0とpadding:0を指定していただけだったのですが、今回からちゃんとリセットCSSを導入しようと思います。
リセットCSSを使うメリットは、どのブラウザから見ても同じ見た目にできるということです。逆にリセットCSSを使わないとブラウザによって見た目が変わってきてしまう可能性があるので、実務ではリセットCSSは必須でしょう。
リセットCSSの種類はたくさんあるのですが、どれがいいのでしょうか。
私が候補にあげたのが次の３つです。
- Eric Meyer’s “Reset CSS”2.0
- HTML5 Doctor Reset CSS
- destyle.css
Eric Meyer’s “Reset CSS”2.0は、一昔前までは世界中で最も使われていたリセットCSSの一つですが、一部がHTML5に対応していないようで今はあまり使われていないそうです。
HTML5 Doctor Reset CSSは、先ほどのEric Meyer’s “Reset CSS”2.0をよりHTML5に特化させたようなもので、現在では結構使われています。ただ、box-sizing:border-boxではありません。
destyle.cssは、box-sizing:border-boxなのですが、inputタグなども全てリセットされてしまいます。私にはちょっとリセットされ過ぎな感じがします。
結局私が選んだ方法は、HTML5 Reset Stylesheet | HTML5 Doctorに、box-sizeing:borde-boxを追加するというものです。
参照↓
2020年版！おすすめのリセットCSSまとめ | Web Design Trends
リセットCSSの読み込み方。
リセットCSSの読み込み方は、reset.cssというファイルを作りリセットCSSのコードをコピペし、ベースのCSSと同じようにheadタグ内で読み込みます。
ただし注意点は、ベースCSSより前で読み込むということです↓
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
Bootstrapを導入。
今回初めてBootstrapも使おうと思います。
といっても「コンポーネント」と言ってパーツを使うだけですが。
具体的にはボタンに使おうと思ってます。
今回はBootstrapに触れるだけなので、少し使えればいいです。
そしてBootstrapにもリセットCSS的なものが組み込まれているで、読み込み方む際は自分が使いたいリセットCSSよりも前に読み込みます。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
PAS-POL模写。
PAS-POL模写の進み具合なんですが、ヘッダーとメインビジュアルが完成しました。
やっかいなのがスマホ画面とPC画面とでデザインが全然違う所です。
スマホ画面だとナビがアコーディオンのようになっています。
閉じた状態↓(背景画像などは消してます)
開いた状態↓
PC画面も考慮したレイアウトを考えるのはかなり難しかったです。
まず、「navってheaderの中に入れてもいいんだっけ？」という疑問が。
答えはOKです。
ということでheaderの中にnavを入れ、headerをposition:absoluteでtop:0に配置。
アコーディオンは、イサラで作ったアコーディオンのjQueryをちょこっといじって出来上がり。
変数や$(this)がいらないので簡単です。
一発でうまくいった時はビックリしました。
PC画面↓
navの中のli要素はdisplay:inline-blockで横並びに。
ロゴとnav自体はfloatで横並びに。
横並びにするにはfloatとdisplay:inline-blockどっちがいい？
横並びにするときにいつもfloatかdisplay:inline-blockか迷うのですが、
navのように単純にli要素を横並びにするだけならdisplay:inline-blockがいいと思います。
逆に2カラム3カラムなどの大きなレイアウトを作る場合や、左右に振り分ける時(float:left、float:right)はfloatが合っている気がします。
floatする時のコツ。
そしてfloatをする時のコツは、containerを作ること。
containerにwidthを指定しmargin:0 autoで真ん中寄せにし、そのなかで左右にfloatさせるとキレイに決まります。
もちろんcontainerにclearfixするのを忘れずに(floatすると親要素の高さが無くなるので)。
とまぁこんな感じで、今回から各セクションごとにスマホ画面とPC画面を作ってから次に進もうと思います。
コメント