先日変わったデザインのテキストボックスを作る機会があったのでメモ。 概要 ・背景が透過したボックスがふたつ重なった形状 ・文章量は可変 デモコード HTML <div class="c-boxs"> <div class="c-boxs__item">テキストテキスト</div> <div class="c-boxs__item">テキストテキスト</div> <div class="c-boxs__item">テキストテキスト</div> </div> CSS body{ background: #92CAB8; } .c-bo…

うまくいった記事はあるけど調査中に失敗したことや、間違った対処法を書いた記事ってあまり見ないなと最近思い、デバッグの最中に陥った問題も書くことにしようと思った。 堂々巡りしている人の助けになれば幸い。 概要 スライダーとモーダルを組み合わせた…

よくあるタイル型レイアウトで、hoverした時に説明文が出てくるCSSとHTML。 コーポレートサイトのトップページなどでよく見る。 ■HTML <div class="container"> <div class="items"> 1 <span class="items__info">説明文</span> </div> <div class="items"> 2 <span class="items__info">説明文</span> </div> <div class="items"> 3 <span class="items__info">説明文</span> </div> </div>

グリッドレイアウトのLP案件を担当したのでこれを機に手を出してみた。 グリッドレイアウトの基本 大まかな流れ 親にdisplay: grid;を設定 親に縦横の比率、grid間のスペースを設定する 子要素で、最小単位より大きくしたいときは追加で設定する 具体的な設…

自分のレベルについて ブログを書き始めて、「自分のレベル」について考えることが増えた。 「誰に（どの技量の人に）向けた記事か」は「誰が（どの技量の人が）書いた記事か」と当然影響が深い。 自分のレベルが分かっていないと、誰に向けて書いている記事…

色違いだったり、画像のレイヤーが重なったデザインを擬似要素で表現する。 紙モノ的なデザイン。 見出し箇所などでよく見る気がする。 これでいうと、赤い背景レイヤーと緑枠のコンテンツ領域とが重なっているところ。 html <div class="wrap"> <h1 class="ttl">タイトルとか</h1> <div class="content"> <div class="sec">内容とか</div> ...以</div></div>…

基本的にコンテンツのセンタリングはmarginで行っていたけど、 「absoluteで展開した幅100%の要素の中に、さらにコンテンツをセンタリングして配置したい」といったとき、わざわざ入れ子にするのは面倒くさい。 そういう時はcalc関数を使って、左右のpadding…