- ベストアンサー
webデザイン初心者の疑問点まとめ
H240S18B73の回答
(1)変わるとこだけでいいです (2)別にいいです、それがあまり面倒にならないscssで書くときさえ抜かして書いてます (3)一行表記ということならウチはお勧めしときます、読みやすいです (4)position:absoluteはテキスト量が不確定のとき 高さがわからなくなるのであんまり使いたくない、 全ての要素の幅と高さが確定してる時だけ使える方法 inlineにする方法は要素同士に隙間ができるのが弱点 コードの可読性を気にしないなら</li>と<li>を スペースも改行も入れずに続けて書くことで隙間なく横並びにできる 見た目を堅守するならposition:absolute リキッド、レスポンシブにするならinlineで (5)コンテンツ全体をdivでかこってmargin:0 auto; (6)IDは本来はページ内のひとつの要素を識別するためのもの だけどどのブラウザでも同じIDを同じページ内で 何度も使えるようになってしまった忘れられた仕様 一応セレクタとしてはIDの方が強い またIDは基本１要素１IDだけど classは複数指定することが想定されてる IDは一つの要素を特定するために用いるのが本来 javascriptのライブラリなんかではそういう目的で使われてるのが多い
関連するQ&A
- a:hover時のみ、divの背景を変えたい
index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。 イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。 同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、 <html> <head> <style type="text/css"> div{ background-color: #CCCCCC; width: 100px; height: 100px; opacity: 0.5; filter: alpha( opacity=50 ); /* IE */ } a:hover{ opacity: 1; filter: alpha( opacity=100 ); /* IE */ } </style> </head> <body> <div><a>リンク</a></div> </body> </html> div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。 また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。 今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。
- ベストアンサー
- CSS
- :hoverで他の要素の値を変更できますか？
CSSで擬似要素「:hover」をつけることで従来Javascriptで行なわれていたオンマウス処理を実現することができますが、オンマウスした要素以外の要素に別のスタイルを適用することって可能でしょうか？ ＜html＞ <div id="one">one</div> <div id="two">two</div> ＜CSS＞ #one:hover { color: red; } 上の例では#oneがオンマウスすると文字色がredに変化しますが、同時に#twoの文字色をblueにしたいのです。無理ならJavascriptで代用しますが、オンマウス処理みたいにCSSでできた方がスマートかなと思うので、可能であればその方法を使いたいです。
- 締切済み
- CSS
- webサイトのコーディングについて。
現在webサイトのコーディングを勉強中です。 どうしてもわからないことがあったので、質問します。 たまに他の方が作ったHPで divにdisplay:blockと記述しているのを見かけます。 例えばcss内に… div { display: block;} と記述しているものです。 div自体がブロックレベル要素なのに、なぜわざわざ記述するのでしょうか。 コーディングはまだまだ初心者ですので、 初歩的なことを聞いているかもしれませんが、ご教示願います。
- ベストアンサー
- CSS
- CSSの記述方法について
CSSを勉強しはじめたばかりの初心者です。 画像にマウスカーソルをあわせると色が変わるCSSに、 このように記述されている箇所がありました。 #example { width: ○○px; height: ○○px; padding-top: ○○px; padding-left: ○○px; background-image: none; } #example a,#example a:hover { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; } #example a { background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } aとa:hoverの指定だけで実現できそうなのに、 なぜこのように4つもidがあるのでしょうか。 何かの意図やテクニックのひとつなのでしょうか？ まだ記述方法を詳しく理解できていないので、不思議に思いました。 ご存知の方がいらっしゃいましたらご教示ください。 よろしくお願いいたします。
- 締切済み
- CSS
- webデザインcss <p>タグ内の長文について
初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか？ (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか？ 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } （リセットcssでmargin.padding.borderはそれぞれ０にしてあります。） <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか？ 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか？？ どうかよろしくお願い致します！
- ベストアンサー
- CSS
- css 記述法
段組を作るとき、divのブロック要素を用いると思いますが。そこで質問です。 例えば以下の例のとき <div class="test"> <!--ブロックの内容--> </div> divブロック要素でクラスセレクタ指定をしたとします。 その際、cssに記述するとき div.test { 内容 } と書くのが、正しいのか？ .test { 内容 } と書いても正しいのか？ どちらが正しいんでしょうか？ 先頭にdivを書かなくても、普通に表示されるんですけど。 ただ、たまに親子要素の関係か、指定した文字より更に小さくなってしまうときもあります。これはきちんと、divを先頭につけていなかったからなんでしょうか？ ご存知方、よろしくお願いします。
- ベストアンサー
- HTML
- divのクラス内のリンクの設定
CSSの設定でわからない点がありましたので質問させてください。 div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？ これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。
- ベストアンサー
- CSS
- 指定したidやclass以外の要素を指定するには
cssで特定のidやclassを持った要素を指定することは常識ですが 指定したidやclass以外の要素を指定する方法はありますか？ 例えば#mainというidを持ったdiv要素を除いた全てのdiv要素を指定するなど。 本来は共通のクラスを割り当てるのが正しいやり方だと思いますが、、、
- ベストアンサー
- CSS
- ウェブデザイン paddingとwidthについて
はじめまして。 http://www.e-washizu.co.jp/ こちらのサイトの横幅は７８６pxですが、 そのうち影画像分の６pxを引くと７８０pxです。 しかしcssを見たところ、 <div id=main>部分のwidth幅は７６０ピクセルになっていて、 padding-left:10px; padding-right:10px; この２つの値をあわせるとちょうど７８０pxになるのですが、 ここで疑問点が浮上しました。 え？paddingの値分widthの値から引くの？？と。。 私の作っていたサイトでは、 width幅を７６０pxではなく「７８０px、padding左右に10px」 と記述していましたがそれでデザインはちょうどピッタシになりました。 http://www.e-washizu.co.jp/のように、いったい何が違うのでしょうか？？ 分かる方、ご回答お願いいたします＞＜
- ベストアンサー
- HTML
- jQueryでポップアップの中にポップアップ
<html> <head></head> <style type="text/css"> .popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.b').live({ /* <= bind? */ mouseenter:function(){ var target = $( $(this).children().filter('.c').attr('href') ); $(this).css('position','relative'); $(this).append('<div class="popup">'+target.html()+'</div>'); }, mouseleave:function(){ $(this).css('position','static'); $(this).children().filter('div').remove(); } }); }); </script> <body> <div id="a1"><p>a1a1a1</p></div> <div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div> <div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div> </body> </html> このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、 その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、 ポップアップの上にマウスカーソルを合わせることができずに困っています。 参考：jQuery の hover() について調べたことのまとめ http://d.hatena.ne.jp/tilfin/20080615/1213608859 参考：.live()でhoverイベントに複数の関数をバインドできない http://jsdo.it/cancer6/mh9t 自分で調べてみて分かったことは ・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave ・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある ・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある 上記のコードを保存して見ていただけると分かると思うのですが、 liveにするとポップアップの上にカーソルを合わせることができず、 bindにするとポップアップの上にカーソルを合わせることができます。 ポップアップはclass="b"の子要素となるようにしているので、 ポップアップにマウスカーソルが合わさっている状態＝class="b"からmouseleaveしてない状態となっていると思うのですが…。 どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、 「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
大変わかりやすいご回答ありがとうございます！ 自分のわかりにくい質問内容をくみとってくださって感激です。 ありがとうございました。