目次
初めてのコーディング実践編
初めて1からコーディングをする時の手順を公開します!!
今回のコーディング内容
HTMLを作成していきます
HTMLの基本的なテンプレートを準備
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>Webコーディング実践編</title> <link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> |
コンテンツの大枠から入力
まずは外枠から順番に内容を記載していきます!!
「body」の中に各コンテンツのタグを記載します。
|
1 2 3 4 5 6 |
<header> </header> <main> </main> <footer> </footer> |
追記ごのタグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>Webコーディング実践編</title> <link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> </header> <main> </main> <footer> </footer> </body> </html> |
ヘッダー部分のタグを入力
ヘッダー部分のタグを入力します。
「header」内に下記を記載
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1><img src="img/logo" alt="ログテキスト"></h1> <p><a href="tel:000-0000-0000">tel:000-0000-0000</a></p> <nav> <ul> <li>ナビ01</li> <li>ナビ02</li> <li>ナビ03</li> <li>ナビ04</li> <li>ナビ05</li> <li>ナビ06</li> <li>ナビ07</li> </ul> </nav> |
記載ごのタグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>Webコーディング実践編</title> <link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1><img src="img/logo" alt="ログテキスト"></h1> <p><a href="tel:000-0000-0000">tel:000-0000-0000</a></p> <ul> <li>ナビ01</li> <li>ナビ02</li> <li>ナビ03</li> <li>ナビ04</li> <li>ナビ05</li> <li>ナビ06</li> <li>ナビ07</li> </ul> </header> <main> </main> <footer> </footer> </body> </html> |
メインコンテンツ部分のタグを入力
ヘッダー部分のタグを入力します。
「main」内に下記を記載
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div> <figure><img src="img/main.jpg" alt="メインイメージ"></figure> </div> <ul> <li><img src="img/bana01.jpg" alt="バナーイメージ"></li> <li><img src="img/bana02.jpg" alt="バナーイメージ"></li> <li><img src="img/bana03.jpg" alt="バナーイメージ"></li> </ul> <section> <div> <figure></figure> <> <h2>タイトルテキストタイトルテキスト</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </section> <section> <h2>News</h2> <dl> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> </dl> </section> <div> <ul> <li><img src="img/bana04.jpg" alt="バナーイメージ"></li> <li><img src="img/bana05.jpg" alt="バナーイメージ"></li> </ul> </div> <ul> <li><img src="img/bana06.jpg" alt="バナーイメージ"></li> <li><img src="img/bana07.jpg" alt="バナーイメージ"></li> <li><img src="img/bana08.jpg" alt="バナーイメージ"></li> <li><img src="img/bana09.jpg" alt="バナーイメージ"></li> <li><img src="img/bana10.jpg" alt="バナーイメージ"></li> <li><img src="img/bana11.jpg" alt="バナーイメージ"></li> </ul> |
記載ごのタグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>Webコーディング実践編</title> <link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1><img src="img/logo" alt="ログテキスト"></h1> <p><a href="tel:000-0000-0000">tel:000-0000-0000</a></p> </header> <main> <div> <figure><img src="img/main.jpg" alt="メインイメージ"></figure> </div> <ul> <li><img src="img/bana01.jpg" alt="バナーイメージ"></li> <li><img src="img/bana02.jpg" alt="バナーイメージ"></li> <li><img src="img/bana03.jpg" alt="バナーイメージ"></li> </ul> <section> <div> <figure></figure> <> <h2>タイトルテキストタイトルテキスト</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </section> <section> <h2>News</h2> <dl> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> </dl> </section> <div> <ul> <li><img src="img/bana04.jpg" alt="バナーイメージ"></li> <li><img src="img/bana05.jpg" alt="バナーイメージ"></li> </ul> </div> <ul> <li><img src="img/bana06.jpg" alt="バナーイメージ"></li> <li><img src="img/bana07.jpg" alt="バナーイメージ"></li> <li><img src="img/bana08.jpg" alt="バナーイメージ"></li> <li><img src="img/bana09.jpg" alt="バナーイメージ"></li> <li><img src="img/bana10.jpg" alt="バナーイメージ"></li> <li><img src="img/bana11.jpg" alt="バナーイメージ"></li> </ul> </main> <footer> </footer> </body> </html> |
フッター部分のタグを入力
フッター部分のタグを入力します。
「footer」内に下記を記載
|
1 |
<small>コピーライトテキスト</small> |
記載ごのタグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>Webコーディング実践編</title> <link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1><img src="img/logo" alt="ログテキスト"></h1> <p><a href="tel:000-0000-0000">tel:000-0000-0000</a></p> </header> <main> <div> <figure><img src="img/main.jpg" alt="メインイメージ"></figure> </div> <ul> <li><img src="img/bana01.jpg" alt="バナーイメージ"></li> <li><img src="img/bana02.jpg" alt="バナーイメージ"></li> <li><img src="img/bana03.jpg" alt="バナーイメージ"></li> </ul> <section> <div> <figure></figure> <div> <h2>タイトルテキストタイトルテキスト</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </section> <section> <h2>News</h2> <dl> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> <dt>2018.00.00</dt> <dd>タイトルテキストタイトルテキスト</dd> </dl> </section> <div> <ul> <li><img src="img/bana04.jpg" alt="バナーイメージ"></li> <li><img src="img/bana05.jpg" alt="バナーイメージ"></li> </ul> </div> <ul> <li><img src="img/bana06.jpg" alt="バナーイメージ"></li> <li><img src="img/bana07.jpg" alt="バナーイメージ"></li> <li><img src="img/bana08.jpg" alt="バナーイメージ"></li> <li><img src="img/bana09.jpg" alt="バナーイメージ"></li> <li><img src="img/bana10.jpg" alt="バナーイメージ"></li> <li><img src="img/bana11.jpg" alt="バナーイメージ"></li> </ul> </main> <footer> <small>コピーライトテキスト</small> </footer> </body> </html> |
これでHTMLが完成しました。
上記の内容でHTML部分が完成になります。
ここからcssの内容を適用して作業を進めていきます!!
