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

最初のHTMLを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トップページ用のHTMLと、必要なフォルダを作ってみましょう。
講師:
07:33

字幕

このレッスンでは HTML を0から作ってトップページ用にしていく方法を学びます。それではレッスンフォルダを開きますとこの様に first_begin と first_final があります。final は目標となるファイルですので今回 begin のフォルダからレッスンを進めていきましょう。それでは、このフォルダをSublime Text のアイコンにドラッグ&ドロップをします。そうしますと、この様にサイドバーにフォルダが出るかと思いますがサイドバーが表示されていないという場合は「View」というメニューがメニューバーにありますのでそちらの中の「Side Bar」という所にサイドバーの項目があります。サイドバーが見えている時は Hideサイドバーが隠れている時は Showとなっているはずですので隠れている場合は Show Side Bar をクリックして頂ければサイドバーがでてくるかと思います。サイトを作るときは複数のフォルダHTML を同時に見たいので常にサイドバーは開いておくことをお薦めします。それでは、この begin のフォルダまだ何もファイルが入っていません。ですので、こちらに新規のファイルを作りたいと思います。 まず、この「File」メニューから 「Save」こちらもショートカットを覚えておくと良いでしょう。Mac の場合は Command+SWindows の方は Ctrl+S です。とても頻繁に使うショートカットです。今回は「File」から「Save」を押します。そうしましたら保存する場所を選びたいと思いますが今回は final ではないですね。final ではないのでfirst_begin ですね。begin のフォルダが選ばれてることを確認してファイル名を index.html としましょう。そして「Save」をします。そうしますと HTML ができて無事にフォルダの方にも表示がされたかと思います。それでは HTML を書いていきましょう。まず <! そして DOCTYPE半角スペースの html でそして html半角スペースそして日本語のサイトですということを表すためにlanguage 属性を付けておきます。= そしてダブルクォテーションで属性名は囲むんでした。Japan の ja を入れて閉じておきます。また HTML はすべてを包む親タグですので何回か改行を打って先に終了タグの HTML/html と入れておきます。 そして head のタグが次に来ますね。head も早目に閉じておきましょう。head タグは表には見えないんですが情報を埋め込むことができるエリアになります。そしてここに、とても大事な情報meta charsetc h a r set="UTF-8"そして閉じます。これは文字コードが UTF-8 という文字コードで書くと宣言します。こちらがないと日本語のサイトは文字化けを起こして読めなくなってしまいますので必ず、この UTF-8 は入れるようにしましょう。そして次はページのタイトルです。そしてここで Sublime Text の便利機能をご紹介します。今、この様にプルダウンでメニューがでています。これは HTML を打とうとすると他の機能が働いてtit と打つと title タグですか?とSublime Text が聞いてくれますのでこちらで Enter を押して下さい。Enter を押すと、この様に終了タグを入れてくれます。そしてここにサイト名を入れておきましょう。今回は「トラベリデア株式会社」という会社のコーポレートサイトです。そして、title タグには業務内容であったりとか英語の表記も一緒に入れることが多いですので半角スペースを一度打ってパイプ「|」、縦棒の入れ方はそれぞれ異なると思いますがMac の日本語キーボードの場合は右上の円マークをShift を押しながら出すことが可能です。 そして英語で TRAVEL に IDEAというのをくっ付ける TRAVALIDEA という風に書いておきます。これで head タグは一旦 OK です。そうしましたら次はHTML の見える部分を司るbody タグを記述しておきます。こちらも bo ぐらいまで打つとbody と選択されますのでEnter と押してあげれば終了タグが入ります。そして body タグに予め属性を1つ付けておきましょう。class="home"と入れておきましょう。これは、この見た目の body のclass の方に home とつけたことでこの HTML はトップページで使用するという風に後で CSS で使うために設定をしました。これで HTML は完成です。必ず保存をしておくようにしましょう。Mac は Command+SWindows は Ctrl+S です。そして、フォルダをもう一度見てみましょう。そして begin のフォルダの中を開きましょう。今 HTML を作成したので既にこのファイルが1つあります。サイトを作る際はよく使うフォルダというものがあるのでそのフォルダも合わせて作っておきたいと思います。 フォルダの作り方は基本的にはいろいろと方法がありますけれど基本的には新規フォルダを右クリックから作ってみたりしてフォルダの名前は css とそしてあと2つフォルダを作りたいと思いますがこのフォルダをコピーしても構いませんしコンテキストメニューから、また新規フォルダを作っていくのでも構いません。そして images と js というフォルダを作りました。これは CSS をまず格納するためのフォルダそして画像ファイルjpg や pngなどを格納するためのフォルダjs は JavaScript を格納するためのフォルダです。それでは、これでサイトのファイルが一揃い揃いましたのでこのレッスンでは最初の HTML とフォルダの準備についてご紹介しました。

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

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

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

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

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

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