- ベストアンサー
CSS内で使われる山括弧の意味がわかりません。
CSS内で山括弧が使われているのを発見しました。 #outer>#inner { border-bottom: 1px solid #fff; } 私はこのような表現をしたことがなく、「CSS 山括弧」と調べても答えが見つからなかったので質問させていただきました。 これはどのような意味なのでしょうか、とても初歩的な質問になってしまいますが……よろしくお願いします。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
関連するQ&A
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが1pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします(CSSは初心者程度のレベルです)。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し2</h2> <h2 class="sample1">見出し2</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- css3でボタンの中にアイコンを表示するには?
css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか? (画像の赤い矢印で示した部分です) 作っているcssは以下のような感じです。 a{ border-top: 1px solid #57b4ff; border-left: 1px solid #57b4ff; border-right: 1px solid #0d78ff; border-bottom: 1px solid #0d78ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px #a2c1dc; -moz-box-shadow: 1px 1px 2px #a2c1dc; background: -moz-linear-gradient(top, #fff, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS
- CSSを消して表に色を付けたい!!!
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?
- 締切済み
- HTML
- CSSのドロップダウンメニューについて
お世話になります。CSSについての質問です。 添付の写真のようなメインナビゲーションのドロップダウンメニューについてですが、 赤丸の下線の部分の白線の位置(ドロップダウンメニューのスタート位置)を下げるにはどう記述したらいいでしょうか? よろしくお願いします。 .main-navigation ul ul li a { background-color:#333!; border-top: 1px solid #fff; border-color: #fff; line-height: 1.5; padding-bottom: 14px; padding-top: 14px; }
- ベストアンサー
- CSS
- css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか? 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか? 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- cssで枠の中に複数の罫線を引く方法
よろしくお願いします。 枠を作成するためにcssに以下の記述をしました。 【css】 border-top:3px solid #339900; border-left:3px solid #339900; border-right:3px solid #339900; border-bottom:3px solid #339900; padding: 0px; background-color:#ffff00; これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線 その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか? よろしくお願いします。
- ベストアンサー
- HTML
- CSS3の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやらCSS3の記述らしいのです。 border: 1px solid #333; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; という記述は何となく分かるのですが、その頭にある・・・。 -webkit- という記述は何を意味するのでしょうか?? -moz- もそうですね・・・。 先頭の、border: 1px solid #333; に付随する記述だよ!みたいな感じでしょうか? どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。 また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- CSS
- このHTMLとCSSをひとつにするのはどうすれば?
WordpressのAddQuickTagを使うために別れたままでは使うことができません>< https://saruwakakun.com/html-css/reference/box ちなみに19番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします!! HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
- CSSの記述でのクラスの定義で
CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか? 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- MFC-J6710CDWのWIN11用ドライバーをダウンロードしたが、exeファイルが開かない。パソコンのOSはWindows11で、接続はUSBケーブルを使用している。
- MFC-J6710CDWのWIN11用ドライバーをダウンロードしたが、exeファイルが開かない。パソコンのOSはWindows11で、接続はUSBケーブルを使用している。
- MFC-J6710CDWのWIN11用ドライバーをダウンロードしたが、exeファイルが開かない。パソコンのOSはWindows11で、接続はUSBケーブルを使用している。
お礼
とてもわかりやすい解説をどうもありがとうございます! 今までclassを大量に使用してページを作っていましたが、子セレクタというものがあるのですね…、これなら無駄にclassを追加する必要がなさそうです。 今後同じような失敗や勘違いをおこなさいようにセレクタに関して学んでおきます。どうもありがとうございました!