5分で敏感なウェブデザインを学んでください

9129 ワード
css responsivedesign tutorial html テキストリンク
この記事では、私は5分でできる限り多くの応答設計技術を教えてあげる.これは明らかにそれを正しく学ぶのに十分ではありませんが、最も重要な概念の概要を説明します.
  • 相対CSS単位
  • メディア質問
  • フレックスボックス
  • 応答タイポグラフィ
    • あなたが後で対象に深く飛び込みたいならば、あなたはプロのレベルで敏感なウェブサイトを構築するのを可能にする我々のチェックアウトをすることができます.
    画像をクリックして、コースを取得します.
    でも今は基本から始めましょう!

    相対CSS単位
    応答するWebデザインのコアでは、相対CSS単位です.これらはいくつかの他の外部の値から値を取得する単位です.これは、例えば、ブラウザの幅に基づいてイメージの幅を許すので便利です.
    最も一般的なものは:
  • %
  • エム
  • レム
  • VW
  • VH
    • この記事では、パーセント単位から始めます% , それから、我々は見ますrem ユニットの最後のセクション.
    このように非常にシンプルなウェブサイトを持っているとしましょう.

    HTMLは以下の通りです.
    <body>
    <h1>Welcome to my website</h1>
    <image src="path/to/img.png" class="myImg">
</body>
    下記のGIFから見ることができるように、デフォルトでのイメージは固定幅です.

    それは特に反応しないので、代わりに70パーセントにそれを変えましょう.次のようにします.
    .myImg {
    width: 70%;
}
    これは、画像の幅を親の幅の70パーセントに設定します<body> タグ.として<body> タグは画面の全体の幅をスパンし、画像は常に画面自体の70 %になります.
    結果を以下に示します.

    そしてそれは応答画像を作成する方法は簡単です!

    モバイル経験を改善するためのメディア質問の使用
    我々は、しかし、それは非常に小さな画面で奇妙に見えるということですが、我々の応答レイアウトの1つの問題があります.70 %の幅は、モバイルで見るときに狭いことです.ちょっと自分で見てみましょう.
    ​

    ​
    この状況でよりよく見えさせることは、メディア質問のための完全な仕事です.彼らは、例えば、幅の画面に基づいて別のスタイリングを適用することができます.スクリーンが768 px未満であるならば、我々は基本的に言うことができます.
    ここでは、CSSでメディアクエリを作成する方法を示します.
    @media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}
    画面の幅が768ピクセル未満であれば、このCSSブロックは適用されます.
    結果を以下に示します.

    ご覧のように、ページにはイメージが突然広くなるブレークポイントがあります.ブラウザが768ピクセルのワイドで、画像が70% and 100% .

    NavbarのためのFlexboxの使用
    次はフレックスボックスです.あなたは、単にFlexboxについて学ぶことなく反応性について学ぶことができません.数年前に導入されたとき、それは敏感なデザインゲームを変えました.そして、軸に沿って反応して要素を位置させるのがより簡単になりました.
    Flexboxを利用するために、我々はタイトルより上にNavbarを加えることによって我々のサイトをもう少し複雑にします.以下にHTMLを示します:
    <nav>
    <a href="#">Home</a>
    <a href="#">About me</a>
    <a href="#">Contact</a>
</nav>
    デフォルトでは、単にこのようになります.
    ​

    ​
    私たちのナビゲーションアイテムはすべて私たちが望むものではない左側に絞り込まれます.私たちは、それらをページ全体に均等に等間隔にしてもらいたい.
    それを達成するために、我々は単にNavyコンテナをFlexboxに変えて、それから魔法を使いますjustify-content プロパティ.
    nav {
    display: flex;
    justify-content: space-around;
}
    The display: flex ターン<nav> 柔軟な箱にjustify-content: space-around 柔軟な箱の中のアイテムがそれらのまわりにスペースを持つべきであることをブラウザに伝えます.ブラウザは、3つのアイテムの周りのすべての残りのスペースを均等に配布します.
    それがどのように見えるか、ここにあります.そして、あなたが気がつくように、それはきれいにスケールします:

    ​

    応答タイポグラフィ
    最後のステップは、我々のタイポグラフィを同様に反応させることです.私は、スクリーンが768ピクセル未満であるとき、ビットバーとタイトルが少し縮小することを望みます(我々のメディア質問ブレークポイントは覚えています?).
    これを行う一つの方法は、以下のようにメディアクエリのフォントサイズを小さくすることです.
    @media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}
    これは理想的ではない.我々は、アプリケーション内のいくつかのブレークポイントを終了する可能性があります(H 2、H 3、段落など)だけでなく、複数の要素があります.その結果、すべての異なるブレークポイントのすべての要素を追跡する必要があります.だめだぞ!
    しかしながら、可能性が最も高いのは、様々なブレークポイントを通して多かれ少なかれ同じようにお互いに関係することになる.例えば、h1 は常にparagraph .
    それで、私が1つの要因を調節することができた方法があったならば、そして、次に、フォントサイズの残りを作ることはその要因と比較してスケールしますか?
    レムを入力してください!
    エーrem 基本的にこれはあなたが設定したフォントサイズの値です<html> 要素.このように:
    html {
    font-size: 14px;
}
    このドキュメントではrem 等しい.
    それは、我々が2009年に我々のウェブサイトに我々のフォントサイズをセットすることができることを意味しますrem 以下のような単位です:
    h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}
    それから、フォントサイズの値を<html> 我々のメディア質問の中のタグ.これは、我々のフォントサイズを保証しますh1 and nav 要素も同様に変更されます.
    ここで我々はどのように変更するrem メディアクエリの値
    @media (max-width: 768px) {
    html {
        font-size: 14px
    }
}
    そして、そのように、我々は同様に我々のフォントサイズのためにブレークポイントを持ちます.ページが768ピクセルマークを横切るにつれて、フォントサイズがどのように変化するかに注目してください.

    それは5分でした、しかし、現在、あなたは実際にページの幅に反応するためにフォントサイズ、イメージとNavbar項目を作るために学びました.それはかなり良いですし、建物の応答性の高いウェブサイトの非常に貴重なスキルを学ぶためにあなたの最初のステップを取った.
    あなたがこの学習旅行を続けることに興味があるならば、私はあなたに我々の観察をすることを勧めます.これは、件名にYouTubeの最も人気のある教師のいずれかで教えられており、それは応答性のWebデザインでプロレベルにあなたを取るでしょう.
    ハッピーコーディング
    白駿7785社の人解答(JAVA)
    [Jereplit]Object回答