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

開発環境を準備しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このコースで必要となるソフトウェア…ブラウザとテキストエディタについて解説します。ブラウザはGoogle Chrome、テキストエディタはSublime Text2を使用します。
講師:
05:13

字幕

このレッスンでは開発環境の準備についてご紹介します。まずテキストエディタはSublime Text2 を使用していきます。Sublime Text2 はシンプルなテキストエディタです。また、すべての機能がトライアル版でも使用できます。環境設定は Preferences Settings - Userという所から開くことができましてサンプルの環境設定をご用意しております。その環境設定の使い方をまずご紹介します。それではレッスンのフォルダーを開きますとファイルにPreferences.sublime-settingsというものがありますのでこちらをドラッグ&ドロップでSublime Text で開きたいと思います。開きますと、この様なファイルがあります。Sublime Text はテキストで環境を設定することができる珍しい機能を持っています。こちらの設定の使い方はこちらの「Sublime Text2」 というメニューそして「Preferences」というメニューがあります。Windows の方はメニューバーに「Preferrences」という項目がありますのでそちらから見て頂ければ中身は同じようになっていると思います。 そして「Settings - User」という項目をクリックしてみましょう。そうしますと、この様な画面が開くはずです。こちらがデフォルトなのでこちらの内容をそっくりコピーをしてそっくりペーストをして頂ければ初期状態からすぐに私のセッティングを引き継いで始めることができます。基本的には大幅な機能変更などはなくてフォントサイズであったりとか行間を見やすくしている、であったりとかインデントのサイズを少し縮めているもしくは保存時に余計な空白を取り除いてくれる、といった縁の下の力持ち的な機能を既に入れてありますのでよろしければ使ってみて下さい。ですが、この設定を上書きするのは特に必須ではなくレッスン上、問題はありません。それでは一旦保存をしておきます。そして次の環境設定のご説明をしたいと思いますがAutoFileName と Emmet という仕様パッケージを使っております。こちらも必須ではありませんが使用すると便利なパッケージです。そして次はブラウザのお話です。ブラウザは GoogleChrome を使っていきます。GoogleChrome で便利なショートカットを1つ覚えておきましょう。ブラウザで Mac は Command+RWindows は Ctrl+R でブラウザを更新することができますのでうまく使ってみて下さい。 そして、デベロッパーツールも使用していきます。デベロッパーツールについてご紹介します。それではレッスンのファイルからdevelop というフォルダを開きましてindex.html を Chrome で開きます。例えば、スクロールをしましてこの企業情報という見出しの上で右クリックコンテキストメニューを表示します。そして「要素の検証」というワードをクリックしてみましょう。この「要素の検証」をすることでこの下にデベロッパーツールというものが表示されます。何故右クリックから開いたかというと右クリックした場所が自動的にハイライトされるという仕組みがあるためです。そうしますと、例えばこれは a タグで包まれていてCSS がこの様に設定されているですとかa の1階層上の h3 をクリックするとCSS の欄に、175 行目にh3 のスタイルとしてtext-align が center中央揃えにするですとかmargin-bottom が20px ですとかすぐに判別することができます。また、この margin-bottom20 というところで一度クリックをしてキーボードの矢印キーの上を一個ずつ押していくとこの様に margin-bottom のシミュレーションができたりします。 この様にデベロッパーツールは非常に便利ですので是非使い方を覚えておきましょう。このレッスンでは開発の際の便利なアプリケーション開発の準備についてご紹介しました。

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

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

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

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

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

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