ゼロからレイアウトを作りましょう

23621 ワード
webdev css ui html テキストリンク
今日は、HTML、CSS、Flexbox、グリッドレイアウトなどを使用してゼロから全体のウェブサイトのレイアウトを構築しましょう.
完全な記事を読むか、私にYoutubeでコードを見てください:

結果


https://github.com/crayon-code/website-cloud-service

ブランクHTML 5ドキュメント


HTML 5ドキュメントから始めましょう.これは、次の章を通して少しずつ拡大する予定です.

Did you know that typing an exclamation mark (!) and hitting tab in VS CODE generates a blank HTML5 Document?


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEAMCLOUD</title>
  </head>
  <body>
    <!-- content will go here -->
  </body>
</html>

スタイルと外部フォントの使用


ドキュメントに含める必要がある3つ(複数)の外部リソースがあります<head> :
  • 私たち自身のスタイルシートstyles.css .
  • ページのデフォルトフォントとしてフォントnunitoを使用します.したがって、Googleのフォントを介してロードされます.フォント重み200、400、700が使用される.特に200は、より大きなテキスト(見出しのような)でかなりエレガントに見えます.
  • フォント素晴らしいcdnjs.com . 気を付けろintegrity 属性としては、優れたセキュリティ機能です.ユーザーエージェントによってダウンロードされたファイルのSHAチェックサムがintegrity 属性はブラウザがダウンロードした内容が改ざんされていることを知っています.参照this MDN Article サブリソースの整合性について.
    • <head>
  ....

  <!-- or own styles -->
  <link rel="stylesheet" 
    href="styles.css"
    type="text/css" />

  <!-- "Nunito" font via google fonts -->
  <link rel="preconnect" 
    href="https://fonts.gstatic.com" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" >

  <!-- Font Awesome via CDNJS  -->
  <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" 
    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" 
    crossorigin="anonymous" />
  </head>

    変数と基本スタイル


    さて、我々styles.css ファイルは、いくつかの基本的なものから始めましょう.例えば、変数.これは非常にカスタマイズのために我々は変数と一般的な、移行の設定のような反復的なもので使用される色を持っているために便利です.
    :root {
  --bg-start: #2c35a2;
  --bg-end: #0f133b;

  --highlight-fg: #161c49;
  --highlight-primary: #73fff5;
  --highlight-secondary: #cf0389;

  --fg-color: rgba(255, 255, 255, 0.9);

  --transition: 250ms ease-out;
}
    このブロックをリセットするpadding , margin and box-sizing 各要素に対しては、ブラウザや要素間で一貫性があります.
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
    rootで<html> 要素は、基本的なテキストの色だけでなく、フォントサイズを含む基本的なフォントを定義している.これは非常に重要です、我々は多くのrem 値とそれらは常にルート上で設定されているフォントサイズに相対的です<html> 要素.
    html {
  color: var(--fg-color);

  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 18px;
}
    The <body> 単に内容を水平にして、内容を非常に上に置くフレックス容器であるつもりです.min-height: 100vh 本体が常に完全なビューポート高さを持っていることを保証します.そして、それは全体のページの向こう側に勾配を費やします.
    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 2rem;
  min-height: 100vh;


  background: linear-gradient(
    45deg,
    var(--bg-start), 
    var(--bg-end)
  );
}

    ロゴ


    最初の実際のコンテンツ要素はロゴです.Aに埋め込まれているheader タグとは単にdiv とimg SVGイメージとロゴテキストを参照するタグ.
    <body>
  <header>
    <div class="logo">
      <img src="logo.svg">
      beamcloud
    </div>
  </header>
</body>
    画像とロゴのテキストを横に置き、垂直にそれらを中心に置くフレックスコンテナであるので、この1つのスタイリングは非常に簡単です.また、画像の高さは、フォントサイズに合わせて設定されます.
    .logo {
  display: flex;
  align-items: center;

  text-transform: uppercase;
  font-size: 2rem;
}

