HTML/CSS 【CSS】×( バツ)マークを作る
CSSで×( バツ)マークを作る方法を紹介します。 モーダルやハンバーガーメニューの閉じるボタンなどで使用することが多いと思います。 サンプル <div class="cross-1"></div> .cross-1 { position:...
HTML/CSS 
HTML/CSS 【CSS】三角形を作る方法
CSSで三角形を作る方法を紹介します。 ちょっとしたアイコン等、何かと使用する機会は多いと思います。 サンプル1 上向き HTML <div class="triangle1"></div> CSS .triangle1 { width: ...
HTML/CSS 【CSS】丸を作る方法
CSSで丸を作る方法を紹介します。 中に数字を入れて丸数字にしたり、文字を入れたものをいくつか並べて図のようにしたりと、何かと使用する機会があります。 サンプルコード HTML <div class="circle"></div> CSS ...
HTML/CSS 【CSS】ページのスクロールを禁止にする
CSSでページのスクロールを禁止する方法を紹介します。 モーダル表示時等に背景をスクロールさせたくない場合などに使用します。 サンプル html,body { overflow: hidden; } たったこれだけです。超カンタン…！ 横ス...
HTML/CSS 【CSS】filter:drop-shadowで透過したロゴ画像等にいい感じの影をつける
透過画像に影をつけるというのは、デザインの世界でよくある要件です。しかし、この影が矩形でなく、画像の形状に合わせていると、そのビジュアル効果は格段に上がります。 CSSのfilter:drop-shadowを使えば、透過したロゴ画像などに簡...
HTML/CSS framesetタグ使用ページをChromeやEdgeで印刷すると余白が入る問題について
framesetタグ使用ページを印刷しようとすると、謎の余白が入り画面部分が小さくなってしまう現象について調査しました。 原因 IEやFirefoxではframeを使用したページの印刷に対応しているようで、ブラウザの標準機能として各fram...