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

最初のCSSを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイト全体で使用するスタイルシートを作成し、HTMLで読み込みます。
講師:
05:10

字幕

このレッスンでは CSS を0から作って適用する方法を学びます。それでは CSS の final というフォルダの中にあるindex.html をブラウザで開いてみましょう。この様にうっすら背景色がはいっているので真っ白の画像がちゃんと見えるようになっています。それではフォルダに戻りましてbegin のフォルダをSublime Text で開きます。そうしましたら index.html をダブルクリックして開きましょう。そして「File」>「New File」新規ファイルを作りたいと思います。New File はショートカットMac は Commnad+NWindows は Ctrl+Nで開きます。こちらもよく使うショートカットなので覚えておきましょう。そうしましたら「New File」を今回はクリックしてそしてでてきた、このまだ名前が決まっていないファイルを上書き保存「File」「Save」をして保存をしたいと思います。そうしましたら「Save As」が名前になるのでこちらを style.css とします。CSS の名前は、この .css の手前についは特に規則はないのですけど一般的に style.css やstylesheet.css などが人気があります。 それではこのファイルcss フォルダの中に保存しましょう。この時、今自分がいるフォルダがCSS の begin であることを必ず確認しましょう。そして css フォルダを開いてこのエリアで「save」を押します。そうしますと、このサイドバーにでているcss フォルダを開くとこの様に style.css ができてることがわかります。では CSS ファイルに記述を進めていきましょう。まず CSS の一番上の行には文字コードを設定しておきたいと思います。@ そして chrset とcharacter set文字コードセットの命令を書いてそして文字コードは UTF-8 であるという風に書いて行末にはセミコロンを打っておきます。それでは CSS簡単な物を1つ書いておきましょう。body そして {} を打ってbackgroundそして #eeeそしてセミコロンです。body は今現在見えている場所全部を示しているセレクタでした。そして背景色を薄いグレーに変えるという命令を書いてみました。そしてこちらは上書き保存Mac は Command+SWindows は Ctrl+S を押しておきます。ただこれだけですとまだ HTML から、このスタイルシートを読み込んでいないのでこの結果が反映されません。 ですので HTML を開きhead の所で CSS を読み込むおまじないを書いてあげないといけませんのでtitle の後ろで改行をしてlink と<link と打ちましょう。そして Enter を押します。そうすると自動的にここまで入力保管が働きます。あとはここの hf が参照先、つまりファイルの道順を書いてあげる場所ですのでcss フォルダの中の style.css と打ってあげます。ファイル名だけでは見つからないということですね。必ず HTML から見た時にどの入れ物に入っていてそしてその入れ物の中のファイル名という風に指定をしましょう。では上書き保存をして右クリックから「Open in Browser」でブラウザで表示をさせてみましょう。そうしましたら無事に背景がグレーになっていてそして、画像がうっすら見えていると思います。この様に CSS をまず新規で作る。作ったら必ず HTML で読み込むという工程を踏まないといけません。このレッスンでは CSS の適用の仕方を学びました。

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宛までご連絡ください。