Web制作の現場で闘うために必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載します。
中期 第5回目では、UIkitで実際に上（ヘッダー）から下（フッター）まで組まれた状態のhtmlを触り、自分でWebサイトをデザインし、UIkitで組み上げる（コーディングを行う）時の予行練習を行います。
目次
これまでのおさらい
- UIkit（ユーアイキット）はCSSフレームワーク
- なぜ使うのか？
- フレームワークがデザインに関するあれこれを解決してくれるから
- なぜ使うのか？
- レイアウトで使用する主なコンポーネントは4つ
- レスポンシブ対応するためにはブレイクポイント用のCSSクラスを記載しよう
さっそくhtmlを触ろう
コード、こわくない。
パスワードは当日お伝えします
メモ
Viewport（ビューポート）
レスポンシブWEBデザイン適用時には、必要不可欠のhtmlタグです。<head>タグ内に記述します。
ウェブページがどれくらいのスペースを使って表示されるかを制御するためのもので、色々なデバイスの画面に合わせて、きれいに表示されるように調整できます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">「width=device-width」は、表示する幅を、デバイス画面の幅に合わせる記述です。
「initial-scale=1」は初期のズーム倍率を表します。1とは拡大も縮小もしないことを意味します。つまり、ウェブページが通常の大きさで表示されるので、表示時の違和感もない状態です。
ウェブページがどんなデバイスでも見やすく、使いやすくするためには、ビューポートを必ず設定しましょう。
グラデーション背景
画像の重なり順を変えたい
z-index要素をcssに書くべし
