１つ前に戻るタグ・１つ先に進むタグ

前に戻る
<a href="#" onclick="history.back(); return false;">前に戻る</a>


<input type="button" value="戻る" onClick="history.back()">

先に進む
<a href="#" onClick="history.forward(); return false;">先に進む</a>


<input type="button" value="進む" onClick="history.forward()">

ブロック要素の文字がはみ出す現象を回避

CSSのスタイルシートのdiv要素に「word-break: break-word;」を挿入する。

div {
word-break: break-word;
}

見出しタグ &lt;h&gt; の行間設定

見出しタグ<h>は、デフォルトの設定で<h>タグの下に、１行分のスペースが空いてしまいます。

それを操作するにはcssで、

h1 { margin:0px; }

にしてあげると、スペースができません。

見出し

見出し01

h3.title01 {
font-size:120%;
width:98%;/*横幅*/
border-left: 8px solid #666666;/*垂直シンボル*/
border-bottom:solid 1px #999999;/*下線*/
line-height: 26px;/*垂直シンボルの高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding: 0 0 0 7px; /*文字とシンボルの間*/
color:#333333; /*文字の色*/
letter-spacing: 0.05em;
}

見出し02

h3.title02 {
font-size:120%;
width:98%;/*横幅*/
border-left: 8px solid #666666;/*垂直シンボル*/
border-top:solid 1px #999999;/*上線*/
border-right:solid 1px #999999;/*右線*/
border-bottom:solid 1px #999999;/*下線*/
line-height: 26px;/*垂直シンボルの高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding: 0 0 0 7px; /*文字とシンボルの間*/
color:#333333; /*文字の色*/
}

見出し03

h3.title03 {
font-size:120%;
width:98%;/*横幅*/
border-left: 8px solid #666666;/*垂直シンボル*/
line-height: 26px;/*垂直シンボルの高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding: 0 0 0 7px; /*文字とシンボルの間*/
color:#333333; /*文字の色*/
}

見出し03-2

h3.title03-2 {
font-size:120%;
width:98%;/*横幅*/
border-left: 8px solid #666666;/*垂直シンボル*/
line-height: 9px;/*垂直シンボルの高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding: 0 0 0 7px; /*文字とシンボルの間*/
color:#333333; /*文字の色*/
}

見出し04

h3.title04 {
font-size:120%;
width:98%;/*横幅*/
border: double 3px #ffffff;
color:#ffffff;
background-color:#666666;/*背景*/
line-height: 26px;/*枠の高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding-left:10px;/*文字の左スペース*/
}

見出し05

h3.title05 {
font-size:120%;
width:98%;/*横幅*/
border: solid 1px #666666;/*見出しの枠線*/
color:#333333;/*見出しの文字の色*/
line-height: 26px;/*枠の高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding-left:10px;/*文字の左スペース*/
}

見出し06

h3.title06 {
font-size:120%;
width:98%;/*横幅*/
border: double 3px #666666;/*見出しの枠線*/
color:#333333;/*見出しの文字の色*/
line-height: 26px;/*枠の高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding-left:10px;/*文字の左スペース*/
}

見出し07

h3.title07 {
font-size:120%;
width:98%;/*横幅*/
border-top: solid 1px #666666;/*見出しの上に線を引く*/
border-bottom: solid 1px #666666;/*見出しの上に線を引く*/
color:#333333;/*見出しの文字の色*/
line-height: 26px;/*枠の高さ*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding-left:10px;/*文字の左スペース*/
}

見出し08

h3.title08 {
font-size:120%;
width:98%;/*横幅*/
margin: 20px 0 10px;/*上下の行のスペース*/
padding: 6px 10px; /* 見出しのパディング（上下、左右） */
background: #f9f9f9 url(画像の指定) repeat-x top; /* 見出しの背景 */
border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
}

見出し09

h3.title09 {
font-size:120%;
width:98%;/*横幅*/
padding: 0px 3px 3px  20px; /*シンボル位置の調整*/
margin: 20px 0 10px;/*上下の行のスペース*/
background: url(画像の指定) no-repeat; /* シンボル画像 */
color:#333333;
line-height: 100%;
}

ファビコン作成の基本

ファビコンとは、Favorite iconの略で、ウェブブラウザのタブの前に表示されるアイコン、またはお気に入りに登録するとショートカットとして表示されるアイコンです。

つづきはこちら