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

原稿を流し込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
用意されている原稿を流し込んでいきます。また、HTMLでマークアップを行います。
講師:
07:48

字幕

このレッスンではテーブルタグを使って会社概要をマークアップしていきましょう。それでは final のフォルダの中にあるcompany のフォルダを開いてIndex.html を Chrome で確認してみます。そうしますとこの白い箱、メインの箱にこのようにテーブルタグでマークアップされただけの原稿が流し込まれています。CSS で装飾する前に、必ず要素、テーブル要素でマークアップをしておきます。そしてこちらのサブのエリアにはローカルナビの情報が入っています。ではフォルダを開いて、begin のフォルダをフォルダごと Sublime Text にドラッグ&ドロップしましょう。そして company のフォルダの中の Index.html をダブルクリックで開いておきましょう。そして今回は原稿がありますのでまたフォルダに戻ってtext フォルダを開きましょう。text フォルダを開くとtext-company というものがあるのでこちらをドラッグ&ドロップでSublime テキストの画面に落とします。そうするとこのようにタブで開くことができるのでこちらを同時に閲覧できるようにしたいと思います。 View メニューから Layout、そしてColumn: 2 を選びます。クリックすると右側にエリアができるのでこの text-comapany というファイルを右にこのままタブをドラッグ&ドロップしますと、このように同時に閲覧をしながら編集をすることができます。それでは HTML をこのようにスクロールしていって、メインの箱の中の見出し、会社概要の下にtable タグを入れていきたいと思います。それではまず table タグを作りましょう。まず表1つにつき親の table タグは1つ、そして1行毎に tr タグが必要ですのでまず行を表す tr タグを1つ、行の中に th という見出しを扱うセルのタグと普通のデータセルである td を作ることで、これで1行につき2列の table タグのベースができました。後はこの4行分をコピーして複製を先にとっておきましょう。コピーをしたらペーストを繰り返して行を予め作っておきましょう。そうしましたら後は右側から項目名をコピーして見出しは th、そしてそれに対応する内容はtd の中にコピー&ペーストでこのように慎重に落としていきたいと思います。「事業内容」はちょっと多いですがこのようになっています。 そして「代表者」必ず th、そして仮の名前ですが td の中に入れていきます。「所在地」 th に入れて「住所」は td に入れます。「設立年月日」も th に入れて「日付」を td に入れて、そして「従業員数」は見出しなので th、何名という情報も td の方に入れて最後の「資本金」という情報も th に入れて情報は td に入れておきます。ここで上書保存を一旦して、右クリックから Open In Browser で見ていきましょう。そうするとこのように情報が入りましたがこの「事業内容」だけが少し読みづらくなっています。final のファイルを見るとこのように1、2、3と箇条書きになっていますので、こちらをマークアップしたいと思います。それでは Sublime Text に戻ってこの旅行業、そして旅客鉄道から何とかに関する事業、そして航空旅客なんたら事業ということになっているので、こちらをリスト、グループですね、グループにしてあげたいと思います。では ul というタグを作って終点にも閉じの ul、そして一つ一つの項目名をリストアイテムの Li タグで包んでいくということをしましょう。そして Li タグを上手くペーストで増やして、必ず閉じなければなりませんので、閉じの Li も使ってペーストをして上書保存をして右クリックからOpen In Browser で見てみましょう。 そうしますとこのように箇条書きの状態で見えたと思います。見た目だけであれば改行タグを使っても可能なのですが、情報上仲間であるという時は必ずリストタグでくくるようにしましょう。では今度はローカルナビの情報も入れたいと思います。Sublime Text に戻ってこちらの原稿の方、上に実はこのようにローカルナビの情報がありますので、こちらをコピーしてsub の箱を見つけてこちらの見出しの下にペーストをしておきましょう。こちらもやはりナビゲーションは ul で作ります。なのでまず ul の親を1セット用意したら一つ一つを Li でくくりますが、これはゆくゆくはリンクされるものですね。なので a タグ、予め付けておきましょう。a タグ、開始タグを入れたら終了タグもこのように入れておきます。そして後はこの a の中身会社概要は現在のページですので予め index.html と入れておいても大丈夫でしょう。後はこの Li から a タグまでを包んでペーストをして開始タグを作って終了タグも2セット、a の閉じと Li の閉じをコピーしてこのようにコピペで作っておきましょう。ただ代表挨拶などは現在ありません。 なのでこの index.html を選択してMac の方はショートカットキーCommand+D、Windows の方はCtrl+D を押すと、同じようなものを選択できます。マルチカーソルで同時選択がSublime Text でできますのでこれを消してハッシュとして仮のタグ、仮のリンクであることを示すようにしておきましょう。後は上書保存をして右クリックからOpen In Browser で確認です。このようにリンクが貼られている状態になったかと思います。このレッスンでは原稿からマークアップをすすめるということを行いました。

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

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

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

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

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

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