サンプルサイトの各ページ
サンプルサイトを実際にマークアップしてみました。 こちらにアップしました。
トップページ
|
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 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MY WEB SITE</title> <meta name="keywords" content="キーワード,複数ある場合はカンマで区切る,5〜6個程度が望ましい" /> <meta name="description" content="ディスクリプションはサイトの概要です。60文字から124文字以内に納めましょう。" /> </head> <body> <header> <h1>MY WEB SITE</h1> <nav> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="about.html">自己紹介</a></li> <li><a href="skill.html">自分にできること</a></li> <li><a href="flow.html">タイムスケジュール</a></li> <li><a href="faq.html">よくある質問</a></li> </ul> </nav> </header> <article> <h1>自分について</h1> <p> 自分について見つめなおす間も無く走り続けてまいりました。こういう機会でもないかぎり自分を客観的に活字としての情報で知り得る事はありませんので、楽しみながら作成させていただいています。 こんな拙い文章しか書けないのでお見苦しい点はあるかと思いますが、何卒ご了承ください。 </p> <section> <h1><a href="about.html">自己紹介</a></h1> <p> まずは挨拶から大阪で活動しているwebデザイナーです。好きこそ物の上手なれを目指しています。 </p> </section> <section> <h1><a href="skill.html">自分にできること</a></h1> <p> ホームページを作るために僕が身につけたスキルをご紹介します。 </p> </section> <section> <h1><a href="flow.html">タイムスケジュール</a></h1> <p> あまり代わり映えのない毎日ですが僕の平日のタイムスケジュールを紹介しています。 </p> </section> <section> <h1><a href="faq.html">よくある質問</a></h1> <p> 僕にたいしてよせられるよくある質問をQ＆A形式でお答えしています。フィクション99％です。 </p> </section> </article> <footer> <p>Copyright © CREATE RECORD. All Rights Reserved.</p> </footer> </body> </html> |
自己紹介ページ
|
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 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介｜MY WEB SITE</title> <meta name="keywords" content="キーワード,複数ある場合はカンマで区切る,5〜6個程度が望ましい" /> <meta name="description" content="ディスクリプションはサイトの概要です。60文字から124文字以内に納めましょう。" /> </head> <body> <header> <h1>MY WEB SITE</h1> <nav> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="about.html">自己紹介</a></li> <li><a href="skill.html">自分にできること</a></li> <li><a href="flow.html">タイムスケジュール</a></li> <li><a href="faq.html">よくある質問</a></li> </ul> </nav> </header> <article> <h1>自己紹介</h1> <h2>ご挨拶</h2> <p> はじめましてnaruと言います。別にナルシストではありません！(初対面の人に割と突っ込まれるので)僕のホームページを閲覧していただきありがとうございます。こちらのページでは僕の自己紹介を掲載しています。 </p> <h2>バイオグラフィー</h2> <table> <tr> <th>名前</th><td>naru</td> </tr> <tr> <th>生年月日</th><td>1973年4月26日</td> </tr> <tr> <th>血液型</th><td>B型</td> </tr> <tr> <th>出身地</th><td>大阪</td> </tr> <tr> <th>活動拠点</th><td>大阪</td> </tr> <tr> <th>ソーシャルネットワーク</th><td>Twitter,Facebook</td> </tr> </table> <h2>これからの自分</h2> <p>もっと様々な情報をアウトプットし、知り得た情報を使いこなせる人間になれるよう頑張ります。</p> </article> <footer> <p>Copyright © CREATE RECORD. All Rights Reserved.</p> </footer> </body> </html> |
自分にできること
|
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 70 71 72 73 74 75 76 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自分にできること｜MY WEB SITE</title> <meta name="keywords" content="キーワード,複数ある場合はカンマで区切る,5〜6個程度が望ましい" /> <meta name="description" content="ディスクリプションはサイトの概要です。60文字から124文字以内に納めましょう。" /> </head> <body> <header> <h1>MY WEB SITE</h1> <nav> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="about.html">自己紹介</a></li> <li><a href="skill.html">自分にできること</a></li> <li><a href="flow.html">タイムスケジュール</a></li> <li><a href="faq.html">よくある質問</a></li> </ul> </nav> </header> <article> <h1>自分にできること</h1> 自分に出来ること＝やりたいこと＝仕事にできている僕は幸せ者です。しかし僕にできることは限られています。限られたできることだから全力投球でありたいです。 <dl> <dt>Webデザインのためのスキル</dt> <dd> <ul> <li>fireworks</li> <li>Photoshop</li> <li>Illustrator</li> </ul> </dd> </dl> <dl> <dt>コーディングのためのスキル</dt> <dd> <ul> <li>dreamweaver</li> <li>css</li> <li>xhtml</li> <li>html5</li> <li>php</li> <li>jQuery</li> <li>javascript</li> <li>sass</li> <li>compass</li> </ul> </dd> </dl> <dl> <dt>cmsのためのスキル</dt> <dd> <ul> <li>eccube</li> <li>wordpress</li> <li>ムーバブルタイプ</li> </ul> </dd> </dl> <p> 基本は一応おさえているつもりです。上記以外にもアプリ開発のために絶賛objective-cを習得中です。 </p> </article> <footer> <p>Copyright © CREATE RECORD. All Rights Reserved.</p> </footer> </body> </html> |
タイムスケジュール
|
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 70 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイムスケジュール｜MY WEB SITE</title> <meta name="keywords" content="キーワード,複数ある場合はカンマで区切る,5〜6個程度が望ましい" /> <meta name="description" content="ディスクリプションはサイトの概要です。60文字から124文字以内に納めましょう。" /> </head> <body> <header> <h1>MY WEB SITE</h1> <nav> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="about.html">自己紹介</a></li> <li><a href="skill.html">自分にできること</a></li> <li><a href="flow.html">タイムスケジュール</a></li> <li><a href="faq.html">よくある質問</a></li> </ul> </nav> </header> <article> <h1>タイムスケジュール</h1> <p> 年間の平日の九分九厘はこの通りの行動です。自分では変化を好む人間だと思っていましたが、書き出してみると案外そんな事はございませんでした。 </p> <dl> <dt>07:00 起床</dt> <dd>毎日眠いですが、起きております。寝起きは比較的いい方です。</dd> <dt>07:15 朝風呂</dt> <dd>僕は風呂は朝派です。手っ取り早く覚醒できるのがいいですね！夏場は暑くてたまりませんが</dd> <dt>08:45 通勤</dt> <dd>わりと遅めの通勤です。会社がフレックスなので助かります。</dd> <dt>10:00 出勤</dt> <dd>午前中からバリバリというわけではなく僕はスロースターターなので午前中は細々した仕事を片付けてしまいます。</dd> <dt>11:45 昼食</dt> <dd>混雑を避けるためにちょっと早めに昼食をとります。</dd> <dt>12:45 午後の業務</dt> <dd>午後はガッツリ時間をとって制作です。好きな音楽を聴きながら超集中して制作します。メタル系を聴くとこころなしか仕事が早くなった気がします。</dd> <dt>22:00 帰宅</dt> <dd>制作会社にしてはわりと早い帰宅です。</dd> <dt>22:30 夕飯</dt> <dd>この時間に食って太るなってほうが無理！</dd> <dt>23:30 プライベートタイム</dt> <dd>create record更新とか調べものとかハマったら朝方までやってる日もあります。</dd> <dt>02:00 就寝</dt> <dd>寝ます。睡眠大事ですよ!</dd> </dl> </article> <footer> <p>Copyright © CREATE RECORD. All Rights Reserved.</p> </footer> </body> </html> |
よくある質問
|
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 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>よくある質問｜MY WEB SITE</title> <meta name="keywords" content="キーワード,複数ある場合はカンマで区切る,5〜6個程度が望ましい" /> <meta name="description" content="ディスクリプションはサイトの概要です。60文字から124文字以内に納めましょう。" /> </head> <body> <header> <h1>MY WEB SITE</h1> <nav> <ul> <li><a href="index.html">TOPページ</a></li> <li><a href="about.html">自己紹介</a></li> <li><a href="skill.html">自分にできること</a></li> <li><a href="flow.html">タイムスケジュール</a></li> <li><a href="faq.html">よくある質問</a></li> </ul> </nav> </header> <article> <h1>よくある質問</h1> <p>こちらでは僕によせられるよくある質問をq&a形式でまとめております。 </p> <section> <h1>webデザイナーを目指したきっかけは？</h1> <p>自分の音楽の為のホームページを作るのがきっかけでした。いつの間にか音楽より楽しくなりいつの間にか仕事になっていました。</p> </section> <section> <h1>Webデザインで1番苦労したことは？</h1> <p>やはりIEですね。IEがなければもっとデザイン的な制約がなくなりアイデアの赴くままにデザインできると思います。IEに対応させるためにjsを入れまくって動作がもっさりするのも本末転倒ですしね。その辺のバランス感覚が難しいですね。 </p> </section> <section> <h1>今後どういったホームページの需要があると思いますか？</h1> <p> BtoBはタブレットBtoCはスマートフォンへの対応は必須になるでしょう。デザイナーは少なからずモバイルファーストを意識しないといけないと思います。いま仕事以外でパソコンを使うひとってどれぐらいいるのでしょうかね？ </p> </section> <section> <h1>ちなみに血液型は？</h1> <p> B型です・・・・・ </p> </section> </article> <footer> <p>Copyright © CREATE RECORD. All Rights Reserved.</p> </footer> </body> </html> |
各ページのサンプルソースをざくっと紹介しました。ページ間でリンクも貼られ何となくホームページとしての様相を呈してきたかと思います。
