HTML/CSS

2008/09/11

ブログのデザインを変更してみた。

もうそろそろこのブログを立ち上げて1年が経つ。いい機会だからブログのテンプレートを変更してみた。

可変幅のテンプレートはやっぱりいい。大画面で表示したときの見やすさが格段にあがる。このテンプレートは結構前から提供されていて、変更しようと思えばいつでもできたのだが、やらなかったのは可変幅のものがこれ以外選択肢がなかったことと、今までのブルーのデザインがとても好きだったから。

ココログにはぜひ可変幅のテンプレートを作ってもらいたい。(このテンプレはdecowebのだから純正テンプレは全て固定幅)

他には、ソースコード類の表示には pre タグで統一することにした。(結局、code-prettifyを動作させられなかった)

< とか > とか " は実体参照しなきゃならないけど、手作業で書き直すのは骨が折れるから変換ツールを使ったほうが無難。

Link:蓄々HTML実体参照変換 - akiyan.com

ただ pre タグで囲むだけじゃ見づらいのでCSSを使って設定してみた。

pre {
   min-height: 80px;
   max-height: 500px;
   overflow: auto;
   border: 1px dashed;
   color: #333;
   font-size: 90%;
   background-color: #def;
}

表示面積が小さい画面だとコードが表示されなくなってしまうのでoverflowプロパティにautoを指定。これはscrollだと必要なくても常にスクロールバーが表示されてしまうため。

min-heightを設定してあるのはスクロールバー表示時に必要以上に狭くなるのを防ぐためで、max-heightは縦/横のスクロールバーの利便性を考えて。

| | コメント (0) | トラックバック (0)

2008/06/02

このブログのフォントファミリーに「メイリオ」を追加してみた

タイトルのとおりでございます。

このところブログの設定をいじってなかったから、久しぶりにいじってみた。

ココログのフォントファミリーは「MS Pゴシック」が先頭に記述されているから、Windowsでこのブログを閲覧するとMS Pゴシックで表示される。

だけど、他所のブログでは「メイリオ」で表示されるところも増えてきているし、Vistaだけではなく、XPでもメイリオをインストールできるようになったから、先頭に「メイリオ」と「Meiryo」を追加して、このブログでも表示できるようにしてみた。

「メイリオ」がインストールされていなければ、以前と同じく「MS Pゴシック」で表示されると思う。

| | コメント (0) | トラックバック (0)

2008/03/10

Study HTML 4

今回はリストについてです。

□並列列挙リスト:ul(Unordered List)要素を用いる。それぞれの項目にはli(List Item)要素を用いる(以後のリストでも同じ)。例えば、

<ul>
<li>項目1</li>
<li>項目2</li>
</ul>

とすると、次のように表示されます。

  • 項目1
  • 項目2

□順序付きリスト:ol(Ordered List)要素を用いる。例えば、

<ol>
<li>項目1</li>
<li>項目2</li>
</ol>

とすると、次のように表示されます。

  1. 項目1
  2. 項目2

□定義型リスト:dl要素を用いる。用語にはdt要素、その説明にはdd要素を用いる。

<dl>
<dt>項目1</dt>
  <dd>項目1です</dd>
<dt>項目2</dt>
  <dd>項目2です</dd>
</dl>

とすると、

項目1
項目1です
項目2
項目2です

このように表示されます。以下にこれらのリストの注意点を書きます。

olul要素内に記述できる要素はli要素に限られ、逆にli要素はolulの子要素としてしか記述できません。(body要素の直接の子要素としてliを記述してはいけない)

li要素の内容には、テキストやインライン要素を記述でき、また段落などのブロックレベル要素も含むこともできます。

dl要素内に記述できるのは、dt要素もしくはdd要素のみ。したがって、dl要素の直接の子要素としてもう一つdl要素を記述してはいけません。

dt要素の内容はインライン要素のみですが、dd要素はインライン要素、ブロックレベル要素のどちらも内容とすることができます。

また、リストは入れ子にすることもできます。

  • 項目1
    • Item1
    • Item2
  • 項目2

これは次のように単純に記述すればいいだけです。

<ul>
<li>項目1</li>
  <ul>
   <li>Item1</li>
   <li>Item2</li>
  </ul>
<li>項目2</li>
</ul>

さらに、HTML4ではdt要素、dd要素は一つずつ交互に使用する必要はないので、複雑な定義型リストをつくることもできます。

<dl>
<dt>項目1</dt>
<dt>Item1</dt>
  <dd>項目1です。</dd>
