HTML/CSS 【CSS】くの字型アイコンの作り方
CSSでくの字型アイコンを作る方法を紹介します。矢印の代わりなど、何かと使う機会が多いです。右向きくの字型アイコン<span class="arrow-right"></span>.arrow-right { display: block;...
HTML/CSS HTML/CSS 【CSS】×( バツ)マークを作る
CSSで×( バツ)マークを作る方法を紹介します。モーダルやハンバーガーメニューの閉じるボタンなどで使用することが多いと思います。サンプル<div class="cross-1"></div>.cross-1 { position: rel...
HTML/CSS 【CSS】三角形を作る方法
CSSで三角形を作る方法を紹介します。ちょっとしたアイコン等、何かと使用する機会は多いと思います。サンプル1 上向きHTML<div class="triangle1"></div>CSS.triangle1 { width: 0; hei...
HTML/CSS 【CSS】丸を作る方法
CSSで丸を作る方法を紹介します。中に数字を入れて丸数字にしたり、文字を入れたものをいくつか並べて図のようにしたりと、何かと使用する機会があります。サンプルコードHTML<div class="circle"></div>CSS.circl...
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を使用したページの印刷に対応しているようで、ブラウザの標準機能として各frameを...