subtechild

Playful Technology & Design.

CSS

position:absoluteした要素に可変の高さを与える

書きました。 qiita.com positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。 これは高さを指定しないから起こるのだが、 高さ固定したらそもそもdivの中の画像が伸縮しなくなる…

はてなブログテーマDUDEでCodepen埋め込み時にきちんと表示されるようにCSSをカスタマイズしました。

DUDE使ってます tsukuruiroiro.hatenablog.com 私はこのテーマが大好きで最初からこちらを使わせていただいてます。 かなり完成されているのでほとんどいじっていなかったんですけど、 先日記事を書いている時に思わぬ落とし穴が。 Codepenの埋め込みをする…

レイアウト、表示領域を真ん中に指定する、幅を調整する

コンテンツが常に真ん中に表示されるように 覚えたので覚え書き。 BEMで言う、ところのレイアウトに当たる部分でしょうか。 サンプルコード See the Pen コンテンツを常に真ん中に揃える by kenta kanno (@nknkt) on CodePen. ウインドウの幅を変えてみてく…

スマホサイトの制作時に注意することと対策まとめ

始めに スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。 あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。 (また別の注意点があるということですね) 始めに スマホサイトの制…

Webサイト、作るその前に〜 制作現場キックオフで決めておきたいこと、諸々

はじめに さあ、作るぞ!その前に! 実際に作り出す前に、確認と決め事、準備を行うのは大事。 特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。 特にマークアップその前に、と言った感じの話が多いです。 ざっくりですが、まとめ。 はじ…

CSSの優先度を覆す最後の手段、!importantについて

書いた qiita.com !importantとは !importantをつけるとclass、IDなどのCSSの優先度を無視して最優先で適用することができる。 実例 <div class="example"> <h2>ここに適用したい</h2> </div> .example h2{ color: blue; } h2{ color: red !important; } 値の後ろに!importantをつけて使う。 CSS…