CSSチュートリアル- FlexboxとGridをフィーチャーしたHTMLとCSSを使用してランディングページを構築します.

45612 ワード
webdev css beginners tutorial テキストリンク
このチュートリアルでは、Skilllzと呼ばれるオンライン教育プラットフォームのための簡単なランディングページを構築します.

このチュートリアルでは、CSSフレックスボックスとCSSグリッドの使用方法と実装について説明します.同様にカバーされる他の多くのCSS概念.
チュートリアルは3つのセクションに分けられます
  • 航法課
  • ショーケースセクション
  • 下の部分は
    • いずれもこのプロジェクトを構成する3つのHTML部分に関係しています.

    HTMLの作成
    IDE内にEmmetをインストールしている場合は、入力することによってプロジェクトのHTML Boilerplateを生成できます! をクリックし、enter or tab キーボードのキー.
    そうでなければ、このboilerplateコードをコピーして、それをあなたのHTMLファイルに貼り付けることができます
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

</body>
</html>

    フォントを使用して素晴らしいアイコン
    ショットのいずれかで見られるように、我々は我々のサービス部により良いスワップを与えるために若干のフォントアイコンを使用しています.このために、我々はCDNからフォント素晴らしいを使用しています.あなた自身でHTML biolerplateを作成するならば、以下のリンクタグをコピーして、それをあなたの頭タグに貼り付けてください
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

    始める
    スタイルシートファイル(. css)がHTMLページに適切にリンクされていることを確認します.


    第1部:航行エリア
    ナビゲーションバーのセクションは、2つのナビゲーションリンクと同様に、当社のサイトの名前で構成されますLog in and check courses .
    Navbarのマークアップはこちら
    <div class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllz</h1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log in</a></li>
                <li class="nav"><a href="" class="outline">Check courses</a                 </li>
              </ul>
            </nav>
        </div>
      </div>
    このセクションの内部の要素をラップするdivの上でcontainer and flex クラス.
  • .container : 内部の要素がCSSで指定された特定の幅を超えないように、すべてのセクションでこのユーティリティクラスを使用します
  • .flex : このユーティリティクラスを使用して、CSSフレックスボックスを使用して、子要素を水平方向に並べた方法で表示します.
    • インサイドdiv 私たちはh1 クラスのlogo つのナビゲーションリンクli>a とoutline クラス.
    私たちのページはすべてプレーンで裸に見えます


    CSSスタイリング
    我々は今、スタイルに我々のnavのセクションスタイルにいくつかのCSSルールを適用する必要があります.我々が最初にしたいことは、我々のウェブページのベーススタイリングを設定することです
    /* Overide default style and setting padding and margin to nothing */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

/* White text throughtout */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Make all link texts black with no text decoration */
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* All images must not be larger than parent container */
img {
  width: 100%;
}

/* No styling on list items */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}
    デフォルトのスタイルを適用すると、我々のページは、このようになります

    次に、コンテナクラスのスタイリングを定義する必要があります
    /* Centers it, sets a maximum width and make sure elements can flow past it*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}
    さて、コンテンツは指定された最大幅を超えません.

    その後、Navbarセクションの背景色を紫色に設定する必要があります
    /* Sets background color, height and padding*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}

    それから、我々はNavbarの中でH 1だけを目標として、以下のスタイルを指定します
    /* Sets font size, reduces font-weight, adds margin and line height */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}
    そのスタイルを適用h1 見出しはこのようになります

    ここで、Flickrを使用してコンテナh 1とnavの内側に両方の子要素を表示する必要があります.
    .navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
    まず、表示モードをflexに設定します.これは、デフォルトで要素を並んで配置します.次に、コンテンツ間のスペースを使用して、それらの間のかなりのスペースを追加し、コンテンツを正当化します.
    コンテナの中央(中央)に表示される項目を揃え、容器全体を取り上げる高さを設定します.
    これは、我々のページが今のように見えるべきことです

    しかし、我々はまた、お互いの上にスタックの両方のナビゲーションリンクをしたくない.代わりに、それらをサイドバイサイドに表示して欲しい.どのように我々はそれを推測?Flexboxで!
    .navbar ul {
  display: flex;
}

/* Changes the color of both links to white, add padding between them and margin as well */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}
    我々のページは、現在このように見えます

    あなたが簡潔なイントロビデオを見たならば、あなたがどんなリンクの上にでもホバリングするたびに、紫の濃い色合いとそれに続く固体の境界線へのテキスト・カラー変化はそれの下に現れます.この移行は、CSS : Hover Pseudo要素を使用して実装できます.
    .navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}
    今すぐ見て


    セクション2 :ショーケース領域
    ショーケース領域は、見出しのテキスト、テキストをサポートするために、新しいユーザーだけでなく、見出しのイメージに署名するためのフォームをサポートする予定です.
    この部分は左側、右側に分けられる.言い換えれば、それは2つの単位のグリッドとして表示されます.
    ここでは、このセクションのマークアップです
    <section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Learn any digital skill of your choice today</h1>
                  <p class="supporting-text"> Over 30,000 students currently learn with us</p>
                </div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Enter your email address">
                    <input type="submit" class="btn" value="Start Learning">
                  </form>
                  <p class="little-info">Try out our free courses today. No risk, no credit card required</p>
                </div>
              </div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                </div>
              </div>
           </div>

        </div>
      </section>
    現在、我々のアプリは少し乱雑に見える


    CSSスタイリング
    まず、ショーケースセクションの高さと背景色を設定します
    .showcase {
  height: 300px;
  background-color: purple;
}
    我々のアプリは、このようになります

    次に、次のスタイルを適用します
    /* Adds margin below the text */
