【インプット】CSS, Webデザインについて

Posted date at 2023-09-09

技術書

この記事について

書籍「HTML&CSSとWebデザイン実践講座」でのインプットをまとめます。

本業ではバックエンドの業務がメインでマークアップ・デザイン関連知識が乏しいため補う目的でよんだところ、CSSについて知らないことが多く学びが多かったです。

Webサイト制作の流れ

  1. Webサイトの企画
  2. サイトマップの作成
    1. 必要ページとどうリンクするかをまとめる
    2. 関連するページをグループ分けする
  3. ワイヤーフレームの作成
    1. サイトマップをもとに作成
  4. デザインの作成
  5. コーディング
  6. 公開

reset.cssについて

ブラウザごとにデフォルトで適用されてしまうCSSを打ち消す目的で使用 必ず最初にインポートする必要がある

シングルカラムのレイアウトとは

メリット

  • 複数のカラムを採用しないことで、レスポンシブ対応が容易である。
    • デバイスによる表示の差が少なく設計もしやすくなるメリットあり
  • コンテンツに集中しやすい
    • ユーザーの目線を訴求する場所を集中でき、ポイントをしっかりと伝えることが可能
    • 印象的なデザインの実装がしやすい

デメリット

情報量の多い場合には設計が難しい。 ショッピングサイトやギャラリーサイトのように一度に多くのアイテムを一覧表示したい場合や ニュースサイトやブログサイトのように関連記事も表示させたい場合にはマルチカラムの採用がよい

画像ファイル容量の節約テクニック

Shrink me 画像をドロップすると画像のクオリティはそのままに圧縮することが可能。

Compressor.io 上記と同様

フォントの詳しい使い方

Google Fonts

無料。 1000種類のフォントが扱える。

フォントに要るデザインの見え方の違い

ユーザーに与える印象は大きく変わる。 例 ゴシック体は装飾が少なく、デザインに合わせやすい 明朝体は全体的に線が細くすっきりとまとまる

フォントの組み合わせ例

見出しやアクセントとなる部分と本文で別のフォントを使用することで目立たせたい部分を明確にすることができる。

同じフォントファミリーの組み合わせ

一番おさまりがいい方法

太さや文字サイズを変更して見出しと本文に差をつけるとよい。

違うフォントの組み合わせ

より見出しと本文に差が生まれる。 躍動感や独創性が表現できる。 ただし、フォント同士の幅異なるとよみにくい。

装飾系フォントの組み合わせ

文章を読ませると同時に見せることができ、デザインの一部として利用可能 使うなら見出しや本文にとどめる

高解像度の画像が用意できないときの小技

画像をぼかす

元画像をツールを使ってぼかすといい もとの画像がわかる程度にとどめたほうがいい。

ドット絵を重ねる

パターン画像を重ねる。

ライン柄を重ねる。

background-imageに2つの背景指定をします。 ライン柄はCSSのみで行ける。

アイコンフォントの使い方

アイコンフォントとは

Webページで文字と同じように使用できるアイコンのこと 拡大縮小しても画質が劣化しないのが利点。

Font Awesome

汎用性が高い。

スマホ対応

viewportの設定

HTMLのhead内にviewportを設定する必要がある。 設定しないとスマホでもデスクトップで表示されてしまう。

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

デバイスの横幅に合わせた表示を設定している。 contentは両方書いておくのが一般的。

メディアクエリの基本

  1. CSSファイルのメディアクエリを利用する
  2. linkタグで読み込むCSSファイルを記述する
  3. CSSファイルを@importで読み込む

2カラムレイアウト

ブログサイト向けデザイン。 モバイルファーストを採用する

2カラムレイアウトのメリット

  • Webサイト内回遊率の向上が期待できる。 メインコンテンツを表示させるカラムと付加情報を掲載させるサイドカラムを横並びにすることで、画面のスペースの有効活用することができる。
  • スペースの有効活用 コンテンツの横幅が長いと読みにくくなり可読性が下がる。 スペースを有効活用できる

2カラムレイアウトの注意点

  • メインコンテンツへの集中力が低下する シングルカラムに比べて情報量が増えるから 使い分けが重要
  • 小さいスクリーンで文字が見にくい スマホのモバイルデバイスではシングルカラムに切り替える工夫をするとよい。

異なる画面サイズに対応させる

モバイルサイズの作成

モバイルには2カラムは不要なのでシングルカラムで作成。

デスクトップサイズの作成

600px以上のサイズで適用する。（2カラム） mainカラムとasideカラムを作成し、CSSで親要素（containerに）flexを適用する。

デザインに困ったときに役立つサイト

  • マネるデザイン研究所 真似したいポイントや応用できる場面、懸念点をまとめたサイト
  • Design patterns

CSS 疑似要素

h1::after { content:"テキスト" }

beforeとafterがある。

::before

要素の前に疑似要素が追加

::after

要素の後に疑似要素が追加

活用例１

画像を表示させる例 aタグのリンクに対してアイコンを表示させる。

a::before {
	padding: 0 5px
}

/* 外部リンク */
a[href^=http://]::before {
	content: url(image/link.svg)
}

/* メール */
a[href^=mailto:]::before {
	content: url(image/email.svg)
}

活用例２

疑似要素で空の要素を表示する。 例では文字をラインで貫いているように実装する。

<h1>疑似要素で空の要素を表示する</h1>
h1 {
	display:flex;
	font-size: 2rem;
}

h1::before,
h1::after {
	flex: 1;
	height: 2px;
	content: '';
	background-color: #ddd;
	position: relative;
	top: 1rem;
}
h1::before {
	margin-right: 1rem;
}
h1::after {
	margin-left: 1rem;
}

CSS 属性セレクター

aタグのhrefの属性値やinputのtypeの属性値を指定できる。

input[required] {
	background: pink;
}

CSS スムーズスクロール

以前JSが必要だったが今はCSSで実装可能。

html {
	scroll-behavior: smooth;
}

ページ内リンクのクリックによってスルスル動くようになる。

CSS ブレンドモード

色と画像を重ねることができる。 基本的な実装方法：

  1. background-colorで背景色を指定
  2. background-imageで背景画像を指定
  3. background-blend-modeでブレンドモード名を記述
<section id="hero">
	// 中身を記述
</section>
#hero {
	background-color: #4bdlec;
	background-image: url('イメージへのリンク');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-blend-mode: screen;
	height: 100vh;
	display: flex;
	align-items: center;
}

CSS トランジション（アニメーション）

制約

始点と終点の2点間の動きで完結できる動きはCSSのみで設定することができる。 ホバーとかの発火させるきっかけが必要

関連プロパティ

| プロパティ名 | 意味 | 指定できる値 | | -------------------------- | ------------------ | --------------------------------------------------------------------- | | transition-property | アニメーションを適用する | all, プロパティ名, none | | transition-duration | 実行にかかる所要時間 | 数値 | | transition-timing-function | アニメーションの速度やタイミング | ease, linear, ease-in, ease-out, ease-in-out, setes(), cubic-bezier() | | transition-delay | アニメーションが始まるまでの待ち時間 | 数値 |

ホバー時に幅や背景色を数秒かけて変化させるなどができる。

CSS アニメーション（キーフレーム）

transitionに比べて始点と終点の間にいくつも経過地点を設定可能。 @keyframesで指定する。 また、自動で起動可能。

@keyframes 任意のキーフレーム名 {
	0% {
		プロパティ: 値;
	},
	50% {
		プロパティ: 値;
	},
	100% {
		プロパティ: 値;
	}
}
←ホームに戻る