§04-06…2段組み・領域ボックス(div)をfloatさせる
(01) 「センターガイド～過去のお知らせ一覧へ」までを<div class="seccontent">の領域としましょう。また「YTTメニュー～スケジュール」までを <div class="secsubmenu">の領域とします。 <body> <div class="secall"> <div...
§04-05…最小幅・最大幅
(01) 現在領域の幅を「90%」にしてあります。ここで幅の最小値と最大値を指定します。ウィンドウ幅を狭くしても400px以下にはならないようにします。またウィンドウ幅を広げても650px以上にはならないようにしましょう。 div.secall{ border:medium solid #33FF33; width:90%; min-width:40...
§04-04…コンテンツエリアと左右の余白 {margin:auto}
(01) コンテンツ全域の横幅を指定しましょう。横幅の指定方法はウィンドウ幅に対する割合で指定する方法(%)と、固定のピクセル数(px)で指定する方法があります。ここでは「500px」にしてみます。CSSを変更してください。 div.secall{ border:medium solid #33FF33; width:500px; } (0...
§04-03…全域を＜div＞で囲み制御する
(01) ページコンテンツ全域に対してCSSが適用できるよう<div>で囲みましょう。class名は「secall」とします。 <body> <div class="secall"> <div class="sechead"> <h1>YYT Sports</h1> ～略～ ...
§04-02…範囲をグループ化する＜div＞
(01) 先頭行「YYT Sports」～2段落目「海の見えるトレーニングセンター」を1つにまとめ、そこへCSSを適用させます。複数のブロックレベル要素をまとめることができるのが<div>要素です。ここではclass属性「sechead」付きで設定します。先頭の2段落を<div>～</div>で囲んでください。 <...
§04-01…範囲の設定とレイアウト＜div＞・準備
(01) 「範囲とCSS」というフォルダーを作成してください。また以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S...
§03-10…文字のサイズと画面サイズについて考える
(01) ユーザーによりブラウジング環境は異なります。様々なOS・ブラウザー・通信回線・ハードウェアからあなたのWebサイトが閲覧されることが想定されますが、特に気をつけておくべき点として、モニタの環境があります。特に横幅に関する注意が必要です。市販のデスクトップ・ノートPCは、モニタの横幅が768～2560pxと様々な幅の商品が販売されています。またモバイ...
§03-09…CSSの優先順序2【参考学習・id属性について】
(01) class属性と同様に扱える属性として、id属性があります。ただしHTMLファイル内で一度使ったid属性値は同じファイル内では使えません。class属性値のように同じページ内で重複値は取り扱えません。 <h2 id="kamoku">主要3科目</h2> (02) cssにおいてid属性値を指定したセレクタを作成する場合...
§03-08…CSSの優先順序1
(01) CSSの書式情報は、下にあるものが優先されます。 h2{ padding:1em; } h2{ padding:0.5em; ←優先 } (02) また、HTMLファイルは複数のCSSを読み込むことができます。その場合は下にあるものが優先されます。 <link rel="stylesheet" type="text/css" ...