Google Chromeにはエミュレーターという疑似的なスマホ表示が確認できるツールがあります。
今回は、このツールを使いながら、Sublime Text の Emmetを活用してスマホサイトを作ってみましょう。
作成するイメージはこちらです。使う画像のサンプルは images ←こちら になります。
今回作成するHP用フォルダを作成し、imagesフォルダを入れておきます。(見本ではport_sampleというフォルダに入れました。)
Google Chomeのエミュレーターの表示方法ですが、対象のページを表示してから、右上のGoogle Chromeの[メニュー]の[ツール]-[デベロッパー ツール]を選択します。
メニューを実行すると、画面が2分割され、ウィンドウの上部にデベロッパーツールのウィンドウが表示されます。デベロッパーツールのメニューの左上にある[Show Mobile.]をプルダウンして対象デバイスを選択できます。
この使い方を理解したうえで、Sublime Textを開きます。
Save Asで index.html を作成します。
メニューの View → Side Bar からサイドバーでファイル表示させます。
まず、! 「半角エクスクラメーションマーク」 と入力し tabキーを押します。
自動的にここまで記述されます。詳しくはこちらを参考にしてください。
<html lang="en"> <html lang="ja">
言語表記を”en” から ”ja” に変更します。言語表記の修正方法はEmmet のHow to を検索すると 自動でjaにできるようになるので、余裕があったら調べて設定してみましょう。
bodyタグ内の記述をします。
①headerタグ (header → tab)
id名topを指定
h1タグ:Web Design Sample(h1 → tab)
pタグ:imgタグを内包。logo.svg ロゴ (p>img → tab)
divタグ:にaタグを入れる(aタグのリンク先は#contactUs) ポートフォリオを作成しよう。 (div>a → tab)
Emmetは、要素名とtab キーでどんどん自動的にコードを記入してくれます。さらに内包する要素も > で追記して tab を押下するとコードがきちんと記述されていきます。各文章の内容をコピー&ペーストしてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Web Design Sample</title> </head> <body> <header id="top"> <h1>Web Design</h1> <p><img src="logo.svg" alt=""></p> <div><a href="">ポートフォリオを作成しよう。</a></div> </header> </body> </html>
class名btnを指定。コンテンツ内、id名contactUsへのリンクを貼る。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header id="top"> <h1>Web Design</h1> <p><img src="logo.svg" alt=""></p> <div class="btn"><a href="#contactUs">ポートフォリオを作成しよう。</a></div> </header> </body> </html>
②navタグ
1.HTML5CSS3jQueryの logo2.svg ロゴ
h2タグ内に画像を読み込む (h2>img → tab)
2.グローバルナビゲーション
ulタグに 4つのリストにaタグを入れ、それぞれページ内のコンテンツにリンクを貼る。文言は以下の4つ。それぞれのli>a内に入れる。
(ul>li>a*4→ tab) 同じ要素を複製したい場合は * アスタリスク(×)必要要素数 で記述できます。
ulタグにid名menuを指定
liタグは以下のとおり
HTML(aタグのリンク先は#html)
CSS(aタグのリンク先は#css)
Accsess(aタグのリンク先は#accsess)
お問い合わせ(aタグのリンク先は#contactUs)
<nav> <h2><a href="#"><img src="images/logo2.svg" alt="Web Design</"></a></h2> <ul id="menu"> <li><a href="#html">HTML</a></li> <li><a href="#css">CSS</a></li> <li><a href="#access">Access</a></li> <li><a href="#contactUs">お問い合わせ</a></li> </ul> </nav>
③mainタグ(ここからは、要素名 tab表記で 要素のあとにtabを押下という意味にします。)
1.最初のarticle(本文)タグにはid名htmlを指定。(main>article tab)
h2タグ:楽しくWebデザインを身につける (h2 tab)
pタグ:まずはブラウザ上でHTMLなどに触れて、次にHP見本を見よう見まねで作成。出来上がった見本をアレンジしてポートフォリオサイトとしてサーバーアップ。さまざまなHPを作成してスキルアップをはかります。 (p tab)
1)sectionタグ(section>figure>img tab)
文章を入れる前に section>figure>imgでできたソースを二つコピー&ペーストします。
略 </nav> <main> <article id="html"> <h2>楽しくWebデザインを身につける</h2> <p>まずはブラウザ上でHTMLなどに触れて、次にHP見本を見よう見まねで作成。出来上がった見本をアレンジしてポートフォリオサイトとしてサーバーアップ。さまざまなHPを作成してスキルアップをはかります。</p> <section> <figure><img src="" alt=""></figure> </section> </article> </main>
</nav> <main> <article id="html"> <h2>楽しくWebデザインを身につける</h2> <p>まずはブラウザ上でHTMLなどに触れて、次にHP見本を見よう見まねで作成。出来上がった見本をアレンジしてポートフォリオサイトとしてサーバーアップ。さまざまなHPを作成してスキルアップをはかります。</p> <section> <figure><img src="" alt=""></figure> </section> <section> <figure><img src="" alt=""></figure> </section> <section> <figure><img src="" alt=""></figure> </section> </article> </main>
figureタグ内にimgタグで画像を配置:course1.png
h3タグ:Progate (h3 tab)
pタグ:ブラウザだけでHTML、CSSを使う初級から、jQueryを使ったページ作成の応用まで、ブラウザ上でHPを作りながら自然にWebデザインのしくみを学んでいきます。(p tab)
2)sectionタグ
figureタグ内にimgタグで画像を配置:course2.png
h3タグ:HP作成 (h3 tab)
pタグ:HTML、CSS、JavaScript等のプログラミング言語を用いて、インターネットブラウザ上で動作するホームページを作成します。テキストエディターというソフトを使います。(p tab)
3)sectionタグ
figureタグ内にimgタグで画像を配置:rcourse3.png
h3タグ:Wordpress (h3 tab)
pタグ:MySQLなどを使いながら、Wordpressの構築をします。(p tab)
各alt(代替えテキスト)にはh3と同じ文言を入れましょう。
<article id="html"> <h2>楽しくWebデザインを身につける</h2> <p>まずはブラウザ上でHTMLなどに触れて、次にHP見本を見よう見まねで作成。出来上がった見本をアレンジしてポートフォリオサイトとしてサーバーアップ。さまざまなHPを作成してスキルアップをはかります。</p> <section> <figure><img src="images/course1.png" alt="Progate"></figure> <h3>Progate</h3> <p>ブラウザだけでHTML、CSSを使う初級から、jQueryを使ったページ作成の応用まで、ブラウザ上でHPを作りながら自然にWebデザインのしくみを学んでいきます。</p> </section> <section> <figure><img src="images/course2.png" alt="HP作成"></figure> <h3>HP作成</h3> <p>HTML、CSS、JavaScript等のプログラミング言語を用いて、インターネットブラウザ上で動作するホームページを作成します。テキストエディターというソフトを使います。</p> </section> <section> <figure><img src="images/course3.png" alt="Wordpress"></figure> <h3>Wordpress</h3> <p>MySQLなどを使いながら、Wordpressの構築をします。</p> </section> </article>
2.2つめのarticle(本文)タグにはid名cssを指定。(article tab)
h2タグ:基礎に触れる (h2 tab)
1)sectionタグ(section>figure>img tab)
文章を入れる前に section>figure>imgでできたソースを二つコピー&ペーストします。
<figure><img src="images/course3.png" alt=""></figure> <h3>Wordpress</h3> <p>MySQLなどを使いながら、Wordpressの構築をします。</p> </section> </article> <article id="css"> <h2>基礎に触れる</h2> <section> <figure><img src="" alt=""></figure> </section> <section> <figure><img src="" alt=""></figure> </section> <section> <figure><img src="" alt=""></figure> </section> </article>
figureタグ内にimgタグで画像を配置:room1.jpg
h3タグ:制作
pタグ:明るく楽しくサイトで遊んでいるうちに自然にHTMLの基礎と、jqueryの使い方を身につけて行ける環境です。(p tab)
2)sectionタグ
figureタグ内にimgタグで画像を配置:room2.jpg
h3タグ:自己学習 (h3 tab)
pタグ:経験者がアドバイスします。一人一人の進み具合に合わせて教えていきます。(p tab)
3)sectionタグ
figureタグ内にimgタグで画像を配置:room3.jpg
h3タグ:作ったHPの発表 (h3 tab)
pタグ:作った作品を発表します。講師が一人一人に修正や評価をします。(p tab)
<article id="css"> <h2>基礎に触れる</h2> <section> <figure><img src="images/room1.jpg" alt=""></figure> <h3>グループ制作</h3> <p>明るく楽しくサイトで遊んでいるうちに自然にHTMLの基礎と、jqueryの使い方を身につけて行ける環境です。</p> </section> <section> <figure><img src="images/room2.jpg" alt=""></figure> <h3>自己学習</h3> <p>経験者がアドバイスします。一人一人の進み具合に合わせて教えていきます。</p> </section> <section> <figure><img src="images/room3.jpg" alt=""></figure> <h3>作ったHPの発表</h3> <p>作った作品を発表します。講師が一人一人に修正や評価をします。</p> </section> </article>
今回は画像にalt(代替テキスト)を入れていませんが、音声読み上げなどで必要となるのでできればh3と同じ文章を入れるなどするようにしましょう。
3.sectionタグにはid名contactUsを指定。(section tab)
h2;お問い合わせフォーム (h2 tab)
p:不明なことがありましたら、お気軽にお問い合わせください。(p tab)
formタグの中にtableタグを入れる。
tableタグの中には、tr(table行)タグが3つ、それぞれのtrの中には、thタグとtdタグが1つづつ。(form>table>tr*3>th+td tab)
<form action=""> <table> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> </table> </form>
最初の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=”送信”>
<section id="contactUs"> <h2>お問い合わせフォーム</h2> <p>不明なことがありましたら、お気軽にお問い合わせください。</p> <form action="xxx.php"> <table> <tr> <th>お名前:</th> <td><input type="text" name="name" maxlength="20"></td> </tr> <tr> <th>お問い合わせ内容:</th> <td><textarea name="otoiawase" cols="20"></textarea></td> </tr> <tr> <th></th> <td><input type="submit" value="送信"></td> </tr> </table> </form> </section>
④asideタグ (aside tab)
h2タグ:アクセス (h2 tab)
(h2は沢山あるのでid名accsessを指定)
h3タグ:渋谷と恵比寿に事務所があります。(h3 tab)
pタグ:渋谷駅、恵比寿駅とも徒歩5分圏内の通いやすい場所です。(p tab)
sectionタグ:(section tab)
h3:渋谷と恵比寿に事務所があります。(h3 tab)
p:渋谷駅、恵比寿駅とも徒歩5分圏内の通いやすい場所です。(p tab)
div:class名accessmapを指定。中に、以下のgoogleMap吐き出しコードを入れる。(div tab)
<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タグ(fotter>section*2 tab)
1つ目のsectionタグ:
h4タグ:(h4 tab)
ulタグ:li>aを4つ内包 (ul>li>a*4 tab)
ここでコピーして次のセクションにも貼り付けると作業が楽です。
<h4></h4> <ul> <li> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> </li> </ul>
最初のliタグは以下のとおり
Progate
HP作成
jQuery
Wordpress
2つ目のsectionタグ:
h4タグ:
ulタグ:li>aを4つ内包
基礎・制作
自己学習
発表
お問い合わせ
smallタグ:©2009 – 2015 vpdesign (small tab)
⑥divタグ:^ (div>a tab)
(上に戻るボタンにする。id名gototopと指定)
aタグ:#topへのリンク
※指定外のaタグのリンクは全て#
略 </main> <aside> <h2 id="accsess">アクセス</h2> <section> <h3>渋谷と恵比寿に事務所があります。</h3> <p>渋谷駅、恵比寿駅とも徒歩5分圏内の通いやすい場所です。</p> </section> <div class="accessmap"> <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> </div> </aside> <footer> <section> <h4>Service</h4> <ul> <li><a href="#">Progate</a></li> <li><a href="#">HP作成</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Wordpress</a></li> </ul> </section> <section> <h4>Information</h4> <ul> <li><a href="#">基礎・制作</a></li> <li><a href="#">自己学習</a></li> <li><a href="#">発表</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </section> <small>:©2009 - 2015 vpdesign</small> </footer> <div id="gototop"><a href="#top">^</a></div> </body> </html>
ここまででHTMLが完成です。htmlファイルを保存しておきます。
次はCSSで装飾をしていきましょう。
出来上がったHTMLは文法的におかしなところがないか、作成したindex.htmlファイルの内容を
バリデーターで一度確認してみましょう。
Validate by direct input を選択して、作成したindex.htmlのソースコードをすべて貼り付けてください。
This document was successfully checked as HTML5!
と表示されれば文法的間違いはありません。
間違いが見つかると、どの行のどこということが書かれているので、間違いは修正して次に進みましょう。
CSSコーディングの前に下記フォルダをDLして
port_sampleというフォルダに入れておいてください。
今回使うリセットCSSとSlicknavのCSSが入っています。