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