【初心者向け】Webデザイナーが最低限知るべきHTML/CSS/JavaScript7選

Webデザイナーとして働いていると、デザインと開発のスキルのどちらも求められるケースが少なくありません。デザインだけでなくコーディングに関する知識も身につけて、スキルアップを目指しましょう。

今回は、デザイナーがWebサイトを開発する際に役立つコーディング知識7選をご紹介します。

1. 魔法の設定

以下の設定を使うと、水平方向のスライダー、絶対位置のアイテム、余白があちこちに散ってしまう現象などを、すべて一度に防止できます。

* {
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  display: block;
}

もし変更が必要な場合は、個々のアイテムを編集しましょう。

2. アニメーションつきの線と装飾

▲テキストにホバーすると線があらわれる（出典：UX Planet）

アンダーラインや背景などのアニメーションには、「::after」と「::before」の擬似要素を使うのがおすすめです。

「content」プロパティの設定を忘れると擬似要素がレンダリングされません。忘れずに設定しましょう。以下のコードは線を表現するためのコードの例です。

.item::after {
  content: "";
  position: absolute;
  top: 100ｐｘ;
  left: 10px;
  ... properties you want;
}

3. 文字サイズにビューポートの高さを使う

レスポンシブなWebサイトを作りたいなら、ユーザーに表示される画面であるビューポートの高さを活用しましょう。

幅にあわせてしまうと、文字が大きすぎたり小さすぎたりするので、高さにあわせるのがポイントです。

.text {
  height: 300px;
}

4. HTMLの背景画像

▲背景に画像を使っているカードUIの例（出典：UX Planet）

背景に画像を使ったコンテナは、しばしば「background-image」というCSSプロパティで作られてきました。

しかし、この方法には3つの欠点があります。

• SEOを損なう
• CSSを毎回編集する必要がある
• コードを再利用できない

これらの理由から、HTML内のシンプルな「img」を使うことをおすすめします。

もしすでに「position」を「relative」に設定をしている場合は、位置の設定は不要です。

.background {
  position: relative;
}

.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

5. 下からあらわれる文字

最近よく見かけるようになった、下から文字があらわれるアニメーション。以下は著者のポートフォリオサイトの例です。

▲出典：UX Planet

以下は必要最小限のコードです。もちろん「transition」も使えます。

.parent {
  height: /*something similar to child's font size*/
  ;
  overflow-y: hidden;
  display: block;
}

.parent .child {
  animation-name: appear;
  animation-duration: ...s;
}

@keyframes appear {
  from {
    transform: translateY(/* parent's height*/
    )
  }
  to {
    transform: translateY(0)
  }
}

6. ハンバーガーメニュー

▲出典：UX Planet

ナビゲーション機能を搭載しているBootstrapのようなフレームワークを使わない場合でも、ハンバーガーメニューは簡単に作れます。

<div id="hamburger" onClick="handleMenu()">... </div><div id="navigation">... </div>

<script>
 var open=false;
 function handleMenu() {
　　  /** open the menu **/
　　  if (!open) {
　 　 document.getElementById("navigation").classList.add("opened");
　　  open=true;
　　  }
　　  /** else close the menu **/
　  　else {
　　　　  document.getElementById("navigation").classList.remove("opened");
　　　　  open=false;
　　　 }
　　}
}
</script>

以下は必要最小限のCSSです。

#navigation {
  display: none;
}
#navigation.opened {
  display: block;
}

位置を絶対位置にしたり、ナビゲーションを横から表示させたりなど、アイデア次第でデザインを変更できます。

7. HTMLとCSSを分割する

開発中に異なるCSSファイル（デスクトップ用とモバイル用など）を作成し、最後に統合しましょう。

こうすることで、HTTPリクエストを最小限に抑えられます。

たとえば、「/modules」フォルダにナビゲーションバーやフッターなどを別々に入れておけば、一部の変更のためにすべてのページを編集する必要はありません。

モジュール化できることが多ければ多いほど、利便性が上がります。

スキルに深みをもたせよう

どんな分野の知識を身につけるときも、コツがあります。

根気強く、そして効率よくコーディングの知識を身につけて、スキルに深みをもたせましょう。

（執筆：Lorenzo Doremi　翻訳：Asuka Nakajima　編集：泉　提供元：UX Planet）