- ベストアンサー
CSSで枠線の太さを変える方法とは？
- CSSで枠線の太さを変える方法を紹介します。
- ホバー時の枠線の太さを変える方法をご説明します。
- 枠線の太さを変える際に文字がずれる問題を解決する方法について考えます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
省略されているのだと思いますが、タイプセレクタだけだとそのHTMLすべてについて適用されますから、子孫セレクタ、兄弟セレクタ、クラスなどを使ってどこに適用させるか指定したほうが後々のメンテナンスでも楽です。 たとえば、header無いのナビゲーションリンクのulに対するものでしたら、 <body> <div class="header"> <div class="nav"> <ul> <li><a href=""></a></li> スタイルシートは、 div.header div.nav ul,div.header div.nav ul li{ /* セレクタグループ */ display:block; list-style:none; /* IEバグ対策 */ margin:0;padding:0; /* ブラウザの解釈の違いを吸収 */ } 参照＞5.2.1 グループ化（Grouping） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#grouping ) また、a:linkは、ユーザービリティ上本文内ではカソールは消さないほうが良いですから、詳細度を高くして特定されるようにしておきます。 div.header div.nav ul li a{text-decoration:none;} } ＞しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 ボックスモデルの寸法は、marginやborder、paddingを引いたサイズですから、寸法が決まっていてボーダーだけ太くするとしたにずれます。 参照＞ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) 結果的にHTML(HTML4.01strict)とCSS(2.1)は下記のようになります。下記で検証済みです。 ---HTMLが文書構造にしたがってきちんとマークアップされていれば、HTMLを見なくてもスタイルシートが書けるはずです。後からのメンテナンスも楽。-- ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ※なお、タブは＿に置換してあるのでタブに戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header div.nav ul,div.header div.nav ul li{ /* セレクタグループ */ ＿display:block; ＿list-style:none; /* IEバグ対策 */ ＿margin:0;padding:0; /* ブラウザの解釈の違いを吸収 */ } div.header div.nav ul li{ ＿width:20em;＿height:20px; ＿line-height:20px;/* 高さの中心に文字をおく */ } div.header div.nav ul li+li{margin-top:10px;}/* ユーザービリティ上二番目以降は上を開ける */ div.header div.nav ul li a{ ＿display:block;/* inline要素をblock要素に変える */ ＿width:100%;height:100%; /* liの内寸いっぱいに広げる */ ＿border:solid 1px green; /* プロパティの一括指定 */ ＿border-top-color:red; ＿text-align:center; ＿text-decoration:none; /* ここのaだけ適用 */ } div.header div.nav ul li a:hover{ ＿border-top-width:5px; ＿position:relative; /* 相対配置 */ ＿top:-4px; /* 1-5 = 4 */ ＿background-color:yellow; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="./test.html">テスト</a></li> ＿＿＿＿<li><a href="./test2.html">テスト1</a></li> ＿＿＿＿<li><a href="./test3.html">テスト2</a></li> ＿＿＿</ul> ＿＿</div> </body> </html>
その他の回答 (2)
- DrFell
- ベストアンサー率55% (305/551)
やりたいことはこういうことでしょうか？ ul{ list-style-type:none; } li{padding-top:1px;} a{ text-decoration:none; } li a{ display:block;/*（1）ブロック要素のように表示させます。*/ border:1px solid green;/*（2）ショートハンドにしました。*/ border-top:1px solid red;/*（3）トップだけ色を変えました。*/ margin-top:4px; width:8em; } li a:hover{/*（4）変えたいことだけ書く*/ margin-top:0; border-top-width:5px; } (1) お見せいただいたｃｓｓはa要素がインライン要素となっています（初期値）。インライン要素ではおっしゃっているようには表示されませんのでブロックにしました。初心者は把握していないことが多いのですが、インラインとブロックでは表示に大きな違いが出ます。インラインは行中に入る要素で、高さや幅が持てません。ブロックは改行を前後に含む箱で指定しなければ、横幅を100％で取ります。cssを学ぶなら、最初に抑えておくべき項目です。 また、ご質問の罫線の上や下やコンテンツとの空きも、ブロック言い換えればボックスモデルを理解する必要があります。こちらは図で見たほうがわかりやすいので「ボックスモデル」で画像検索！また、ボックスモデルは「文書宣言」によって解釈を変えます。今回は標準モードでの解釈で記述しています。互換（過去互換）モードの場合は崩れますので、ご注意ください。 （2） 同じプロパティの指定は1つずつ書かなくても、一括で指定することができます。罫線のほか、marginやpaddingにもよく使われます。「ショートハンド」で検索！ （3）ｃｓｓは同じ条件で記述する場合、後述したもので上書きされます。この場合、上の行で全体を緑と指定していますが、ここでは、上だけを赤に指定しなおしています。 (4) 親要素の指定が子要素に「継承」されます。同じことを何度も書く必要はありません。この「継承」もｃｓｓを学ぶ上では大切です。親子関係を把握して、変更したいプロパティだけ記述します。
お礼
解決いたしました。記述してくださった（１）～（４）はとても参考になりました。ありがとうございます。
補足
詳しく教えていただきありがとうございます。 コピペしてみましたが、これですと、hoverで入力してある文字が下にずれませんか。私が間違ったのかもしれませんが・・・。
- naokita
- ベストアンサー率57% (1008/1745)
重要な部分を提示してないのでは？ そのままじゃ隙間は無いから無関係。 例えば、paddingとか、display:blockとか あるのでは？ それなら、5px - 1px ＝ 4px paddingで引けば良い。 li a{ width:8em; padding:5px; display:block; border:1px solid green;} li a:hover{ padding-top:1px; border-top:5px solid red;}
お礼
何が必要な情報かの判断がつけばご迷惑もかけずに回答をいただけるところ、失礼いたしました。 無事、解決いたしました。このたびは、回答くださってありがとうございました。
お礼
ありがとうございした。やりたいと思っていたことができました。 私の説明不足の情報の中からやりたいことをくみ取っていただいたようで、本当にありがとうございました。ボックスモデルを眺めていて、たぶん無理なことをしようとしているのかという気持ちもありましたが、たずねてみて良かったです。