.logo > img {
  height: 2rem;
  margin-right: 1rem;
}

    ナビゲーションバー


    ナビゲーションバーはヘッダー内の2番目の要素で、順序なしリストを使用しますul ナビゲーションアイテムのnav 既にマークアップレベルにセマンティクスを提供する.
    <body>
  <header>
    ...
    <nav>
      <ul>
        <li class="active">
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Reviews</a>
        </li>
        <li>
          <a href="#">Pricing</a>
        </li>
        <li class="highlight">
          <a href="#">Sign In</a>
        </li>
      </ul>
    </nav>
  </header>
</body>
    お互いの隣にロゴやナビゲーションアイテムを配置するにはheader 要素はまた、フレックスコンテナであり、使用して両方の項目を非常に左/右にプッシュjustify-content: space-between.
    header {
  display: flex;

  justify-content: space-between;
}
    以来すべてのブラウザは、強調表示された色のリンクを下線を引いて、それぞれの変数に色を設定し、すべての種類のテキストの装飾を解除することによってスタイリングの種類を取り消しましょう.
    a {
  color: var(--fg-color);

  text-decoration: none;
}
    最後に、ナビゲーション項目自体のために、グリッドレイアウトを使用して、自動的にすべての項目をそれぞれ独自の列に流用するように設定されています.使用によってgrid-auto-columns: max-content 各セルは、付属のテキストをラップせずにナビゲーションアイテムの周りにきれいにラップされます.
    nav > ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.5rem;

  list-style-type: none;
}

nav > ul a {
  padding: 0.25rem 1.25rem;

  text-transform: uppercase;

  transition: color var(--transition),
    background-color var(--transition);
}

    メインコンテンツ


    ページの主な内容についてはmain セマンティックHTMLタグ内部には、見出しと段落と我々はそれの隣に置くつもりだ素敵な小さなアートワークを含むセクションタグです.
    <body>
  ...
  <main>
    <section>
      <div class="content">
        <h1>Scale well, sleep well.</h1>
        <p>
          Get the most out of your apps and websites with our highly available and scalable cloud infrastructure. All you need, directly at your fingertips.
        </p>
        <a href="#" class="button">
          Learn More
        </a>
      </div>
      <div class="artwork">
        <img src="artwork.svg" >
      </div>
    </section>
  </main>
</body>
    The section それ自体もグリッドレイアウトになりますが、今回は明示的に2つのカラムを持つように設定されていますが、左側のカラムには1つの割合が与えられます1fr ) 利用可能なスペースと右カラムの2つの端数2fr ).
    main {
  max-width: 50rem;
  padding: 2rem;
}

section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content artwork";
  place-content: center;
}

section > .content {
  grid-area: content;
  place-self: center stretch;
}

section > .artwork {
  grid-area: artwork;
  place-self: stretch;
}

h1 {
  margin-bottom: 1rem;

  color: var(--highlight-primary);

  font-size: 2.5rem;
  font-weight: 200;
}

p {
  margin-bottom: 1rem;

  font-size: 1.25rem;
  font-weight: 200;
}

    フッター


    ついに、私たちは、Aのページの底に達しましたfooter . 我々は、我々が非常に始めにものすごいフォントを含めた理由であるソーシャルメディア・アイコンの束を置くために、それを使っています.
    <body>
  ...
  <footer>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
  </footer>
</body>
    フッタは、再びグリッドのレイアウトを自動的にそれぞれの要素を自動的に独自の列にギャップのギャップを1rem それらの各々の間で.
    footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 1rem;
  justify-content: center;

  margin-top: 4rem;
  padding-top: 1rem;
  width: 80%;
}
    ヘッダーを少しだけスパイスするには、「普通の」境界線を使用しないでください.したがってfooter::before 擬似クラスでは、背景としてグラデーションを持つフッタの上部に要素を置くことができます.そして、それはすでにです!
    footer {
  position: relative;
  ...
}

footer::before {
  content: '';

  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--highlight-secondary),
    transparent
  );
}
    jqueryはページ上部に戻る機能を実現します.
    [伯俊]1401にこうけいすうを求める