TopCSS > 2004年11月
2004年11月15日

枠線(border)の指定

November 15,2004 1:00 PM
Tag:[]
Permalink

ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文のblockquoteタグで用いている枠線のスタイルシート指定方法を紹介します。
まず指定フォーマットは下記の通りです。

border: width style color
border-top: width style color
border-right: width style color
border-bottom: width style color
border-left: width style color

「border:?」は全ての枠線を一括指定、「border-xxx:?」は上下左右の枠線を個別指定します。一括指定か個別指定のいずれかを使用します。斜体の部分に枠線の詳細を指定します。それぞれの意味は

width:枠線の幅
style:枠線のスタイル
color:枠線の色

となっています。
次にスタイルシートを外部ファイル(styles-site.css)に記述する場合のサンプルをいくつか記します。ここではblockquoteタグを直接指定する方法で記しておきます。

【シンプルな指定(幅:1px/スタイル:1本線/色:青)】

blockquote { border: 1px solid blue; }

hogehoge hogehoge

【このサイトのblockquote指定(幅:2px/スタイル:点線/色:グレー)】

blockquote { border: 2px dotted 999999; }

hogehoge hogehoge

【付箋紙風(幅:左10px、その他1px/スタイル:1本線/色:緑)】

blockquote { border-left: 10px solid green; border-top: 1px solid green; border-bottom: 1px solid green; border-right: 1px solid green; }

hogehoge hogehoge

幅・色はなんとなくお分かりになると思いますので、スタイル指定のみ下記に列挙しておきます。それぞれどのように表示されるかはお試しになってください。

none非表示(デフォルト)
hidden非表示
solid1本線
double2本線
groove窪んだ線
rigde隆起した線
inset全体が窪んだように表示
outset全体が隆起したように表示
dashed破線
dotted点線

なお指定内容によってはブラウザによって表示が異なる場合がありますのでご注意ください。

Comments [6] | Trackbacks [3]
2004年11月11日

リンク画像の枠線を消す

November 11,2004 1:01 AM
Tag:[]
Permalink

バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。

消去前
枠線消去前の画像
消去後
枠線消去後の画像

1.スタイルシート(styles-site.css)に設定

まず、タイプセレクタで img 要素に枠線を与えない設定を行います。

img {
    border-style:none;
}

または、子孫セレクタで a 要素の子孫要素である img 要素に設定を与える方法です。上記の場合は全ての画像にスタイルが適用されますが、この方法であればリンク画像のみにスタイルの設定を与えることができます。

a img {
    border-style:none;
}

さらに、img 要素に class 属性 または id 属性を与えて、クラスセレクタ・一意セレクタで指定すれば画像によってリンクのあり・なしを振り分けることができます。以下はクラスセレクタの例です。

.no_border {
    border-style:none;
}

HTMLの img 要素には下記のように class 属性を与えます。

<img src="~" ait="banner" class="no_border" />

2.HTMLタグ内のstyle属性にスタイルシートを設定(やや非推奨)

img 要素に直接 style 要素を設定します。全ての画像に指定する場合はファイルサイズが増えるため、1項を推奨します。

<img src="~" alt="banner" style="border-style:none;" />

3.HTMLタグのborder属性に指定(非推奨)

この属性はHTML4から非推奨となっています(参考として記しました)。
<img src="~" ait="banner" border="0" />

表示上の効果はどれも同じです。1項と2項が混在する場合、img 要素の style 属性の設定(2項)が styles-site.css 等の外部ファイル(1項)や、ここでは記しておりませんがHTMLに記述された style 要素の設定より優先されます。

Comments [14] | Trackbacks [8]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3