こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、htmlとcssの基本をマスターしたら、0からコーディングを始めるときの手順を解説します！
重複する部分もありますが、総集編として改めてコーディングのイメージをつかもう！
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
デザインデータを印刷する
まずはデザインデータを印刷してみましょう。
印刷できなければ、紙に書いても大丈夫です。
紙に書くと言ってもデザインと同じクオリティで書く必要はありません。
エリアごとにざっくりで大丈夫です。
このブログを例にしてみます。
印刷、もしくは紙に書いたら、エリア分けをします。
このブログはヘッダー、コンテンツ、サイド、フッターの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も無駄のない綺麗な記述が良いですが、そこまで悪い影響はないので、多少スタイルが重複していたり、無駄があっても問題ないと思っています。
最後に
以上、0からコーディングを始めるときの手順を解説しました。
今回の#10で、html&css実践は終わりです。
ここまでお伝えしたのは基礎中の基礎で、htmlとcssはもっと奥が深いです。
タグやスタイルをたくさん覚えると、コーディングしながら頭のなかで組み上げながらできるようになります。
あとは、やっぱり実際に手を動かしてコードを書くのが大事です。
書かないと中々覚えられません。
少しでも参考になれば嬉しいです。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント