CSS

CSSで画像にバツボタン(削除ボタン)を重ねる

とある事情で使われなくなったため忘備録です。 button要素をdivで囲って、divを画像に重ねることで対応しました。 <img src="hoge" /> <div class="deleteButtonContainer"> <button type="submit" class="deleteButton">×</button> </div> /*ボタンを重ねるためのブロック要素*/ .deleteButtonContainer { width: 15px; height: 15px; position: absolute; top: 0; } /*各サ…

CSSで使用するクラス名の頭文字を数字にするとクラス名として認識されなかった

CSS

これだと認識されなくて、 <html> <div class="5game"> </div> </html> <style> .5game{ background:yellow; } </style> これだと認識された。クラス名の最初の文字は数字にできないんですね。 <html> <div class="fivegame"> </div> </html> <style> .fivegame{ background:yellow; } </style>

よくググるCSSプロパティ

CSS

私が何度も何度もググっていて一向に覚えないCSSのプロパティの忘備録です。 リストの黒丸を消す list-style: none; 要素を左から横並びにする float: left; 内側に余白 padding: Xpx; 外側に余白 margin: Xpx; 下線を引く border: 太さ 種類 色; 薄い灰色の…

displayCSSプロパティってなぁに

CSS

概要 displayプロパティがわからないので調べた。 displayプロパティ 要素のレンダリングに使用されるボックスの種類を指定する。 値noneを使用すると、要素を非表示にできる。その場合、noneを指定した要素の子要素も非表示にできる。 初期値はinline クリ…

MDNのドキュメントでCSSを学ぶ(その2)

CSS

概要 MDNのCSSドキュメントはアルファベット順に並んでいる索引があるので、そのうちの一部を書いてみる、のその2。 書いてみる align-content flexコンテナ内のコンテナの配置方法を指定する。 サンプル <div id="container"> テスト <div id="inner1"> <b>align-content : flex-start;</b> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div></div></div>…

MDNのドキュメントでCSSを学ぶ(その1)

CSS

概要 MDNのCSSドキュメントはアルファベット順に並んでいる索引があるので、そのうちの一部を書いてみる。 書いてみる :active ユーザによってアクティブ化されている要素を示す。 アクティブ化 公式より 「アクティブ化」とはふつう、マウスを使用する場合…