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

トップページを複製して雛形をつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トップページと下層ページには共通するセクションがあります。複製後、共通な部分だけを残して、整理してみましょう。
講師:
07:32

字幕

このレッスンではトップページから仮想ページを作る方法を学びます。まずは final のフォルダを開いてindex.html をブラウザで開きます。ブラウザで開くと、トップページがありますがこの企業情報のリンクをクリックしてみましょう。クリックすると移動した先はヘッダーとフッターが共通で中身は CONTENT という文字しかない状態になっています。つまりトップと共通の部分を使ってトップでしか使わないコンテンツを抜いてあるという様なテンプレートを作っていきたいと思います。それではフォルダに戻りましてbegin のフォルダを開きましょう。begin のフォルダを開きましたら今回作るページはcompany フォルダに作っていきますので「新規フォルダ」を右クリックなどから作って予め company というフォルダを用意しておきましょう。フォルダを用意してそしてその中に、またindex.html という各ディレクトリのトップである index.html をまた作っていきたいと思います。それでは、この begin のフォルダをまるごと Sublime Text にドラッグ&ドロップしておきましょう。そして、index.html をダブルクリックで開きます。 それでは、この HTML を別名で保存をしていきましょう。「File」から「Save As」という所を選ぶとこれが別名で保存という意味です。そしてこちらをクリックするとtemplate_begin フォルダが開かれていると思うのでこの中の company のフォルダを開いてcompany フォルダの中に名前はそのままでセーブをします。これで見た目は変わっていませんがcompany の index.html を今見ていることになります。このままでは全く同じですのでレイアウト上トップページでしか使わないコンテンツを削除してみましょう。それでは header と nav は共通で大丈夫です。ただ message という部分とcontent そして news はトップページでしか表示させないものなのでmessage という箱をざっくりと削除そして id content という所も削除をしてしまいましょう。そして news も要らなくなりましたのでsection id="news" もこの様に纏めて削除をしてしまいます。そして一度保存をして右クリックから「Open in Browser」をしてみましょう。 そうすると、このようにスタイルシートや画像が反映されていない状態になっているかと思います。これを直してみましょう。Sublime Text に戻ります。何故レイアウトが崩れてしまったかというとスタイルシートを呼びだすタグつまりこちらですね。6、7行目の スタイルシート の llinkこちらが途切れてしまったということになっています。何故途切れたかというと相対パスと言われるこの様なリンクの指定の仕方が今までは index.html だったものがcompany フォルダという引出しにしまわれてしまったために一階層他よりも下に降りてしまったとなので、こういった外部読み込みのファイルのリンクは一階層下った分一階層上がるというリンクの指定にしなければなりません。それが .. / です。.. / を付けてあげて保存をしましてブラウザに切り替えて更新をしてみるとスタイルシートは無事に戻ってきています。が、ロゴの画像がでていませんのでこちらを修正しましょう。Sublime Text に戻ります。画像についてはここにリンクが貼ってありますが画像もこのままですとcompany フォルダの中のimages フォルダといったような見方になってしまいますので一階層上に上がってからimages フォルダを参照して下さいという風に書き換えてあげて、保存そしてブラウザで更新をします。 そうしますと、この様にロゴの画像も戻ってきたかと思います。それではもう一度 Sublime Text に戻りまして今度は content 用の箱を用意しておきましょう。footer と header の間に新しく HTML タグid="content" を作りましょう。先程ざっくり消してしまいましたけど仮想ぺージには仮想ページ用のcontent の id を作ってあげたいと思います。div id="content" を作ってそして閉じておきます。/divそしてコメントを付けておきましょう。そして、この中にも inner の箱で真ん中に寄せてあげたいと思うのでdiv class="inner"というものを用意してdiv を閉じて、そしてコメントを付けておきましょう。そしてここに、とりあえず仮でcontent と文字を打ち込んで保存をしておきましょう。そしてブラウザ上で更新をします。そうしますと、CONTENT の箱今はほとんどデザインはされていませんがここに CONTENT の内容を書いていきたいと思います。それではもう1つリンクの方を直していきましょう。Sublime Text に戻ります。 一階層下に来てしまったということはグローバルナビをはじめとするリンクの方がやはりこのままですと一階層下がった状態なのでまずいです。なので 同様にトップページに戻りたい場合は一階層上のというのを トップページのリンクに付けて直していきましょう。HOME のリンクもこの様に直していきますがcompany については今いる所が index.html ですのでもうフォルダ名が要らないということになります。そして他にリンクが貼られている所を探しましてfooter の部分に HOME があります。なので一階層上のトップページに戻りたいので.. / を付けてcompany の方は、今はcompany の / を取ってしまえば自分のいる所の index という指定になります。そして、保存をしてブラウザで更新をしてHOME というボタンを押してトップに戻って「企業情報」というボタンを押してここに戻ってこれるというような状態を確認しておきましょう。このレッスンでは 仮想ページのテンプレートの作り方について学びました。

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

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

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

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

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

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