HTML/CSS CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタン
CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタンの作り方を紹介します。CSSのみでjsは未使用なので簡単・軽量です。サンプル<a href="/contact/" class="contact-btn slidei...
HTML/CSS
HTML/CSS 
HTML/CSS 【CSS】背景色だけ透過させる方法 中に表示する画像やテキストはそのまま表示させたい
画像やテキストなどは通常表示で背景色だけを透過させる方法を紹介します。原因背景を透過させようとしたら画像やテキストなども全て透過されてしまいました。一体何が原因なのでしょうか。結論から言うとopacityを使用していたのが原因でした。背景だ...
HTML/CSS 【CSS】追従ヘッダーの作り方
CSSのみで簡単に実装可能な追従ヘッダーの作り方を紹介します。ヘッダーにメニューを載せてスクロール時も追従させることにより、サイト内の他のページにもアクセスしてもらいやすくします。サンプルサンプルページHTML<header class="...
HTML/CSS 【CSS】ボタンを作る
CSSで作るボタンを紹介します。リンクを目立たせたい場合などに使用すると便利です。サンプルボタンサンプルHTML<a href="#" class="button-1">ボタンサンプル</a>CSS.button-1 { display: ...
HTML/CSS 【CSS】吹き出しを作る
CSSで吹き出しを作る方法を紹介します。キャラクター等の画像と組み合わせることによって会話風にしたり、目立たせたい箇所に使用するとちょっとしたアクセントになります。サンプル 吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプル...
HTML/CSS 【CSS】文字にマーカー風のラインを引く
CSSで文字にマーカー風のラインを引く方法を紹介します。ブログ等の文章内の強調したい箇所に使用すると、アクセントになると思います。サンプルマーカーのサンプルです。.marker { background:linear-gradient(tr...
HTML/CSS 【CSS】文字を縦書きにする方法
CSSで文字を縦書きにする方法を紹介します。見やすさを考えると、基本的にWebサイトの文章は横書きで作ると思うので、あまり使用頻度は高くないかもしれませんが、見出し等にアクセントを付けたいときなどに使用することがあります。サンプルCSSで文...
HTML/CSS 【CSS】くの字型アイコンの作り方
CSSでくの字型アイコンを作る方法を紹介します。矢印の代わりなど、何かと使う機会が多いです。右向きくの字型アイコン<span class="arrow-right"></span>.arrow-right { display: block;...
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を...