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

10 HTML and CSS Tricks

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

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

1. 魔法の設定

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

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

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

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

10 HTML CSS Tricks

▲テキストにホバーすると線があらわれる(出典:UX Planet)

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

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

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

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

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

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

.text {
  height: 300px;
}

4. HTMLの背景画像

10 HTML CSS Tricks

▲背景に画像を使っているカード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. ハンバーガーメニュー

10 HTML CSS Tricks

▲出典: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

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