CSS 文字数に応じた下線(ボーダー)をCSSで引きたい
タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。 今回は、以下の３つのサンプルをご用意しました。 文字数に応じた下線 横幅を指定した下...
CSS
CSS 
CSS CSSでタブの切り替え表示を実装する方法
タブをクリックすることで、表示が切り替わる機能をCSSのみで実装していきます。 サンプルは「画像とテキスト」を切り替えるものをご用意しました。 DEMO まずは、HTMLから記入していきましょう。 (adsbygoogle = window...
CSS 【初心者向け】はじめてのCSS ～第4話～ フォントサイズと単位について
前回の記事「【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて」にて、ウェブセーフカラーについて記述しましたが、今回は「フォントサイズとその単位」について解説していきたいと思います。 (adsbygoogle = win...
CSS inline-blockで横並びにしたときにできる隙間の対処法
ナビゲーションや画像など、横並びに要素を配置したいときにdisplay:inline-blockを利用する方法があります。その際に要素ごとの間に隙間ができてしまう問題があります。今回はその理由と対処方法を解説します。 まずは、サンプルとして...
CSS Google日本語フォントが試験的に公開！使い方を解説！
昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユーザーが自由に使えるようになったのは、大...
CSS 【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて
前回の記事「【初心者向け】はじめてのCSS ～第2話～ 色の指定方法について」にて、色の指定方法について記述しましたが、今回はその続きとして「ウェブセーフカラー」について解説していきたいと思います。 (adsbygoogle = windo...
CSS 【初心者向け】はじめてのCSS ～第2話～ 色の指定方法
フォントカラーや背景色、リンクカラーやボーダー色など、様々な要素やプロパティに対して「色」を指定することができます。CSSによる色の指定方法には、以下の3つの方法があります。 16進数による指定 10進数による指定 色名による指定 まず指定...
CSS 【初心者向け】はじめてのCSS ～第1話～
最近、「WEBをイチから学びたい！」という意欲旺盛な挑戦者とやり取りをすることがあります。その際に利用している自分なりにまとめた資料があるのでご紹介しようと思います。 ちなみにこの記事は「WEBデザインって何？」「昔ちょっとかじったけど正直...
CSS リンククリック時の点線を非表示にする方法
画像のリンクボタンをクリックした時に、四方にちゃっかり出てくる「点線」を非表示にする方法をご紹介します。気にならない人はいいかもしれませんが、個人的にはかなり気になってました・・・。どういうことかというと、▲こんな白い点線のことになります。...
CSS hr要素の罫線をちょっと装飾してみる。
<hr>要素は「罫線（けいせん）」を表示するタグですが、そのまま罫線を引くだけでは面白くないので、CSSでちょっと装飾してみることにします。 ▼まずは、デフォルトで設定されていhr要素のスタイルをリセットしておきましょう。 CSSでhr要素...
CSS 画像の下に隙間が出来るのはなぜ？
画像を配置する際に、なぜだか"画像の下に隙間"が出来てしまうことありませんか？ どういうことかと言うと、デモサンプルを確認してみてください。 DEMO 上の「デフォルトの配置」の画像下に背景色が見えてしまっているのがかわるかと思います。 こ...
CSS 蛍光ペン風やアンダーラインなどのテキスト装飾をCSSで実現する
ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。 ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今回はCSSのみでテキストの装飾をしてみ...
CSS ボタンや画像の内側にシャドウを入れる方法
ボタンやイメージとして配置する画像にシャドウを入れる際は、box-shadowを指定すれば再現できますが、画像の内側にシャドウを入れて凹んだ感じにしたい場合、box-shadowプロパティの「inset」を指定してもシャドウは出来ません・・...