html ヘッダーデザイン サンプル 4


自分で作ることに挑戦してみたけれど、なかなか思うような形にならないと考えている方も多いはずです。 人生が変わるほど「グッとくる」成長体験を、プログラミング学習を通してお届けしています。. Webの仕事に興味を持った方の多くはまず最初にHTML・CSSの基本を覚えると思います。では基本を覚えた後に最初にやるべきことは何だと思いますか?それは実際にサイトを作ることです。, こんにちは。フロントエンドエンジニアのくめっち(@kume_KROWL)です。今回は以前に下記の記事で掲載した内容をより細かく解説したものになります。, というのも実はこのソースコードは僕が入社前に練習で取り組んだWebサイト制作の一部になっていまして、記事内にもある通りうまくいっている箇所も、そうでないところ・苦戦した痕跡が多く残っています。, 今回はこのソースコードを現在の僕が書き換えていき、HTML・CSSの勉強を始めたばかりの人がより実践に近い技術でコーディングできるようにしていきたいと思います。, 上記のような簡単なランディングページ(LP)を作っていきます。今回作成するサンプルサイトは、様々なWebサイトで使われている要素が詰め込まれているので、これをマスターすることで基本的なWebサイトの構造を理解できるようになると思います。, そこに他の記事でご紹介したCSSの命名規則の一つであるBEMという概念(考え方)を取り入れながらコーディングしていきたいと思います。, BEMは最も有名な命名規則のひとつで、多くのエンジニアに支持されています。以前、別の記事でもご紹介していますが、HTMLによって構成されるパーツやその状態をBlock / Element / Modifierという3つの要素に当てはめて考えることで、非常にわかりやすく柔軟な設計が可能になります。また、多数の支持を得ているということは、もしプロジェクトのメンバーが増えたり変わったりしたときにも、共通の認識で開発を進められるので、そういった点でもBEMは有利と言えるでしょう。, 上記の2、3はWebサイトを作る上では当たり前のことですが、「上手にWebサイトを作る」という意味においては下記が最も重要な要素になります。, これを意識することで同じ記述を何度も書く必要がなくなり、より効率的にサイト制作を進めることができたり、修正や更新が必要になった際にも対応しやすくなるのでぜひこの機会に取り組んでみましょう!, 一番大きな要素で分けると上記のような三要素に分類されます。これを軸にして早速下記のようにHTMLでマークアップしていきましょう。, 今回はCSSの命名規則としてBEMを使用するので以前、解説したように「Block__Element–Modifier」という形でクラスを振っていきます。, 上記の3つはBEMでいう「Block」にあたるものです。複数の単語を繋げるときは「-」で繋げるケバブケースを用いるのが一般的です。つまり上記の「page-header」の子要素に「nav」が出てきたら「page-header__nav」というように記述するということです。, なぜ下の要素を「セクション」と一括りにしたのかというともっと要素が増える可能性があるからです。, このサイトは今回のサンプル用に短く作ってありますが、多くのLPはいくつかのセクションによって構成されることがほとんどです。, このようにある程度サイトの要素が増減しても柔軟に対応できるようにマークアップをしていくことが大切です。, 今回はセクションが複数個になることを想定して「intro-section」というクラス名をつけました。, ここでBEMでいうところの「Element」が登場します。今回追加したもの全ての要素に「intro-sectionの」という枕詞がつきますので「intro-sectionのnav」「intro-sectionのcontent」というように記述していきましょう。, また、「intro-section」内でなくても使う可能性のある要素には別のクラスをつけましょう。今回、僕は・セクションの始まり(section-header)・お問い合わせ(contact-block)の要素が他のセクション内でも使われることを想定して、Element付きのクラスとは別にそれ単体でもクラスを設定しました。, ここまでの段階で少しわかり易いように要素を足して実際にどのようになったか見てみましょう。, style.css(それぞれのボックスの位置関係を確認するために仮のスタイルを適用しています), 【初心者向け】HTML+CSSの練習に最適!KROWLコーディング課題「個人制作の趣味サイト」 – 解説編 その1, 【初心者向け】HTML+CSSの練習に最適!KROWLコーディング課題「個人制作の趣味サイト」 – 解説編 その2, 「コーディングだけではなくデザインの勉強もしたい!」という方はこちらの記事もおすすめ!, HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中! デザイン性も高く、フッター以外にも様々な質の高いコンポーネントが用意されております。 の4つです。 HTMLとCSSをここまで書くと最初にお見せしたヘッダー部分が完成します! フッター部分を作るfooterの書き方 次に下の画像のようなフッター部分を作っていきたいと思います。 まずはヘッダーの時と同様にフッターの箱を用意します。 \キャリア発掘の第一歩/ ※最短1分で申し込み可能, 「header」と「footer」は名前の通り、サイトのヘッダー部分とフッター部分を作るときに使います。 2.フッターを固定 4.3. 実際のコードとサイトは以下の通りです。,

  • タグ プロのキャリアアドバイザーに相談する! まずは無料カウンセリングへ! 無料カウンセリングに申し込む ②text-decoration: underline;でアンダーラインを引くこと 4.横幅が決まっている場合のナビゲーションを固定 4.5. まずはお気軽に、無料カウンセリングへ! ※最短1分で申し込み可能, さらにロゴとナビゲーションの箱を作ります。 サンプルデモの解説 4.1. その中身は、サイトの名前やロゴマーク、メニューなど”一番最初に見せたいもの”だと覚えておいてください。, footerタグもその名前の通り、フッター部分を作るためのタグです。 © 2020 WEBCAMP NAVI All rights reserved. サイトの一番上にくる部分に目次を置くことで、ユーザーの使いやすさをあげることができます。, この「WEBCAMP NAVI」のサイトでいうと、画像の中の赤い枠で囲っている部分がヘッダーです。, ヘッダー部分によく含まれているものとしては、そのサイトの名前やロゴ、メニューなどがあります。, headとheaderの違いは、「サイトに表示されるかどうか」と「タグの中に含む内容」にあります。, headタグの方はサイトに表示されることはなく、基本的にメタタグやリンクタグを書きます。 フッターテンプレートのデザインを探している人は、ぜひ参考にしてください。. 【DMM WEBCAMP SKILLS】ならこれからの時代に必要不可欠なプログラミングスキルを最短1ヶ月で習得できます! 親要素が
  • Leave a comment

    Your email address will not be published. Required fields are marked *