非表示にするCSSにはopacity:0、visibility:hidden、display:noneの3つがある。アコーディオンやドロップダウン、モーダルのようにHTML要素を表示/非表示を切り替えたいことがあるので、それぞれの違いを確かめておく。 [[toc]] まとめ 最初に動かしてわかったことをまとめておく。 非表示から表示へ、表示か ...

ランディングページで全画面(フルスクリーン)に背景色を指定したり、モーダルやドロワーナビの背景全体に半透明な背景色を重ねる(オーバーレイ)方法をまとめる。 [[toc]] 用意 ベースとなるHTML、CSSを用意する。 index.html <meta charset="ut ...

全画面表示の背景画像に、文字をのせる。 インパクトのあるレイアウトだ。 簡単におしゃれなサイトが作れると思い、このレイアウトでサイトをつくってみる。 ところが、いざ自分でつくってみるとあることに気づく。 文字が読みづらいのだ...。 背景画像の上の文字を読みやくするにはちょっとしたテクニックが必要だ。 この記事ではAdobe Illustrator ...

レスポンシブに対応したCSSフレームワークにBulmaがある。 このBulmaのフォントや色(プライマリーからやアクセントカラーなど)、グリッド幅をSCSSでカスタマイズできる環境を構築していく。 まずはSCSSをコンパイルできる環境を構築し、次にBulmaをSCSSでカスタマイズできるようにしていく。 [[toc] ...