こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、0からコーディングをする際に「どこから手をつければ良いか分からない」と困る方も多いと思いますので、コーディングをする際のポイントをお伝えします。
→0からWebサイトのデザインをする際のポイントはこちら
デザインデータを印刷する
まずはデザインデータを印刷してみましょう。
印刷できなければ、紙に書いても大丈夫です。
紙に書くと言ってもデザインと同じクオリティで書く必要はありません。
エリアごとにざっくりで大丈夫です。
このブログを例にしてみます。
印刷、もしくは紙に書いたら、エリア分けをします。
このブログはヘッダー、コンテンツ、サイド、フッターの4つのエリアに分かれています。
こうすることでコーディングをする際に分かりやすく、綺麗にコードを書くことができるようになります。
ベースのhtmlを書く
次は早速htmlを書きます。
head内のmetaタグやcssのリンクは後から記述するとして、まずはベースとなるhtmlを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○</title>
<meta name="keywords" content="○○○,○○○,○○○">
<meta name="description" content="○○○">
</head>
<body>
<!-- ヘッダー -->
<header>
</header>
<!-- コンテンツ -->
<main>
</main>
<!-- サイド -->
<div>
</div>
<!-- フッター -->
<footer>
</footer>
</body>
</html>body内に上からヘッダー、コンテンツ、サイド、フッターのタグを用意しました。
この中に記述していきます。
ここで1つ注意点です。
Webサイトは左上から右下にコーディングするのが基本です。
一番上はヘッダーで、2番目がコンテンツになりますが、隣に3番目のサイドがあります。
この場合、2番目のコンテンツと3番目のコンテンツをひとつのまとまりにする必要があります。
まとまりにしないと横並びにすることができません。
コードで書くとこうなります。
<body>
<!-- ヘッダー -->
<header>
</header>
<!-- divタグでひとつにまとめる -->
<div>
<!-- コンテンツ -->
<main>
</main>
<!-- サイド -->
<div>
</div>
</div>
<!-- フッター -->
<footer>
</footer>
</body>コンテンツのmainタグと、サイトのdivタグを、divタグで囲みました。
囲んだdivタグが親要素になり、コンテンツのmainタグと、サイトのdivタグが子要素になります。
こうすることで横並びのレイアウトにすることができます。
ヘッダーを作る
ベースのhtmlができたら、一番上にヘッダーからコーディングしていきましょう。
先ほど書いたheaderタグの中に書いていきます。
<!-- ヘッダー -->
<header>
<h1><img src="https://www.good-f-design.com/wp-content/uploads/2021/04/logo.png" alt="初心者のためのWebデザイナー講座 good-f DESIGN"></h1>
</header>headerタグの中にh1タグを書き、その中にロゴ画像のパスを記述しました。
htmlファイルを保存し、ブラウザで開くと画像が表示されると思います。
ただ画像も大きいし、左に寄っていますので、これをcssで調整していきます。
CSSをリセットする
ヘッダーのhtmlが書けたら、次はcssを書いていくのですが、その前に大事なことがあります。
bodyタグやpタグなど、htmlで用意されているタグは、デフォルトのスタイルが適用されています。
そのままだと思ったようにレイアウトできなかったり、かき消すスタイルを書かなくてはいけません。
そのため「reset.css」というcssファイルを読み込ませます。
reset.cssは、ネットで検索すればゴロゴロ出てきますので、できるだけ新しいものをダウンロードしましょう。
CSSを読み込ませる
reset.cssをダウンロードできたら、一緒に「style.css」ファイルも作成します。
cssフォルダを作り、その中に「reset.css」と「style.css」ファイルを入れます。
そして、このcssファイルを読み込ませるためにhtmlのhead内にlinkを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○</title>
<meta name="keywords" content="○○○,○○○,○○○">
<meta name="description" content="○○○">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>これでcssを読み込めるようになりました。
reset.cssはそのまま触らずに、style.cssファイルにstyleを書いていきます。
CSSを書く
それではヘッダー内のタグにスタイルを書いていきます。
@charset "UTF-8";
header {
padding: 30px 0;
box-shadow: 0 1px 15px -5px rgb(0 0 0 / 50%);
}
h1 img {
width: 241px;
margin: 0 auto;
}headerタグに「padding」と「box-shadow」のスタイルを書きました。
h1タグ内のimgタグに「width」と「margin」のスタイルを書きました。
style.cssファイルを保存してブラウザで見てみると、ロゴがセンターになり、ヘッダーの下に影がついていると思います。
上から順番にコーディングしていく
このように上から順番にコーディングしていくのが基本になります。
色々やり方はありますが、エリアごとにまずhtmlを書き、次にcssを書いていくのが分かりやすいと思います。
ここで気をつけたいのが、htmlは書いたものがそのまま表示に影響するし、SEO（検索エンジン最適化）にも影響あるので、綺麗に書く必要があります。
cssも無駄のない綺麗な記述が良いですが、そこまで悪い影響はないので、多少スタイルが重複していたり、無駄があっても問題ないと思っています。
最後に
以上、コーディングをする際のポイントについてお伝えしました。
ここでお伝えしたのは基礎中の基礎で、htmlとcssはもっと奥が深いです。
タグやスタイルを覚えると、コーディングしながら頭のなかで組み上げながらできるようになります。
ただ、コーディングの進め方としては基本この流れになります。
やっぱり紙でみると分かりやすくておすすめです。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント