HTML/CSS6-2 スマホサイト作成 HTMLマークアップ編

Google Chromeにはエミュレーターという疑似的なスマホ表示が確認できるツールがあります。

今回は、このツールを使いながら、Sublime Text の Emmetを活用してスマホサイトを作ってみましょう。

作成するイメージはこちらです。使う画像のサンプルは images  ←こちら になります。

 

lesson10

今回作成するHP用フォルダを作成し、imagesフォルダを入れておきます。(見本ではport_sampleというフォルダに入れました。)

lesson12

Google Chomeのエミュレーターの表示方法ですが、対象のページを表示してから、右上のGoogle Chromeの[メニュー]の[ツール]-[デベロッパー ツール]を選択します。

lesson7

lesson8images

 

メニューを実行すると、画面が2分割され、ウィンドウの上部にデベロッパーツールのウィンドウが表示されます。デベロッパーツールのメニューの左上にある[Show Mobile.]をプルダウンして対象デバイスを選択できます。

lesson9

 

 

この使い方を理解したうえで、Sublime Textを開きます。

Save Asで index.html を作成します。

 

メニューの View → Side Bar からサイドバーでファイル表示させます。

lesson11

 

まず、! 「半角エクスクラメーションマーク」 と入力し tabキーを押します。

lesson13

自動的にここまで記述されます。詳しくはこちらを参考にしてください。

<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) 同じ要素を複製したい場合は * アスタリスク(×)必要要素数 で記述できます。

lesson14

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タグ:&copy;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>:&copy;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して

css

port_sampleというフォルダに入れておいてください。

今回使うリセットCSSとSlicknavのCSSが入っています。

Scroll Up