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

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

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

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

 

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

 

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

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

この記事の内容

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

-スポンサードサーチ

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

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

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

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

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

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

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

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

-スポンサードサーチ

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

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

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

 

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

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

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

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

  1. displayにinline-blockを指定する
  2. 要素をfloatさせる
  3. Flexboxを使う
  4. gridレイアウトを使う

学習サイトや古い書籍だと、「②要素をfloatさせる」ことで横並びさせることが多いです。

 

しかし、floatは「要素を浮かせる」ので、親要素のheightが狂います。

まあ、親要素のheightを決めてしまえばいいのですが、いちいちheightを指定するのは手間ですよね。

 

そこで、『Flexbox』というレイアウト技法を使うことで、簡単に要素を横並びさせることができます。

Flexboxについては、Webクリエイターボックス様の「これからのCSSレイアウトはFlexboxで決まり!」を見るのが一番わかりやすいですね。

また、フリーランスエンジニアのちづみさんがとてもわかりやすいツイートをしていたので、ぜひ参考にしてください。

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

 

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

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA