表示に関するHow-to

配信されるHTMLのソースはこのような構造になっています。

<div class="kdQuote">(格言)
(空行)
(引用元)
  <div class="kdQuoteBy" style="text-align:right;font-size:smaller;">
    by 
    <a href="http://www.ki-dousen.net" target="_blank">
      起-動線
    </a>
  </div>
</div>

スタイルシートによって見栄えを調整する最も簡単な方法は、下記のようなブロックをホームページの<head>タグと</head>タグとの間に記述することです。

<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
/* 「本日の格言」ブロック */
.kdQuote{
  width : 190px; /* ブロックの幅(100%のようにパーセント表示も可能) */
  border : 1px solid #0000ff; /* 枠線の幅、種類、色 */
  padding : 4px; /* 枠と文字とのスキマ */
  margin : 0px; /* 枠と枠の外の要素とのスキマ */
/*  font-size : medium; /* 文字の大きさ */
/*  color : #00000f; /* 文字の色 */
/*  background-color : #fffff0; /* 背景の色 */
}
/* 「本日の格言」ブロック中の作者ブロック */
.kdQuoteBy{
}
-->
</style>

スタイルシートで設定できる情報や、スタイルシートを別ファイルに保存する方法については、例えば下記のサイトが参考になります。
とほほのスタイルシート入門
スタイルシートの基本 -- ごく簡単なHTMLの説明

新規ユーザー登録(無料)

  • メールニュース[週刊起-動線]の購読
  • コメントなどの投稿
  • ココロミの利用
  • 一部コンテンツの購読

ログイン

タグ(キーワード)