HTML 作成演習

---

HTML Exercises

２ stylesheetでの配置

タイトル部分の作成(stylesheet)

• 左の画像は、繰り返しのない背景画像として配置
     background-image: url("./yokoline.gif");
     background-repeat: no-repeat;
  
  ロゴマーク代わりの画像は右の画像を使っています。線のうち紺色はRGBで330066です。
  作成練習では画像は任意のものを使ってください。
  
  
• タイトル文字が画像と重ならないように、左のpaddingで調整
     padding: 5px 0 5px 60px;
  
  
• 横線は、スペース( )だけを含むdivブロック要素の背景として配置
     background-color: #306;
     margin: 5px 0;
  
  この横線は、タイトル文字要素のborder-bottomとすることも可能(文字列とborderの間隔はpaddingで指定)。 しかし、今使っている画像の高さがタイトル文字の高さより大きいので、画像との間隔が取れません(背景画像はpadding内にも配置される）。 ロゴ画像の高さを調整しておけば、例えば次のようにborder-bottomの色、幅、スタイルを指定することで横線を表示することもできます。
     border-bottom-style: solid;
     border-bottom-color: #039;
     border-bottom-width: 15px;

大項目メニュー・トレイルリストの作成(stylesheet)

• メニューは、項目を表すリンク文字列を並べるだけです。項目間の間隔を調整するために、marginを指定します。例えば、
     margin: 5px;
  
  
• 今表示されている項目(制御構造)を表す文字列は、別にスタイルを指定します。例えば、
     background-color: #ccc;
     font-size: 90%;
     margin: 5px 5px;
     padding: 3px;
  
  
• 大項目メニュー全体の背景色を指定します。
     background-color: #eee;
  
  
• トレイルメニュー全体は右詰めで表示します。
     text-align: right;

小項目メニューの作成(stylesheet)

• 小項目メニューの幅を画面の幅の20％に指定します。
     width: 20%;
  
  
• 上部のトレイルメニューとの間隔をmargin属性で指定します。
     margin-top: 40px;
  
  
• フォントサイズを少し小さめに指定します。
     font-size: 90%;

説明部分の作成(stylesheet)

• 小項目メニューはウィンドウ幅の20％でウィンドウの左側に、説明部分はウィンドウは幅の80％でウィンドウの右側に配置するため、回り込みを指定する属性floatを使います。小項目メニューのスタイルに次の指定を追加します。
     float:left;
  
  また、説明部分のスタイルに次のように指定します。
     float:right;
     width: 80%;
     margin-top: 40px;
  
  
• 説明部分に含まれるreturn文の記述例は、空白を含めて表示したいため、preタグを使って整形することにします。preタグ全体を字下げし、かつ等幅フォントで表示するため、preタグに対して次のようなスタイルを指定します。
     font-family: monospace;
     padding: 0 0 0 3em;

フッタ部分の作成(stylesheet)

• ウィンドウの左端からフッタを置くために、回り込みを解除するには、clear属性を使います。
     clear: both;
  
  
• フッタ上部のborderを指定して、説明部分とフッタの区切りを表すことにします。
     border-top-style: solid;
     border-top-width: 6px;
     border-top-color: #306;
  
  これは、次のように省略形で指定することもできます。 border-top: 6px solid #306;



• borderとテキスト内容との間隔を空けるために、上部のpaddingを指定します。
     padding-top: 5px;
  
  テキスト内容がウィンドウの左端と近すぎると思えば、padding-left: 5px;のように調整します。

３ tableタグのでの配置

タイトル部分の作成１(table)

４ フレームを使ってのリメイク