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