MENU
カテゴリー

KDC : Web演習 中期 第5回

Web制作の現場で闘うために必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載します。

中期 第5回目では、UIkitで実際に上(ヘッダー)から下(フッター)まで組まれた状態のhtmlを触り、自分でWebサイトをデザインし、UIkitで組み上げる(コーディングを行う)時の予行練習を行います。

目次

これまでのおさらい

  1. UIkit(ユーアイキット)はCSSフレームワーク
    • なぜ使うのか?
      • フレームワークがデザインに関するあれこれを解決してくれるから
  2. レイアウトで使用する主なコンポーネントは4つ
  3. レスポンシブ対応するためにはブレイクポイント用のCSSクラスを記載しよう

さっそくhtmlを触ろう

コード、こわくない。

パスワードは当日お伝えします

メモ

Viewport(ビューポート)

レスポンシブWEBデザイン適用時には、必要不可欠のhtmlタグです。<head>タグ内に記述します。
ウェブページがどれくらいのスペースを使って表示されるかを制御するためのもので、色々なデバイスの画面に合わせて、きれいに表示されるように調整できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Googleは、現時点でこちらの記述を推奨しています。

「width=device-width」は、表示する幅を、デバイス画面の幅に合わせる記述です。

「initial-scale=1」は初期のズーム倍率を表します。1とは拡大も縮小もしないことを意味します。つまり、ウェブページが通常の大きさで表示されるので、表示時の違和感もない状態です。

ウェブページがどんなデバイスでも見やすく、使いやすくするためには、ビューポートを必ず設定しましょう。

グラデーション背景

画像の重なり順を変えたい

z-index要素をcssに書くべし

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Sunnana Inc. / Web Designer
熊デザ16期生。紙媒体広告やWebサイトのデザイン、サイトの立ち上げから運営まで幅広く担当しています。スパイスカレー作りにドハマリ中。

目次