今回は CSSを使用してWebページのレイアウトを作成します このページには 基本的なHTMLが設定されています ナビゲーションリスト 見出し、画像などです HTMLでテキストを追加する方法については 別のビデオで詳しく解説します ポイントを絞り 時間を節約するために 一部のCSSレイアウト要素は作成済みです ここからスタートしましょう Dreamweaverを開き 定義済みのCSSファイルを Webページに追加します Dreamweaverでソースコードを表示しています このチュートリアルでは 標準モードではなく デベロッパーモードを使用します プロジェクトのファイルを管理する サイト定義もDreamweaverで作成済みです 皆さんも準備しておいてください サイト／新規サイト で設定します サイト定義について詳しくは 別のビデオを参照してください では、CSSファイルを追加しましょう CSSファイルは 常に、headタグの内側に入れます 開始headタグの後 終了headタグの前であれば どこでも構いません Tabを押して、位置を揃えます CSSファイルの構文は長いので ショートカットを使って 自動入力しましょう 「link」と入力して Tabキーを押します CSSスタイルシートへのリンクに必要な 構文が自動入力されます ここでは混乱しないように 作成済みのCSSファイルを使用します 「s」を入力しただけで スタイルシートの候補が表示されます 便利ですね 該当ファイルを検索してくれます Enter（Return）を押して、ブラウザーで確認します いいですね 見違えるようですが HTML5要素は先ほどと同じです リストもあります 先ほどは青字の箇条書きでしたね スタイル設定された文字です introセクションの文字は未設定なので 後で設定します 画像は調整とリサイズされています ソーシャルアイコンが並んでいます このように一部設定済みのページで 作成方法を説明します CSSファイルで既存のスタイルを編集してから 独自のスタイルを作成します Dreamweaverに戻って HTMLページを開きます 「ソースコード」がHTMLページです まずはじめに headerの 「h1」をスタイル設定します header要素はHTMLを構成する 事前定義されたHTML5タグです ヘッダー用にデザインされ ボックスがページの先頭に置かれます ロゴやナビケーションによく使用します HTMLでは、ここにヘッダー項目が入っています 背景色や 高さなどのスタイルを指定する場合 CSSファイルと完全に名前を一致させる必要があります 「h1」も同様に設定します h1タグは見出しに使用します ページの中で最も重要な見出しです スタイル設定も同時におこないます 作成済みのCSSファイルに切り替えます 上部のバーにあるCSSファイルの 「style-start」をクリックします 名前の一致を確認しましょう 「header」、「h1」、共に一致しています 波括弧の内部が 作成済みのCSSプロパティです この一部を編集します 今はコードビューで作業していますが 変更後の画面表示を ブラウザーで確認するには リアルタイムプレビューを使用します Dreamweaverの下部 右下にボタンがあります オプションの中から 「Google Chrome」を選択します これがCromeで開いた 現在のページです リアルタイムプレビューは便利なことに Dreamweaverで変更を加えると 自動的に画面に反映されます 私のデスクには2つのモニターがあり このように双方を移動できますが ビデオチュートリアルでは 新たにDreamweaverを開き 後ろで半分見えるようにしましょう 背面のブラウザーで変化を確認できます まず、headerを編集します 画面の半分しか使用されていません これがheaderの設定箇所です widthが50%となっています これを100に変更します 100%です ナビゲーションが右端に寄りました 完璧です 次にtopを調整します 上部に空白がありますが 100ピクセルでは多すぎます 「0」を入力すると 余分な空白がなくなりました paddingの「0」を「1.5」に 単位は「em」にします ピクセルは絶対値での指定ですが 「em」でページの相対位置を指定すると 画面サイズに応じて調整されます positionは「absolute」になっています absoluteは絶対位置のため 下にスクロールすると ページ上部に置かれたまま 見えなくなります これを「fixed」に変更して スクロールすると 画面固定のため、常に表示されます 次に、このフォントをCSSでスタイル設定します これまで、CSSによるレイアウトで幅や 画面固定などを設定してきました 次に、CSSを使って フォントのサイズや色を設定しましょう Dreamweaverで「h1」を確認します colorで色を設定します 「#fff」を選択すると カラーウィンドウが表示されます ここで任意の色を選択できますが ここでは白の「#fff」に戻します 次に、text-transformationでは すべて大文字にするため 「up」と入力すると 後は自動的に入力されます Enterを押します 時間を節約でき、構文ミスも防げます font-sizingは2emですが 「8.5em」に大きくします Letter-spacingは「0.85em」にして 文字間隔も広げましょう このようなスタイル変更ができます 次に、新規作成の方法を説明します 対象はこの部分 intro-textです 今はプレーンテキストです 名前を確認するため HTMLを開きます ソースコードをクリック ここにあります テキストが入っているセクションです class名は「intro」でした 「intro」のスタイルを作成しましょう CSSに切り替えます classを作成するには まずピリオドを入力します クラス作成の規則です こちらは先頭にピリオドがありません クラスとタグは、ピリオドの有無で見分けられます 「intro」を入力します 名前は任意ですが、2語の場合 スペースは使えないので ハイフンかアンダースコアでつなげます ここでは、HTMLと同じ「intro」にします 以後の構文はタグとほとんど同じです 波括弧を入力すると 閉じ括弧が自動的に入力されます Enterを押して classのスタイルを指定します 波括弧内はすべて CSSプロパティです まず位置を設定するため 「padding」を使用します 「padding」の入力を開始すると ヒントが表示されるので、Enterを押します コロンも入力されています サイズは「12em」 上から右まわりに指定します 上が「12em」、右が「6em」 下が「12em」、左が「6em」です CSSプロパティを記述するときは 最後にセミコロンを付けます ブラウザーで確認しましょう 指定したとおりです これでCSSの新規作成もできますね CSSファイルと同じclass名で 余白を加えました 上下の余白は大きく 左右の余白は減らしました そこでもう少し簡略に 上と右だけを指定すると 自動的に、下と左も 対称となる数値が ヒントで示されます 便利ですね CSSでclassを新規作成しました 次に、テキストをスタイル設定します ソースコードに切り替えます HTMLのpタグがここにあります 「intro」というclassです その中のテキストもスタイル設定し フォント、色 サイズなどを変更します pタグのスタイルを設定することもできますが pタグは頻繁に使用されるタグです 複数のページで繰り返し使用されるため 最初のpタグでスタイルを変更すると すべてのページのpタグが変わり 具合がよくありません そこで対象を限定するために 複合セレクターを使用します やってみましょう pタグをスタイル設定しますが introクラスのpタグのみに限定します 最終的にどのように表示するか Photoshopの画像で確認しましょう このように、フォントと色を変更し サイズを変更します 行間隔を大きくして 文字間隔も 大きくしましょう CSSでプロパティを記述します intro内のpタグをスタイル設定します これを複合セレクターと呼びます 波括弧を入力して 「font」の入力を開始すると ヒントに「font-family」が表示されます 私はこのフォントを使用します 最後にセミコロンを付けます ブラウザーで確認しましょう フォントが変更されました 次に、colorを単独で指定すると 文字色の指定と認識されます 「#」を入力し、カラーピッカーを開きます 定義済みカラー値から 「#343144」を選択します セミコロンを忘れずに 次に、text-align ヒントを使って選択 centerを選択して、セミコロン text-transformは先ほども使いました uppercase カーソル操作だけで入力しています 次々にオプションが表示されるので 入力時間を大幅に短縮できます 矢印キーでリストをスクロールし uppercaseを選択、Enterを押します セミコロンは忘れずに付けてください 次は、font-sizeです ここでもemを使います 「2.5em」、セミコロン line-hight 行の高さは「1.8em」にします letter-spacing、文字間隔は「0.325em」 ブラウザーで確認しましょう すばらしい 複合セレクターで対象を限定したので introセクションのpタグだけが このスタイルになります CSSのコツがつかめましたか 設定済みCSSのスタイルを編集し classを新規作成しました 先頭はピリオドでしたね そして、複合セレクター 高機能ですが、設定は簡単 CSSファイルを新規作成しましたが このプロジェクトには他にも設定済みの CSSがあります ゼロからスタートする必要はありません 作成済みのCSSを見てみましょう これがそのファイルです 下の方を見ると サイトのその他の部分の スタイル設定がたくさんあり 様々なタグが指定されています これを応用してサイトを作成し 作業中に不明な CSSプロパティが出てきたときは 例えば「display: block」を右クリックして 「クイックドキュメント」を選択します Dreamweaverの新機能です display要素の説明が表示され 使用可能なプロパティがわかります displayとfloatプロパティは CSSレイアウトの基本概念で これを理解することが非常に重要です 不明なCSSプロパティがある場合は ぜひ右クリックして 「クイックドキュメント」を見てください 新しい「クイック編集」もお勧めです ソースコードに切り替え footerで作業するので まずブラウザーで確認しましょう フッターが左寄せになっています 完成画像を見てみると 一部は左寄せですが 一部は右寄せです 修正しましょう 「クイック編集」でfloatを指定します footer-credit Webサイトのデザイン元を 右にフロートさせます 上部introボックスでおこなった 手順では ピリオド、「intro」を入力しましたが もっと簡単な方法があります "footer-credit"を右クリックして 「クイック編集」を選択します ルールがないので、作成する場合は 「新規ルール」をクリックするように示されます クリックすると このように CSSファイルの該当部分が表示されます ピリオド、footer-credit、波括弧も入力済みなので 大幅に時間を短縮できますね クイック編集機能もぜひお使いください これを右に寄せるには 「float」を使い 「right」を選択します 後は自動入力されるので、セミコロンを追加するだけ 「width」も加えましょう 「40%」に設定します floatを使用して 右にフロートさせるような場合は positionをrelativeに設定し 相対位置にすると、正しく表示されます ブラウザーで確認しましょう 右側に移動しました これを、「右にフロート」と呼びます 便利なので覚えておいてください 「クイック編集」も忘れずに これはソースコードなので HTMLですが、実際にはスタイルシートで作業しています CSSスタイルに切り替えましょう 下の方に、「footer-credit」があります 切り替えずに、クイック編集で スタイル設定ができました ブラウザーを見ましょう floatを設定して クイック編集の使い方を確認 フッターのスタイル設定だけでなく 上部ナビゲーションも設定しましたね 余白の修正などをして 上部の文字も修正しました 「h1」、段落テキスト テキストの書式を設定しました 最後に、もう一度CSSを完全に削除してみましょう このビデオの最初の画面に戻します HTMLファイルです スタイルシートの設定をすべて選択し 削除して、ブラウザーで表示します CSSのすばらしい機能がわかりますね HTMLファイルは何も変更していないので 最初の画面に戻ります ナビゲーション、見出し、画像...
ところが、CSSを使用すると これを劇的に変えることができます CSSの概要を紹介しましたが ほかにもCSSの詳しい解説ビデオが ありますのでご覧ください そして、実際に使ってみることです 覚えたCSSのスキルを発揮して 美しいWebページを制作してください
