2019/10/14 プログラミング学習記録

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

プログラミング学習記録シリーズ

この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。

こんばんは、プログラミング初心者の氷犬です。

前回の記事はこちら⇒初心者のjQuery学習におすすめ！『jQueryデザイン入門』【プログラミング学習記録⑦】

「HTML/CSSの勉強は実際にサイトを作ってみるのが１番！」ということで、Webページの模写をしたので振り返ります。

HTML/CSSの基礎学習を終えたぐらいの人なら参考になるかなと思います。

この記事の内容

３回目のWebページの模写コーディング例を紹介
レイアウト技法『Flexbox』を使ってみた
レスポンシブ対応には慣れが必要

３回目のWebページの模写コーディングです

今回で、Webページの模写コーディングは３回目です。

他にも、実際に本のとおりにコーディングしたサイトが２つあるので、計５サイトをゼロから作った状態ですね。

「10個ぐらい作ればなんとなくわかってくる」とのことなので、とりあえずは10サイトを目標にしています。

参考にしたのはWordpressテーマ『XeoryExtension』

今回は、WordpressテーマのXeoryExtensionというテーマのデモページを参考にしました。

少し古いページではありますが、今でも十分通用するデザインに見えたのでコーディングすることに。

レイアウト技法のひとつである『Flexbox』を使うのには、ちょうどいいボリュームのページだと思います。

今回作ったページはこちら

今回作ったページはこちら。

レスポンシブ対応込みで約８時間ほどでコーディングできました。

長いですが、フルのスクリーンショットも載せておきます↓

１：投稿されたコンテンツを横並びにする

画像は３つですが、実際のページをパソコンで見ると、投稿されたコンテンツが５つ横並びになっています。

このように要素を横並びにするには、４つの方法があります。

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日

２：{position:absolute}で要素の位置を固定する

この「No.2」のボックスは{ position:absolute }を使って、記事のアイキャッチ画像左上に固定しています。

HTML/CSSを学習し始めて間もない人だと、なんとなくpositionの指定に苦手意識というか、「めんどくさいなぁ」と思ってる人も多いはず…

僕もそんな一人だったので、「めんどくさがらずにちゃんとやろう」と思って使ってみました。

子要素に{ position:absolute }を指定すると、親要素のpositionにrelativeを指定する必要がありますが、要素の親子関係がわかっていないとうまくできないので、いい復習になりましたね。

３：テキストと写真の横並びレイアウト

右に左に写真が移動するレイアウト

実はfloatだと、左に写真を持ってくるようなレイアウトが組みにくいです。

なぜなら、要素が回り込んでしまうので、写真の下にテキストが入ってしまうんですよね。

回り込みを解除するには、「clearfix」というCSSのテクニックを使う必要がありますが、Flexboxを使うとこんなレイアウトも割と簡単に組めます。

４：２つの要素を50%ずつ配置する

いわゆる縦割りのレイアウトってやつですね。

これもFlexboxを使っています。

意識したのは「Flexbox」と「Bootstrapを使わないこと」

今回のコーディングにあたって意識したのは、

Flexboxを使ってレイアウトを組むこと
Bootstrapを使わないこと

の２つです。

Bootstrapを使うと、簡単にレスポンシブ対応させることができるのですが、あまりに簡単なので「あえてBootstrapは使わないでおこう」と思いました。

Flexboxについては、学習サイトや書籍でもあまり触れられないので、実際に使ってみないと感覚がつかめません。

使ってみると、まったく難しくなかったので「もう少し早くいじっておけばよかった」と思いました(-_-;)

３ページ目にしてわからないことがあまりなくなった

HTML/CSSだけでコーディングして３ページ目になりましたが、「正直全然わからない」ということが無くなってきましたね。

なんとなくわかってるけど、細かい書き方がわからないくらいで割とサクサクコーディングできるようになりました。

あとはめんどくさがらずにWebサイトを作ったり、PHPを学習したりするだけですね。

がんばりますm(_ _)m

関連記事：
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】