【Flexboxも】Webページの模写コーディングをしました【プログラミング学習記録⑧】

この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。
こんばんは、プログラミング初心者の氷犬です。
前回の記事はこちら⇒初心者のjQuery学習におすすめ!『jQueryデザイン入門』【プログラミング学習記録⑦】
「HTML/CSSの勉強は実際にサイトを作ってみるのが1番!」ということで、Webページの模写をしたので振り返ります。
HTML/CSSの基礎学習を終えたぐらいの人なら参考になるかなと思います。
- 3回目のWebページの模写コーディング例を紹介
- レイアウト技法『Flexbox』を使ってみた
- レスポンシブ対応には慣れが必要
3回目のWebページの模写コーディングです
今回で、Webページの模写コーディングは3回目です。
他にも、実際に本のとおりにコーディングしたサイトが2つあるので、計5サイトをゼロから作った状態ですね。
「10個ぐらい作ればなんとなくわかってくる」とのことなので、とりあえずは10サイトを目標にしています。
参考にしたのはWordpressテーマ『XeoryExtension』
今回は、WordpressテーマのXeoryExtensionというテーマのデモページを参考にしました。
少し古いページではありますが、今でも十分通用するデザインに見えたのでコーディングすることに。
レイアウト技法のひとつである『Flexbox』を使うのには、ちょうどいいボリュームのページだと思います。
今回作ったページはこちら
今回作ったページはこちら。
レスポンシブ対応込みで約8時間ほどでコーディングできました。
長いですが、フルのスクリーンショットも載せておきます↓
1:投稿されたコンテンツを横並びにする
画像は3つですが、実際のページをパソコンで見ると、投稿されたコンテンツが5つ横並びになっています。
このように要素を横並びにするには、4つの方法があります。
- displayにinline-blockを指定する
- 要素をfloatさせる
- Flexboxを使う
- gridレイアウトを使う
学習サイトや古い書籍だと、「②要素をfloatさせる」ことで横並びさせることが多いです。
しかし、floatは「要素を浮かせる」ので、親要素のheightが狂います。
まあ、親要素のheightを決めてしまえばいいのですが、いちいちheightを指定するのは手間ですよね。
そこで、『Flexbox』というレイアウト技法を使うことで、簡単に要素を横並びさせることができます。
Flexboxについては、Webクリエイターボックス様の「これからのCSSレイアウトはFlexboxで決まり!」を見るのが一番わかりやすいですね。
また、フリーランスエンジニアのちづみさんがとてもわかりやすいツイートをしていたので、ぜひ参考にしてください。
⭐フレックスボックスって?
cssで使える超便利な実装方法これProgateには出てこないけど
リストを作るならfloatより
display:flex
がオススメです!
柔軟なレイアウトができるので、使えるようになればキレイ&楽????????html????
<ul>
<li>一郎</li>
<li>二郎</li>
<li>三郎</li>
</ul>css???? pic.twitter.com/U573TopUvb
— ちづみ@コードも書くイラスト屋 (@098ra0209) 2018年6月7日
2:{position:absolute}で要素の位置を固定する
この「No.2」のボックスは{ position:absolute }を使って、記事のアイキャッチ画像左上に固定しています。
HTML/CSSを学習し始めて間もない人だと、なんとなくpositionの指定に苦手意識というか、「めんどくさいなぁ」と思ってる人も多いはず…
僕もそんな一人だったので、「めんどくさがらずにちゃんとやろう」と思って使ってみました。
子要素に{ position:absolute }を指定すると、親要素のpositionにrelativeを指定する必要がありますが、要素の親子関係がわかっていないとうまくできないので、いい復習になりましたね。
3:テキストと写真の横並びレイアウト
右に左に写真が移動するレイアウト
実はfloatだと、左に写真を持ってくるようなレイアウトが組みにくいです。
なぜなら、要素が回り込んでしまうので、写真の下にテキストが入ってしまうんですよね。
回り込みを解除するには、「clearfix」というCSSのテクニックを使う必要がありますが、Flexboxを使うとこんなレイアウトも割と簡単に組めます。
4:2つの要素を50%ずつ配置する
いわゆる縦割りのレイアウトってやつですね。
これもFlexboxを使っています。
意識したのは「Flexbox」と「Bootstrapを使わないこと」
今回のコーディングにあたって意識したのは、
- Flexboxを使ってレイアウトを組むこと
- Bootstrapを使わないこと
の2つです。
Bootstrapを使うと、簡単にレスポンシブ対応させることができるのですが、あまりに簡単なので「あえてBootstrapは使わないでおこう」と思いました。
Flexboxについては、学習サイトや書籍でもあまり触れられないので、実際に使ってみないと感覚がつかめません。
使ってみると、まったく難しくなかったので「もう少し早くいじっておけばよかった」と思いました(-_-;)
3ページ目にしてわからないことがあまりなくなった
HTML/CSSだけでコーディングして3ページ目になりましたが、「正直全然わからない」ということが無くなってきましたね。
なんとなくわかってるけど、細かい書き方がわからないくらいで割とサクサクコーディングできるようになりました。
あとはめんどくさがらずにWebサイトを作ったり、PHPを学習したりするだけですね。
がんばりますm(_ _)m
関連記事:
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】