エンジニアの卵_level1

【毎日更新!】エンジニアの卵のブログです!技術以外も書いたり。

CSS

【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書いてました。 参考サイト csspro.digitalskill.jp :nth-childと…

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

結論 classに.col-md-6 .col-md-offset-3とか.col-md-4 .col-md-offset-4と書く ドキュメント getbootstrap.com Offsetting columnsのところ。ctr+fで文字列検索でどうぞ! 正しくはブランク配置だけど。 Bootstrapは12カラムでブロックを配置しています。 .…