.showcase p {
  margin-bottom: 30px;
}

/* Adds a shadow below the image */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Adds some padding on the form content */
.showcase-form {
  padding-left: 7px;
}
    これは、主な活動に私たちをもたらします.あなたが覚えているならば、私は我々がショーケース容器の中で2つのセクション(格子)をつくることになっていると言いました.グリッドクラスをそのコンテナーに登録すると、CSS Grid Displayを使用してコンテンツを揃えることができます
    .grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}
    これは私たちのショーケースコンテナの中に2つの列を作ります.最初の部分は容器の60パーセントを占めます、そして、第2の部分は容器の残りの40パーセントを占めます.オーバーフローが見えると、コンテナ(コンテナより大きい場合)がコンテナを越えて流れることを保証します.
    我々のアプリは、このようになります

    次に、ナビゲーションエリアとショーケース領域の間にいくつかのスペースを設定する必要があります
    .grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}
    その結果、今は少し離れている

    今、私たちはスタイルを入力する必要があります.私たちはそれのタイプ(電子メール)で最初の入力を選択し、そのクラス名BTN
    .showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
    このスタイルは、私たちのフォーム入力を

    また、サポートテキストのフォントを変更する
    .showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}
    これはショーケースセクションの最終的な外観です

    それはこのセクションのためです!

    第三部下面積
    ページの下部は2つのセクション、統計セクションと証拠セクションを含んでいます.
    Skillllzによって提供されるサービスを表示する統計コンテナーは、3つから成りますdiv , それぞれのフォント素晴らしいアイコンを、家を収容h3 クラスのtitle 段落p クラスのtext .
    あなたがSkillzを使って学んだ3人のランダムな人々の証言を、証言容器は持ちます.私はunsplashから写真をつかんだ.

    統計セクション
    最初に、我々は統計地域で働くつもりです.テキストは、ちょうどフィラーテキストとして行動するダミー' lorem 50 'テキストです.
    これがマークアップです
    <div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
            <h3 class="title">Over 300 available courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
            <h3 class="title">Free certificate offered on all courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
            <h3 class="title">Book 1on1 session for as low as $5</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </section>
    このセクションは空白のページとして表示されます.これは、我々のテキストの色を全身に白くしたからです.それで、我々はスタイリングを始めなければなりません.

    CSSスタイリング
    まず、次のスタイルを適用する必要があります
    /* Centers the container, sets a maximum width
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Targets all h3 with class of title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Targets the paragraphs with class name of text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}
    これは、現在我々のテキストが見えるようになります

    フォント恐ろしいフォントからのアイコンが表示されないことに注意してください.我々は、かなりすぐにそれに取り組んでいます.
    しかし、その前に、我々は重要な何かをする必要があります.我々は3つのstatのdivのすべての水平方向に並んで配置するつもりです.それを達成するために、我々は再びCSS
    /* Display horizontally, put a little space around them */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Add some padding around the container. Align text centrally */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Set margin and width */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}
    これは我々のアプリはどのようになります

    まだアイコン?それを修正する時間!
    .stats .fa {
  color: purple;
}
    とVoila!


    証言課
    ページの下容器divの内部の2番目のセクションは、証言セクションです.このセクションは、3つのカードで構成されます.そして、それの各々は、人(イメージの円の中でとまりました)、彼/彼女の名前と人証言です.
    これがマークアップです
    <section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            </div>
            <h3>Aston</h3>
            <p>I have learnt web development using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            </div>
            <h3>Beth</h3>
            <p>I have learnt copywriting using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            </div>
            <h3>Chris</h3>
            <p>I have learnt affilitate marketing using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
        </div>
      </div>
    </section>

    スタイリングの適用
    最初に、我々はそれを見ることができるようにテキストの色を黒に設定します
    .testimonial {
  color: black;
  padding: 40px;
}
    適用されるとき、それはテキストを目に見えるようにして、セクションに若干の詰め物を加えなければなりません

    次に、親コンテナの高さを取るためにイメージを設定します
    
/* Wrap the image inside a cirle shape and set height to take up all of parent element */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Align text centrally */

.testimonial h3{
  text-align: center;
}
    GIFの最終的なレイアウトをチェックした場合、すべての3つの証拠カードが並んで並んでいることに気づくでしょう.
    したがって、我々はAを作成する必要がありますdiv CSSグリッド配列を使用した3つの等しい列の
    /* Create a grid of three equal columns. Set a gap of 40 px between them */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Create a white card with some shadow around it */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}
    すべてのこのスタイルを適用して、証言セクションは、このようになります

    最後に、私たちはCSSを使用してカードの一番上の境界線と比較して円のdivとpostionを比較します
    .circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}
    そして、ここですべてがどのように我々のブラウザのようになります


    ラッピング
    Flexboxとグリッドのアライメントは非常に強力なツールですが、Webページをレイアウトするが、それを見てほしい.
    このチュートリアルでは、CSSフレックスボックス、グリッド、他の多くのCSSプロパティを使用して簡単なランディングページをデザインできました.私の次のチュートリアルでは、私はそれをより多くのメディアのクエリを使用して応答するようになります.
    このプロジェクト全体のコードはGitHub リポジトリ.
    このチュートリアルから何か役に立つことを学びました.あなたが何か提案があれば、私に手を差し伸べる.
    ついて来てくれてありがとう.
    Android UDPイントラネット接続外部ネットワークサーバ
    Android4.0.1シミュレータカーネルの最新ダウンロードアドレスとコンパイル手順