Webデザインの教科書
- テクニック編 -
Scroll

Webデザインのテクニックすぐ実践できるデザインレシピ集

Webページを作ってる時にデザインに困ったことないですか?

どうしてもうまくいかなかったり、思い通りにならない時があると思います。

今回は意外と知らない便利テクニックを紹介します。

HTMLとCSSだけで出来るテクニックを紹介します。

どれも実際に使われているテクニックだけを選んでいます。

どうぞお好きなデザインレシピからお選び下さい。

文字のデザイン

  1. 文字のフォントを変える
  2. Font

    無料のGoogle Fontsを使って、CSSで思い通りのフォントに変更しよう。

    ページを開く
  3. 文字のレスポンシブ対応
  4. たった2行で出来る、画面の大きさに合わせて文字サイズを調節するCSSの書き方。

    ページを開く

画像テクニック

  1. 背景画像とレスポンシブ対応
  2. 背景画像の使い方と、画面大きさに合わせて綺麗に表示するCSSの書き方。

    ページを開く

公開の前にすること

  1. 公開準備
  2. Webサイトの公開に向けてチェックすることをまとめて紹介します。

    ページを開く
  3. iphoneXと11対応
  4. Glacier

    HTML&CSSでiphoneXと11の特殊な画面に合わせたデザインとその確認の方法について。

    ページを開く
  5. URLの正規化
  6. http://sheep.com/
    https://sheep.com/
    http://www.sheep.com/
    https://www.sheep.com/

    検索順位に悪影響が出ないように、しっかりURLの正規化をしておこう。

    ページを開く
  7. 公開日の表示
  8. 記事の新鮮度をアピールする。Webページの公開日や最終更新日を自動で表示する方法。

    ページを開く