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

共通部分を編集する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
共通な部分にも、調整が必要な箇所があります。検索エンジン対策にも触れながら、「head」部分や、見出し、ナビを見なおしてみましょう。
講師:
04:36

字幕

このレッスンではテンプレートのメタ情報やレイアウトなどを調整していきます。では begin のフォルダーをSublime Text で開きましょう。開きましたらcompany フォルダーの中にあるindex.html をダブルクリックで開きます。そしてこのメタ情報が現在はトップページの情報と全く同一になっています。同一だとソーシャルネットワークサービスや検索エンジンに渡す情報としては正しい情報が伝わらなくなってしまうので企業情報のページだよ、ということが分かるようにメタ情報を直していきたいと思います。例えばまず title タグ、非常に重要です。ここを会社概要のページです、と分からせる為に「会社概要」と入力をしておきましょう。半角スペース パイプ 半角スペースとしてそして企業情報の中のコンテンツなので「企業情報」と入力してまたパイプで区切っておきます。そして他にも description などにもこれはサイトによって見せたい情報があればキーワードを入れていっても良いと思いますが今回はシンプルに「企業情報、会社概要のページです。」といったような一文を加えてみます。他にもこちら og のdescription の方にも上からコピーをしてそしてこちらにペーストで追記をしておいたりサイトネームはこのままでいいと思います。 という風にメタ情報の方にも気を配って適宜入れ替えを行っていきましょう。次はタイトルの方を調整したいと思います。このようにdiv id content ではこれから会社概要の情報が入る予定ですがここが「企業情報です。」というエリアトップページで言うとメッセージのエリアのようなものを予め作っておきたいと思います。では div id="title" という箱を作ります。そして早めに div は閉じてそしてこのように id title のコメントアウトを作っておきましょう。そして真ん中に寄せるためのボックスinner という箱を作りたいと思います。div class="inner"そして開始タグを閉じて終了タグをこちらで閉じてそして class inner がここで終わりですというコメントを入れておいてそしてこちらに見出しタグをもう作っておきましょう。h2 というタグを作ってその中に企業情報と入れてそして small タグも作ってそこに英語の情報も入れておきたいと思います。そして content の方に関しても情報を入れておきましょう。div class inner の中に section タグでセクションを作っておきたいと思います。 そして終了タグを作っておきます。そして見出しを h3 で作って会社概要という風にしておきたいと思います。これで企業情報の中の会社概要というような情報セッティングができました。上書き保存をしてブラウザの方で確認をしてみましょう。殆ど見た目は変わっていませんがここに h2 が入ってh3 が入ります。こちらの見出しがこのような装飾が入っているのはトップページのスタイルを少し踏襲した形になっています。こちらはゆくゆく装飾をしていきたいと思います。今回はテンプレートページの調整を行いました。

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

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

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

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

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

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