【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
Webデザイナーとして働いていると、デザインと開発のスキルのどちらも求められるケースが少なくありません。デザインだけでなくコーディングに関する知識も身につけて、スキルアップを目指しましょう。
今回は、デザイナーがWebサイトを開発する際に役立つコーディング知識7選をご紹介します。
目次
以下の設定を使うと、水平方向のスライダー、絶対位置のアイテム、余白があちこちに散ってしまう現象などを、すべて一度に防止できます。
* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}
もし変更が必要な場合は、個々のアイテムを編集しましょう。
アンダーラインや背景などのアニメーションには、「::after」と「::before」の擬似要素を使うのがおすすめです。
「content」プロパティの設定を忘れると擬似要素がレンダリングされません。忘れずに設定しましょう。以下のコードは線を表現するためのコードの例です。
.item::after {
content: "";
position: absolute;
top: 100px;
left: 10px;
... properties you want;
}
レスポンシブなWebサイトを作りたいなら、ユーザーに表示される画面であるビューポートの高さを活用しましょう。
幅にあわせてしまうと、文字が大きすぎたり小さすぎたりするので、高さにあわせるのがポイントです。
.text {
height: 300px;
}
背景に画像を使ったコンテナは、しばしば「background-image」というCSSプロパティで作られてきました。
しかし、この方法には3つの欠点があります。
これらの理由から、HTML内のシンプルな「img」を使うことをおすすめします。
もしすでに「position」を「relative」に設定をしている場合は、位置の設定は不要です。
.background {
position: relative;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
最近よく見かけるようになった、下から文字があらわれるアニメーション。以下は著者のポートフォリオサイトの例です。
以下は必要最小限のコードです。もちろん「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)
}
}
ナビゲーション機能を搭載している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;
}
位置を絶対位置にしたり、ナビゲーションを横から表示させたりなど、アイデア次第でデザインを変更できます。
ユーザーフレンドリーなナビゲーションバーを作る5つのポイント
Workship MAGAZINE
開発中に異なるCSSファイル(デスクトップ用とモバイル用など)を作成し、最後に統合しましょう。
こうすることで、HTTPリクエストを最小限に抑えられます。
たとえば、「/modules」フォルダにナビゲーションバーやフッターなどを別々に入れておけば、一部の変更のためにすべてのページを編集する必要はありません。
モジュール化できることが多ければ多いほど、利便性が上がります。
どんな分野の知識を身につけるときも、コツがあります。
根気強く、そして効率よくコーディングの知識を身につけて、スキルに深みをもたせましょう。
(執筆:Lorenzo Doremi 翻訳:Asuka Nakajima 編集:泉 提供元:UX Planet)
社会人におすすめのWebデザインスクール厳選12校【2024年8月版】
Workship MAGAZINE
2024年 東京都内の優良プログラミングスクール20選
Workship MAGAZINE