クリックイベントをなくしたい <button onclick="alert('test');">押せる</button> <button onclick="alert('test');" disabled>押せない</button> <button onclick="alert('test');" style="pointer-events: none;">押せない</button> このように、ボタンを押せなくする方法はいくつかあります。 どれも押せなくなるのであればいいじゃないかと思いますが、 挙動はそれぞれ違います。 そこで問題です。 タグを多重にした場合はどうな…

要素を非表示にしたい この画面のこの要素は、ユーザーが特定の動作をするまで表示をさせたくない。 なので、非表示にしたいと考える。 このときに思いつくのはこの2つ。 .none { display: none; } .invisible { visibility: hidden; } この違いはなにか。 …

ダークモードに対応したい 最近はスマホのダークモードを使ってる人が増えてきました。 ダークモードで画面が暗くなっていても、Webページを見たら白背景で結局意味がない…… ってことで、ダークモードの人用のデザインを用意したい prefers-color-scheme: da…

長い文章を省略したい 概要を表示させるときに、文章が長すぎて、一部を省略したい。 そして、スクロールバーで全表示とかは困る。 なので、折返し地点で折り返さずに、省略するCSSを書きたい。 text-overflow: ellipsis テキストが端に来たら三点リーダ(…)…

親要素のhoverで変化したい <a class="parent"> <div class="child1"></div> <div class="child2"></div> </a> こんなふうに、親のaタグがhoverされた時にだけ、子要素が変わるものを書きたい 親要素のhoverと子要素のクラスとセットに書く .parent:hover .child1 { display:none; } これで、親がhoverなったときにだけ、上のCSSは動くよ…

マウスオーバーでGIFを出したい YouTubeにあるように、静止画をマウスオーバーすると、動画の一部が流れるようなものを作りたい。 静止画 マウスオーバーでGIF動画を流す マウスオーバーやめると戻す ってやりたい。 入れ替える画像を用意する 入れ替えるCSS…

説明で使ったコードのCodePen コードが実際に動いています。 https://codepen.io/klack710/pen/MWWWjvj CSSでmarginが思ったように動かない CSSで、箱を作成する。 .margin_box { margin: 10px 0; width: 80px; background-color: skyblue; } <div class="margin_box"> margin </div> margi…

display: xxxいろいろある display:inline; display:block; display:inline-block; って書いたり、divやspanを使い分けることは結構あると思います。 では、それぞれどんな利点・意味があるんだろうって考えたことはありますか？ ってことで、少し試してみま…

メモだよ！ メモなので、まとまってないよ！！！ デザイン！？ 今までサイトの改修とかばっかりやってた私に、突如として現れるデザイン関連の壁！ デザインってなんだ？テンプレ使えばいいじゃん。 テンプレの色変えればいいだけでしょ？ そんな風に考えた…

CSSメモ まだコードを書いてないけど、ヒントになるものがあったので、メモ。 6角形 普段は四角形しか作れないが、六角形のなにかをデザイン的に作りたい。 要素を複数組み合わせる rotateで回転をさせて、それを組み合わせれば六角形だけでなく、複数の線か…

一部の色を透明にしたい CSSで、一部は指定の色、一部は透明(親要素の色)にしたい。 <div class="bg_blue"> <ul> <li class="bg_red">赤</li> <li class="bg_parent">親の色</li> </ul> </div> .bg_blue { background-color: blue; } .bg_red { background-color: red; } .bg_parent { background-color: blue; } 実際の例 https://codepen.io/klack71…

かけたくないCSSがあるー h3にかけたいCSSがあるけど、一部のクラスはかけたくない・・・ クラスを分けて書けばいいけど、どうしても難しい・・・ 効かせている方のCSSを書き換える。 margin: 10px; }``` これで、h3の中でも、.some_classが書かれているクラ…

注意 個人見解書いています！ CSSで幅を調整したい <div class=high">xxx</div> <div class=low">xxx</div> .high { margin: 10px; } .low { margin: 20px; } 結果、20pxになってる？ どうやら、lowのmarginしかきいてない？隙間が30pxになると思っていたら・・・ なんでだろう？ 結論は仕様、でも用途は？…

影をつけるCSSを書きましょう div { box-shadow: 10px 10px; } よし、影が表示されるはずだ！ 右の影が表示されない なぜだ！設定は完璧のはずだ！ div { width: 100% box-shadow: 10px 10px; } ほら！！ 影はあるけど、隠れている 影は作りましたが、横幅が…

marginだけでよくないのか marginの書き方はいろいろありますが、その中でも margin: 10px 5px; margin-top: 10px; margin-right:5px; margin-bottom: 10px; margin-left:5px; この書き方に違いはないと思います。 そう考えると、全部 marginで良くないか？…

CSSだとこう書きたいときに .class { background-color:red; } #id.class { background-color:blue; } .class { background-color:red; } class:hover { background-color:blue; } これを入れ子にして見やすく書きたい &を使う .class { background-color:re…

tableのセルが揃わない td.left { width: 30%; } td.right { width: 70%; } こんな風にしても、列によって幅が揃わない・・・なぜだ。 table自体のwidthを指定していなかったから table { width:100%; } td.left { width: 30%; } td.right { width: 70%; } …

CSSをpx指定してもできない .text { font-size: 14px; } .text2 { font-size: 14px; } スマホを横向きにした瞬間文字が大きくなる・・・なぜ。 かと思えばtext2に至っては小さくなってる・・・どゆことなの。 対策 html { -moz-text-size-adjust:100%; -webk…

注意 willow710kut.hatenablog.com 以下の方法だと、スクロールイベントなど、デフォルトの動作も止まるので、 それを防ぎたい場合は上の記事をどうぞ。 何が起こった <div class="bg"> <div class="front"> </div> </div> bg { width: 100%; z-index: 10; } front { width: 80%; z-index: 11; } こんな時に…

こんな時使える。 スマホで横幅いっぱいの画像を表示させようとして、 縦向きから横向きに切り替えた時に、画像の大きさが変わらない時とか。 同じ条件で、divの横幅が変わらない時とか。 どうするの width: 100%; とか書いていたのを width: 100vw; に変え…

こんな場面に有効 .button1 { width: 20px; height: 15px; background-color: red; } .button2 { width: 20px; height: 15px; background-color: blue; } 解決方法2つ .button { width: 20px; height: 15px; } .button1 { background-color: red; } .button2…

liを横並びにさせる時にこんなことありませんか 3番目と6番目だけに marginをかけたい・・・ 4番目以降に margin-topをかけたい・・・ とか。私はありました。 前まではfor文で個数数えてCSS書いてました。 参考サイト http://csspro.digitalskill.jp/%E3%83…

Bootstrap4の場合はこちらを参考に 書き方が違います。その場合はこちらを参考に(‘ω‘ ) www.nyamucoro.com 結論 classにcol-md-offset-3 col-md-6とか.col-md-offset-4 .col-md-4と書く ドキュメント getbootstrap.com Offsetting columnsのところ。ctr+fで…