HTML&CSSでWebサイトを作ってみよう!

見出しのマークアップ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
もっとも大切な情報は「h」タグでマークアップされる「見出し」となります。見出しタグでマークアップしていきましょう!
講師:
07:40

字幕

このレッスンでは HTML で最も大切なタグh タグについて学びます。h タグはサイトの見出しとなる情報になります。それではレッスンフォルダのbegin と text という2つのフォルダを使っていきたいと思います。まず begin のフォルダをそのまま Sublime Text のアイコンにドラッグ&ドロップします。そうしますとサイドバーにこの様にファイル構成が出現しました。そして index.html をダブルクリックで開いておきたいと思います。また、 text フォルダの中には原稿が入っていますがその中の text-home の現行をドラッグで Sublime Text のタブの方に落としてみましょう。この位置に落ちしますと今開いた index.html の隣にテキストを開くことができます。こちらから原稿を拾ってきましょう。それでは HTML の方に戻ります。それではサイトの見出しですけれどまずトップページで一番大切な情報は会社名ということになります。なので <h1 ですね。h1 と打ったら、この状態で予測変換がSublime Text では出ますのでこのまま Enter を押して頂ければ大丈夫です。 そして、ここで打ち込んでもいいのですが原稿がある場合はコピー&ペースト でやりましょう。既に開いていると思いますのでこちらからコピー&ペーストをしたいと思います。取り急ぎ2行分コピーしてh1 の隙間に入れました。そしてここは特に改行する必要はないのでこの様に改行は一旦取り払っておきます。そして次は h2 のタグを用意しておきます。h2 は会社のビジョンであったりメッセージであったりというものを入れておくといいかなと思います。今回は「あなたの旅にアイデアを」というものが一応2つ目の見出しにあたるのでこちらをコピーしてそして h2 の間にペーストで入れておきます。次は h3 を入れておきましょう。h3 はこのトップぺージから各コンテンツのページに跳べるようになっていますのでその各コンテンツのタイトルを見出しとして扱っていきたいと思います。原稿を開くと「企業情報」と「サービス」「投資家情報」や「採用情報」この4つの柱がコンテンツになっていますのでまず「企業情報 COMPANY」これをコピーしてHTML の h3 の中に入れましょう。そして、ここも改行してなくても大丈夫ですので「企業情報 COMPANY」とします。 そして、この日本語名と英語名どちらも同じ見出しの扱いにしては同じ意味になってしまうのでCOMPANY をsmall タグで包みたいと思います。sm と打ちますと small というのが選ばれるかと思いますのでこのまま Enter を押して頂いて大丈夫です。そして後は、この small の閉じタグをMac は Command+XWindows は Ctrl+X で切り取ってしまってCOMPANY の後ろに持ってきました。後は、このセットが4つ必要なのでこれをコピーしてしまいましょう。Sublime Text ではカーソルを置いた行をMac では Command+CWindows では Ctrl+C でコピーが可能です。ですのでコピーをしてペーストを押すとすぐに下の行に複製をとることが可能です。今回は3回ペーストをしてこの様に3つ複製を取りました。それでは中身をコピー&ペーストで入れ替えたいと思います。まずサービスがこちらに入りまして英語表記は small タグの中に入ります。あとはこの繰り返しで「株主・投資家情報」がこちらになってINVESTOR RELATIONSという英語の表記がsmall タグの内側になります。 そして「採用情報」がこちらになってRECRUIT という単語がCOMPANY という所に入りましてこれで h3、4つできました。何故 h3、h4 と、ならないかというとこの4つは同格つまり同じくらいの強さの情報です、とこの4つは、それぞれが仮想ページのコンテンツの見出しなので優劣はつけない情報の格差をつけないということですべて同じ強さの h3という見出しタグで包みました。そして今度は h4 を準備しておきましょう。h4 は News & Topics というものがありますのでNews & Topics をコピーしてh4 の中に入れます。ここで1つポイントがありまして& という文字はプログラムでも使われる記号になりますのでこの & を参照文字として表示したいと思います。&amp ampersand の略です。そしてセミコロンを打ちます。そうしますと Sublime Text 上でも色が変わったかと思いますがこれで & を表示するための変換文字ということになっています。プログラムとして & を使うのではなくてあくまでもテキストの情報として文字の情報として & を使いたいという場合はこの様に &amp;と打ちましょう。 そして上書き保存をして右クリック、コンテキストメニューから「Open in Browser」をクリックしましょう。そうしますと、この様にブラウザ上で今打ち込んだ見出し情報が表示されるかと思います。ブラウザが自動的に文字サイズを大きくしてくれたり太字にしてくれたりします。数字が大きくなることに従って文字サイズは小さくなるということになっています。Web サイトを作る際はまず見出しを設計してその見出しがちゃんと上から順番に意味が通っていて繋がりがあるか、見出しのレベルつまり h2 や h3 の数字の部分が適切かどうかを見極めてまずコーディングをしていきましょう。このレッスンでは見出しタグについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

3時間28分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。