はじめてのHTML&CSS入門

HTMLを記述する準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルファイルを用意して、HTMLをテキストエディタで記述、Chromeで確認をします。
講師:
07:26

字幕

このレッスンでは、HTML を記述する準備そして、制作フローをご紹介します。使用するアプリケーションはSublime Textこちらで、まず HTML を記述します。そして Google Chrome ブラウザの方で同じファイルを開いてそして、更新することによってテキストエディタで記述した内容を反映させて確認をする。といった流れになります。また、便利なショートカットもご紹介します。まず、アプリケーションの切替です。Mac では Command+TabWindows では Alt+Tab で実行することができます。次にブラウザの更新のショートカットです。Mac は Command+RWindows は Ctrl+R でブラウザを更新することができます。それでは Sublime Text に切り替えてみましょう。Sublime Text を起動すると真っ暗な画面で何も開かれてない状態になっていると思います。この状態で上にある File メニューから「Open」を選びます。Open を選びますとどのファイルを開きますか?と聞かれますのでチャプター 02_01 のフォルダの中にある... ready_begin....そして ... final....この2つのファイルを同時に選択して開いてみましょう。 同時に選択する方法はクリックそして Ctrl もしくは Command クリックで複数選択が可能です。この様に2つのファイルを選択した状態で右下の「Open」を開いてみましょう。そうしますと2つのファイルが開かれるはずです。それでは final の方は完成のファイルになりますのでbegin のファイルを選び一緒に記述をしていきましょう。まずは半角英数モードになっていることを確認しまして< そして! (エクスクラメーションマーク)を打ってそして Shit を押しながら DOCTYPEそして半角スペースそして今度は、小文字で htmlそして を閉じます。この1行目で、このファイルは HTML ですよという宣言をしていることになります。そして改行をします。Enter ですね。そして今度は html タグを書いていきましょう。<htmlそして これが html タグの開始のタグです。そして終了タグを書きましょう。改行を打って <そして /htmlこれで HTML の html タグの開始タグと終了タグがつがいで出来たということになっています。ほとんどの html タグは開始タグと終了タグで出来ています。 このままですとまだブラウザでは表示がされませんので1行、改行を真ん中に開けてあげてWebsite と入力をしてみましょう。それでは、このファイルを保存してみます。「File」「 Save」を選べば上書き保存されるのですがこのわきにショートカットが書いてあります。Mac 版でも Windows 版でもS が大切なキーになっているのですが、Command+S かCrtl+S となっておりますのでこの上書き保存のショートカットキーは是非、早めに覚えておくようにしましょう。今回は、この File メニューから保存を行います。そしてブラウザで確認するには右クリック、もしくはコンテキストメニューを開くという方法でこういったメニューが出て来ます。このコンテキストメニューの中から「Open in Browser」というものを選んでみましょう。この操作で Google Chrome で現在のWeb ページのファイル今回は ... begin.html がブラウザで開きました。Website という表示が出ているのが確認できますでしょうか?それでは便利なショートカット1つ目を試してみましょう。Windows の方は Alt を押しながらTab キーを押すことでアプリケーションを切り替えることができます。 それでは Google Chrome からSublime Text へ戻ってみましょう。そうしますと Website と書かれたテキストエディタに戻ることができます。それでは Website を少し書き換えてみましょう。Website を Web というふうにsite の部分を消してみました。それでは、この状態で上書き保存をしてみましょう。上書き保存のショートカットキーはCommand もしくはCtrl +S でした。では一度 Command+S Ctrl+S を押して、そしてブラウザに戻りたいのでアプリケーションの切り替えCommand+Tabこれで Google Chrome に戻ってみましょう。戻っても、まだ保存の方が反映されていませんのでここで2つ目のショートカット。Mac の方はショートカットCommand+R でブラウザを更新Windows の方は Ctrl+R でブラウザを更新することができます。この様に上書き保存アプリケーションの切り替えそしてブラウザの更新。この流れを左手のショートカットキーだけでできるということを学ぶと開発がグッと楽になります。是非、覚えておきましょう。 このレッスンでは、実際に Web 制作を進める準備と流れについてご説明をしました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

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

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

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

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