CSS– tag –
-
【css】paddingが効かないと思ったらdisplayを疑え! floatにも注意
paddingといえば下記が有名ですが【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから IE11のmain要素以外にもpaddingが効かなくなることはよくあります。 【dispalyをinline-blockやblockに明示的に変えないと、paddingが効かないorバグる... -
【Firefox】縦に長い画像が配置されたページを印刷すると、画像の下が切れる
※この現象は、Firefox 65.0.1で確認しています。 【ものすごく縦に長い画像が配置されたページを印刷すると、画像の下が切れる】 【つまりどのような現象が起きているか】 まずはこちらのデモページをご覧ください。 Firefoxで印刷しようとすると画像の下... -
【css】position:absolute怖くなくなるまで徹底解剖!
★2019.4追記 この記事の内容をベースに同人誌を書きました『cssのposition:absolute;が怖くなくなる魔法の本』 【「positionは失敗するとバグるので使わないようにしています」】 あるとき、cssがそこそこかける人に、そんな悲しいことを言われました。 c... -
【css】いまさらGrid Layoutを使ってレイアウトを組む【IE11対応】
今回のレイアウトはこちら。 flexでつくろうと思えば作れますが、ちょっとdivが多くて嫌なレイアウトだな……と感じたので最近使いやすくなってきたGrid Layoutで実装しました。 【Grid Layoutで実装するために考えること】 Grid layoutで実装するときは、ど... -
【css】マウスオーバーで伸びる下線を、ウィンドウ幅いっぱいに伸ばす
header { overflow-x: hidden;//線が突き抜けないように抑える ul { list-style: none; display: flex; width: 100%; margin: 0; padding: 0; li { margin: 0; padding: 0; width:20%; } } a { display: flex; position: relative; height: 70px; align-it... -
【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから
【main要素にpadding-bottomが効かない?】 mainとfooterの間にすき間を空けたいときに、main要素にpadding-bottom:50px;のようにpaddingをつけて一定間隔を保つことがよくありますが、出来上がったと思ってブラウザチェックをかけたらIEで死んでる☠... -
【アニメのサイトが好き】「ポプテピピック」【2018冬アニメ】
アニメのサイトが好きです。 コーポレートサイトには見られない面白系動作を見られるのがとっても好きです。 ということでソースを読みました。 【ポプテピピック】 http://hoshiiro.jp/ マウスを好きなグラフィックにする まず気になるのが、マウスカーソ... -
【css】cssで使える単位(px,%,rem,vhなど)のまとめ
【cssで使える単位とその意味は?】 結構いろいろなブログでまとまっているので、今更ではありますが。 CSSで使える単位は沢山あります。 今回はCSS Unitsを参考に書いてみます。 【単位】 相対的なもの(フォントに関連した長さ) em:要素のフォントサイ... -
PC専用サイトのレスポンシブ化!?に使えそうなcss/js小技あれこれ
PC専用に作られたサイトを、レスポンシブでスマホ対応してください。デザインそのままで。 ということが、時々あります。 【できればhtmlは大改造したくない】 htmlを大改造せずに、PC専用サイトをスマホ対応させていくうえで使えそうな小技。 スマホサイ... -
cssでグラデーションおしゃれ枠を作る
See the Pen EXZGOd by Asuka Kobayashi (@miral_kashiwagi) on CodePen.