下記の情報を元にスマホサイトを作成しましょう。
スマホサイトはUI(ユーザーインターフェイス)を非常に求められます。
UIの知識については、PCサイトのUIデザインにおける12のトレンド
優れたwebデザインの考え方、つくり方、学び方と参考になるサイト
Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
上記サイトを参考にしてください。
【headタグ内】 titleタグ：Web Design Sample 【bodyタグ内】 ①headerタグ id名topを指定 h1タグ：：Web Design Sample pタグ：imgタグを内包。logo.svgロゴ divタグ：ポートフォリオを作成しよう。 class名btnを指定。コンテンツ内、id名contactUsへのリンクを貼る。 ②navタグ 1.HTML5 CSS3 jQuery のlogo2.svgロゴ h2タグ内に画像を読み込む 2.グローバルナビゲーション ulタグにid名menuを指定 4つのリストにaタグを入れ、それぞれページ内のコンテンツにリンクを貼る。文言は以下の4つ。それぞれのli>a内に入れる。 HTML(aタグのリンク先は#html) CSS(aタグのリンク先は#css) Accsess(aタグのリンク先は#accsess) お問い合わせ(aタグのリンク先は#contactUs) ③mainタグ 1.最初のarticle（本文）タグにはid名htmlを指定。 h2タグ：楽しくWebデザインを身につける pタグ：まずはブラウザ上でHTMLなどに触れて、次にHP見本を見よう見まねで作成。出来上がった見本をアレンジしてポートフォリオサイトとしてサーバーアップ。さまざまなHPを作成してスキルアップをはかります。 1)sectionタグ figureタグ内にimgタグで画像を配置：course1.png h3タグ：Progate pタグ：ブラウザだけでHTML、CSSを使う初級から、jQueryを使ったページ作成の応用まで、ブラウザ上でHPを作りながら自然にWebデザインのしくみを学んでいきます。 2)sectionタグ figureタグ内にimgタグで画像を配置：course2.png h3タグ：HP作成 pタグ：HTML、CSS、JavaScript等のプログラミング言語を用いて、インターネットブラウザ上で動作するホームページを作成します。テキストエディターというソフトを使います。 3)sectionタグ figureタグ内にimgタグで画像を配置：rcourse3.png h3タグ：Wordpress pタグ：MySQLなどを使いながら、Wordpressの構築をします。 2.2つめのarticle（本文）タグにはid名cssを指定。 h2タグ：基礎に触れる 1)sectionタグ figureタグ内にimgタグで画像を配置：room1.jpg h3タグ：制作 pタグ：明るく楽しくサイトで遊んでいるうちに自然にHTMLの基礎と、jqueryの使い方を身につけて行ける環境です。 2)sectionタグ figureタグ内にimgタグで画像を配置：room2.jpg h3タグ：自己学習 pタグ：経験者がアドバイスします。一人一人の進み具合に合わせて教えていきます。 3)sectionタグ figureタグ内にimgタグで画像を配置：room3.jpg h3タグ：作ったHPの発表 pタグ：作った作品を発表します。講師が一人一人に修正や評価をします。 3.sectionタグにはid名contactUsを指定。 h2；お問い合わせフォーム p：不明なことがありましたら、お気軽にお問い合わせください。 formタグの中にtableタグを入れる。 tableタグの中には、tr（table行）タグが3つ、それぞれのtrの中には、thタグとtdタグが1つづつ。 最初のtrタグの中 th：お名前： td：<input type="text" name="name" maxlength="20"> 2つ目のtrタグの中：お問い合わせ内容： th：<textarea name="otoiawase" cols="20"></textarea> 3つ目のtrタグの中： th：空 td：<input type="submit" value="送信"> ④asideタグ h2タグ：アクセス （h2は沢山あるのでid名accsessを指定） h3：渋谷と恵比寿に事務所があります。 渋谷駅、恵比寿駅とも徒歩5分圏内の通いやすい場所です。 sectionタグ： h3：渋谷と恵比寿に事務所があります。 p：渋谷駅、恵比寿駅とも徒歩5分圏内の通いやすい場所です。 div：class名accessmapを指定。中に、以下のgoogleMap吐き出しコードを入れる。 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.750552398976!2d139.701334!3d35.65851700000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b5789e3c191%3A0x98dadeb0d2e1d297!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1432964258135" width="600" height="450" frameborder="0" style="border:0"></iframe> ⑤footerタグ 1つ目のsectionタグ： h4タグ： ulタグ：li>aを4つ内包 Progate HP作成 jQuery Wordpress 2つ目のsectionタグ： h4タグ： ulタグ：li>aを4つ内包 基礎・制作 自己学習 発表 お問い合わせ smallタグ：©2009 - 2015 vpdesign ⑥divタグ：^ (上に戻るボタンにする。id名gototopと指定) aタグ：#topへのリンク ※指定外のaタグのリンクは全て#
上記の情報をSublime Text等にコピーします。
メモ帳にコピーしてもかまいません。
この情報からコピー＆ペーストできるものをコピペするので、SublimeTextに貼り付けた場合、タブを別の場所に表示できるようにしておいてください。
次は、画像のDL(一部リセットCSSも)とHTMLマークアップです。