指定幅・高さの擬似フレームを作る

 表示エリア  No Responses »
10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<div class=”gijif”>
限られたエリアにたくさんの情報を書きたい時に使うと便利。<br/>
更新履歴とかがよいかな？<br/><br/>
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。<br/>
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
</div>

CSSソース

.gijif {
width:500px; height:100px; overflow:scroll;
}

サンプル表示

限られたエリアにたくさんの情報を書きたい時に使うと便利。
更新履歴とかがよいかな？

ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。

解説

HTMLソース

擬似フレームにしたい部分のみに適用させる為、divにclassを指定します。
ここでは、<div class=”gijif”>としています。

CSSソース

擬似的にフレームを作るには、overflow:scroll;というものを使います。
これは、width:500px;とheight:100px;で指定した幅(width)・高さ(height)を超えた時に、スクロールバーを表示するというものです。

ページ上下左右のスペースを消す

 表示エリア  No Responses »
10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<body>
CSSで何も指定しないと、ブラウザのページを表示する部分の上下左右にスペースが出来てしまいます。
</body>

CSSソース

body {
margin:0px; padding:0px;
}

サンプル表示

※ブラウザを含むページ全体をこのサンプル表示エリア内に表示しても仕方がないので、このサンプルソースに対するサンプル表示はありません。

解説

HTMLソース

HTMLでは特に何も記述する必要はありません。

CSSソース

ページ上下左右のスペースを消すには、bodyタグのmarginとpaddingの上下左右全てに0pxを指定します。
そうすることで、bodyタグの外・内の、最初にブラウザが勝手にあると解釈していたスペースが消えます。

見出し下に線を引く

 見出し  No Responses »
10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<h1>見出し</h1>

CSSソース

h1 {
border-bottom:2px solid #ffaa00;
}

サンプル表示

見出し

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。

CSSソース

border-bottom:2px solid #ffaa00;
これは、h1タグ内の文字の下側に、太さ2pxで色コードが#ffaa00の直線を表示するという意味です。
border-bottomというのが、:より右の指定を見出し下側の枠線のみに適用するという意味。
2pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、2pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。

例)
border-bottom:5px solid red;
見出しの下側に太さ5pxの赤い直線を表示

[参考]CSSリファレンス ボーダー・枠線

見出し左に太線を引く

 見出し  No Responses »
10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<h1>見出し</h1>

CSSソース

h1 {
border-left:8px solid #ffaa00;
}

サンプル表示

見出し

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。

CSSソース

border-left:8px solid #ffaa00;
これは、h1タグ内の文字の左側に、太さ8pxで色コードが#ffaa00の直線を表示するという意味です。
border-leftというのが、:より右の指定を見出し左側の枠線のみに適用するという意味。
8pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、8pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。

例)
border-left:10px solid red;
見出しの左側に太さ10pxの赤い直線を表示

[参考]CSSリファレンス ボーダー・枠線

出っ張って見えるテーブルを表示する

 テーブル  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<table class=”dekotbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>

CSSソース

.dekotbl {
border-collapse:collapse;
border:1px solid gray;
border-right:3px ridge gray; border-bottom:3px ridge gray;
}
.dekotbl td {
border:1px solid #000;
}

サンプル表示

セル1 セル2
セル3

解説

出っ張ったテーブルを表示するには、左上から光が当たり右と下に影が出来ていると錯覚させる方法が一般的です。
これにより、平面的なテーブルではなく出っ張って見える立体的なテーブルが擬似的に作れます。
やり方としては、左と上の枠線より1px以上太い枠線を右と下に指定します。さらに、右と下の枠線を山線にすると効果が上がります。
ここでの例では、左と上の枠線は太さ1pxの実線、右と上の枠線は太さ3pxの山線にしてあります。

HTMLソース

出っ張って見える様に表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”dekotbl”>としています。

CSSソース

■.dekotbl {～}
border-collapse:collapse;
これは、全ての枠線をくっつけて表示するという意味です。詳細はテーブルの枠線をくっつけるへ。

border:1px solid gray;
これは、全ての枠線に「太さ1pxで灰色な実線を表示する」という意味です。詳細はテーブルに直線の枠線を表示するへ。

border-right:3px ridge gray; border-bottom:3px ridge gray;
これが今回のキモです。
右と下の枠線を「太さ3pxで灰色な山線にする」という意味になります。
具体的にはborder-right:～;が右の枠線指定。border-bottom:～;が下の枠線指定。
右枠線と下枠線それぞれに3px(太さ3px)、ridge(山線)、gray(灰色)というのを指定しています。
これにより、上で説明した右と下に影が出来たように見えるテーブルが出来上がります。

■.dekotbl td {～}
border:1px solid #000;
これは、全セルの枠線を太さ1pxで灰色な実線にするという意味になります。

 Older Entries