エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

CSS

【CSS】クリックイベントが出来なくなるpointer-events: noneの特性と、使うべきときではない話【978日目】

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

【CSS】要素を消すdisplay:noneと非表示のvisibility:hidden【923日目】

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

【CSS】ダークモードに合わせてデザインを変える【916日目】

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

【CSS】長過ぎる文章を、三点リーダ(…)で省略する【887日目】

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

【CSS】親要素がhoverしたら子要素を変えたい【869回目】

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

【CSS】YouTube風に静止画にマウスオーバーでGIFのサムネを出す【868回目】

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

【CSS】marginを『正しい意味で』使う(余白)【722日目】

説明で使ったコードの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…

【CSS】inline要素とblock要素とinline-block要素の使い分けについて考える【698日目】

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

【CSSメモ】よーいどん!でデザインの配色について考えること【659日目】

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

【CSSメモ】6角形を作るには?【658日目】

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

【CSS】要素の色を透明にする(親要素と同じ色にする)【561日目】

一部の色を透明にしたい 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】特定のCSSを効かせないための書き方【486日目】

CSS

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

【CSS】なぜ2つのdivの両方にmarginあると片方しか適応されない?【477日目】

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

【CSS】box-shadowを設定したのに、影の一部が出ない対応【476日目】

CSS

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

【css】margin-rightやmargin-topを使う時っていつ?【474日目】

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

【SASS】入れ子にした中に:hoverを書きたい時【146日目】

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

【css】tableのtdの横幅(width)が揃わない問題【137日目】

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

【CSS】スマホを横向きにした時に、文字が勝手に大きくなる問題【136日目】

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

z-indexで重ねたウィンドウをクリックすると、全部反応してしまう【131日目】

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

スマホを横に変えた時の幅に対応するために。cssでvwとvhを使う。【130日目】

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

sassでextendを使ってcssの継承をする【129日目】

こんな場面に有効 .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…

5番目や◯◯番目のliにCSSをかける方法【116日目】

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

Bootstrap3で中央に配置する方法【64日目】

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で…