<dt>項目2</dt>
  <dd>項目2です。</dd>
  <dd>This is Item2.</dd>
</dl>

これは、このように表示されます。

項目1
Item1
項目1です。
項目2
項目2です。
This is Item2.

リストに関しては以上です。

| | コメント (0) | トラックバック (0)

2008/02/22

Study HTML 3

HTML勉強メモその3

ハイパーリンクについて

1.リンク情報を表現する:アンカー要素(a要素タイプ)
他の文書へのリンクを表現するにはa要素開始タグに参照先を示す情報(属性)として、「href="リンク先URL"」を加えます。例えば次のようにします。

<a href="http://www.google.co.jp/">Googleにリンク</a>

2.文書の特定の場所へのリンク:フラグメントの指定
ある文書A「詳細を表示」から文書B「詳細」にページをジャンプさせます。

step.1:Bを示す要素にフラグメントの名前を付ける。
step.2:Aを先のアンカー要素でリンク元に設定する。このときリンク先ファイル名(B)の後ろに#名前としてターゲット要素(フラグメント)の指示を加える。

名前を付けるには2つの方法があります。

  • 対象となる要素にid属性を使って名前を付ける
  • アンカー要素のname属性を使って名前を付ける

id属性はHTML4から導入されたものなので互換性を重視する場合はname属性を使うようです。具体的な名前の付け方は例えば次のようにします。

  • <p id="to_detail">詳細</p>
  • <p><a name="to_detail">詳細</a></p>

XHTMLではid属性を使うことになっているようですが、XHTML1.0では互換性に配慮してa要素に同じ値のidnameを併記することができるようです。(<p><a name="to_detail" id="to_detail>詳細</a></p>)ただし、XHTML1.1以降はa要素のname属性は廃止されるのでid属性のみしか使えません。

次にフラグメントにリンクさせます。あるファイルの特定箇所にリンクさせるには

<a href="nantarafile.html#to_detail">詳細を表示</a>

また、インターネット上のリソースの場合は

<a href="URL/nantarafaile.html#to_detail">詳細を表示</a>

さらに、同じファイルの特定箇所へのリンクは

<a href="#to_detail">詳細を表示</a>

という感じです。このほかにもフラグメントの名前を付けるときなどに注意が必要です。

Link:Study HTML 4

| | コメント (0) | トラックバック (0)

2008/02/20

Study HTML 2

HTML勉強メモその2

1.タイトル: <title>~</title>
HTML文書のタイトルを設定します。文書についての情報なのでhead要素内に記述します。

2.見出し: <h1>~</h1> (body要素内)
本文のまとまりを分かりやすくするための見出し(heading)を設定します。タグにはh1~h6までが用意されていて、数字が小さくなるほど重要度が上がります。(ブラウザによっては文字の大きさが変化したりします。)

3.段落: <p>~</p>
文字どおり段落を示します。

4.改行: <br>
改行を示します。普通のタグには開始タグと終了タグをペアで用いますが、改行タグは開始タグのみを用います。このように、内容を持たず終了タグもない要素は空要素と呼ばれます。XHTMLでは終了タグがないことを明示するために[ /> ]という特別なカタチで閉じます。改行タグの場合は<br />となります。

---[Info]---

・ブロックレベル要素:見出しや段落のように本文を構成する単位(ブロック)になる要素

・インライン要素:改行などのようにブロックの一部分に対して作用する要素

Link:Study HTML 3

| | コメント (0) | トラックバック (0)

Study HTML 1

HTMLの勉強メモです。

[基本事項]

<html>

<head>
…titleなどの文書情報要素を書く
</head>

<body>
…本文を構成する要素を書く
</body>

</html>

HTML文書は<html>~</html>に記述します。HTML文書のヘッダー部分は<head>~</head>に記述し、ボディ部分は<body>~</body>に記述します。

このhead要素とbody要素は1つの文書にそれぞれ1回しか使えません。

---[Info]---
旧来のHTMLではタグは大文字、小文字が混在していてもよいことになっていましたが、XHTMLではタグや要素型名が小文字に統一されています。

Link:Study HTML 2

| | コメント (0) | トラックバック (0)

2008/02/19

ちゃんとHTMLを勉強する

よくよく考えると、HTMLのことよく知らないんですよね。

見よう見まねでいじったりすることはありましたが、理解していないので毎度苦労しています。

春休みなので、一度ちゃんと勉強しようかと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

こういう宣言が何を意味しているのかとか理解したいですし。

| | コメント (0) | トラックバック (0)