【html/css】よくあるWebページ、結局どう作るの? 第3回 〜トップの画像のエリア(PC版)編〜

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

それでは、前回まででheaderが完成したので今回からトップの画像エリアを作ります。以下の画像のエリアです。

〜目次〜

外枠、背景画像の作成

外枠、背景画像を入れていきましょう。ここは1つだけこだわりポイントがあります。それは背景画像をhtml側で指定することです。理由は、html、cssファイルの役割を、htmlはデータとその構造、cssはそれらの見せ方を定義するものと区分して考えているためです。画像はデータとして扱うのでhtml側で定義します。

ここまでで以下の画像のようになっていますか?

キャッチコピー文字の作成

続いて文字を入れていきます。ここでもheaderの時と同じようにinnerクラスを使って位置調整をします。まずは単純に文字を入れるところまで行きます。

ここまでで次の画像の状態になります。bigimage__innerクラスの幅指定はSP版のことを考えheaderの時と同様にしておきます。

次に、細かく位置調整をしますが、その前に文字の白背景が親要素の幅にいっぱいに広がっている点を直します。

divなどのブロック要素はデフォルトでは幅が親要素いっぱいに広がるので、inline-block要素にします。それによって中のコンテンツに合わせて幅が決まります。

inline-blockを指定したことにより文字のブロックが横並びになります(画像)。

そこで、親要素に次の指定をします。

これで要素が縦並びになります。この状態で右寄せにする場合はjustify-contentではなくalign-itemsを使います。flex-direction: column;の場合はjustfy-contentは縦方向、align-itemsは横方向の並べ方を定義します。そして最後にbigimage__innerにpaddingをつけて位置調整は完了です。

これでPC版は完成です!次の画像のようになったでしょうか?

完成コードの確認(クリックで開きます)

index.html
style.css

第3回はここまでです。いかがでしたでしょうか。次回はSP版を制作していきます。

【html/css】よくあるWebページ、結局どう作るの? 第4回 〜トップの画像のエリア(SP版)編〜

2019年2月6日

4 件のコメント

  • お世話になっております。

    ここにalign-itemが抜けていませんか。解説にはありますが、コードに書いてあった方がいいと思います。もしかしてflex-directionが後で出てくるので、逆だったとか。

    .bigimage__text {
    display: flex;
    flex-direction: column;
    }

    完成版で気づきました。以上です。

  • 最後までやりましたがとても勉強になりました。
    再度じっくり見させていただいております。
    ありがとうございます。

    align-item: flex-endのセミコロンが抜けてますので、
    そこだけ追加しておいてください。たびたびすみません。

  • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    ABOUTこの記事をかいた人

    大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz