マークアップの定石：画像、ウインドウの配置

タイトルバー

HTML
<h2>Entry</h2>
CSS
h2 {
  font-size: 18px;
  padding: 4px 10px;
  margin-bottom: 10px;
  background-color: #cc0000;
  background: -webkit-gradient(linear, left top, right top, from(#ff6600), to(#990000));
  text-shadow: 0 0 6px #ffffff,0 0 6px #ffffff,0 0 6px #ffffff;
}

先頭文字固定の文章

HTML
<dl>
  <dt>何人まで一緒に申し込めますか？</dt>
  <dd>何人でもOKです。</dd>
</dl>
CSS
dt {
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.5em;
   
}
dt::before {
  content: "Q.";
  color: #ff0000;
  margin-right:10px;
}
dd {
  margin-bottom: 1em;
  line-height: 1.5em;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
dd::before {
  content: "A.";
  color: #ff0000;
  margin-right:10px;
  font-weight: bold;
}

ページトップ バー

HTML
<p id="pagetop"><a href="#top">Page Top</a></p>
CSS
#pagetop {
  border-radius: 5px;
  background-color: #cccccc;
  background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
  text-align: center;
  margin-bottom: 20px;
}
#pagetop a {
  text-shadow: 1px 1px 0 #ffffff;
  display: block;
  padding: 10px 0;
  color: #444444;
  text-decoration: none;
}

ウインドウのスクリーンへの固定配置

スクリーンの固定位置にウインドウを重ねます
  しかし、スクリーンのサイズが変わってしまうとウインドウが隠れてしまいます
HTML with style
<div class="shadow"
 style="color : rgb(97, 97, 97);
    background-color : rgb(216, 216, 216);
    vertical-align : middle;
    text-align : center;
    border-width : 2px;
    border-style : solid;
    border-color : black;
    width : 300px;
    height : 150px;
    position : fixed;
    top : 350px;
    left : 4%;
    z-index : 10;">
  <p
 style="font-size : 20px;
    text-align:center;
    line-height:1.4em;">
<strong>!! 急募 !!
大型車(チップ運搬車)運転手</strong>
 
   
お気軽にお問い合わせください</p>
</div>

そこでスクリーンに対し固定比率で配置します

スクリーンのサイズが変わっても
ウインドウは追従して表示されます
style
style="color : rgb(97, 97, 97);
    background-color : rgb(216, 216, 216);
    vertical-align : middle;
    text-align : center;
    border-width : 2px;
    border-style : solid;
    border-color : black;
    width : 300px;
    height : 150px;
    position : fixed;
    top :45%;
    left : 4%;
    z-index : 10;">

画像の中に文字を配置する：position属性

HTML with style
<div style="position: relative;">
   <img src="dog.jpg" width="320" height="140" alt="犬看板">
 
   <div style="position: absolute; top: 15px; left: 150px; width: 150px;">
      看板の内側に表示する文章です。
   </div>
</div>
position属性
内側のdiv要素
position属性にabsoluteを指定しているので、自分から最も近いposition属性を持った
ボックス要素からの絶対位置(上から15ピクセル・左から150ピクセルの位置)に表示されます。
その「最も近いボックス要素」とは、ここでは「position: relative;」を指定している
「外側のdiv要素」です。
 
width: 150px;
ここでは、文字の表示領域の横幅を150ピクセルに限定しています。
これは、看板画像の横幅（枠幅）に合わせるためです。この指定がなければ、
文字は、画像を飛び出て右へ右へとウインドウの端まで続いてしまいます。
 
外側のdiv要素
内側のdiv要素の基準ボックスにするために、position属性を指定しています。値は relative
ですが、移動距離は指定していないので、本来表示されるべき位置のまま表示されます。
基準ボックスにするためにposition要素が必須なので、この記述を省略はできません。
Position要素を省略すると、内側のdiv要素はウインドウ端（＝html要素）を基準にした
位置に表示されます。

その他の例：position属性

HTML with style
<div style="position: relative;">
   <img src="sea.jpg" width="320" height="200" alt="海">
   <div style="position: absolute; top: 30px; left: 150px;">
      <form>
         <select>
         <option>All About Japan</option>
         <option>パソコン・家電チャネル</option>
         <option>ホームページ作成</option>
         </select>
      </form>
   </div>
</div>
HTML with style
<div style="position: relative;">
   <img src="haneda.jpg" width="320" height="200" alt="羽田上空写真">
   <span style="position:absolute; top:183px; left:80px; border:1px blue solid; background-color: #ffffcc;">
      羽田上空 HANEDA
   </span>
</div>
position属性の値と意味
static      標準の表示方法です。（指定しないのと同じ）
relative    本来表示される位置から、相対的に指定値だけ移動した位置に表示
Absolute    position属性で値にstatic以外が指定されているボックスの内、
        最も近い位置にあるボックスの端から、指定値だけ離れた位置に表示
Fixed       ブラウザの端を基準にして、指定ピクセル離れた位置に表示します。
        ブラウザ画面をスクロールしても表示位置は変化しません
1 2 3

このサイトは個人生活を健やかに、愉しく、 企業活動を闊達にして、 持続可能な社会作りを目指します
Copyright © しなやか暮し研究所 2012 All Rights Reserved.