CSSとは、Cascading Style Sheets（カスケーディング・
WEBサイトにおけるHTMLはWEBページの各要素の意味や構造を定義するのに対して、CSSはHTMLの装飾を指定します。
CSS(シー・エス・エス)
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】長い文字やURLをページ内で強制的に改行する方法（word-break: break-all）
記事コンテンツ内に長いURLなどがあると改行されずに右に突き出る場合があります。見た目の問題だけでなく、本来できない想定の画面右端からの右スクロールができてしまう、といった問題が出てしまいます。
こちらを修正する方法です。
...
CSS(シー・エス・エス) 【CSS】input name属性をCSSで指定する方法
フォームなどでクラス名を持っておらず、nameやvalueでCSSを指定したいと思った時に、inputのname属性をcssセレクタとして指定する方法です
input
ということで「input」と指定をすることで、CSSを適用...
CSS(シー・エス・エス) 【CSS】「height」は「ヘイト」？「ハイト」？
CSSでよく使われる「height」＝「高さ」。こちらの読み方は？？
height
紛らわしいですが、正確には「ハイト」が正しい発音になっているようです。
height【hάɪt】
正：ハイト
誤：ヘイト
...
CSS(シー・エス・エス) 【CSS】セレクタの優先順位の計算方法についてpart1
CSSの優先順位が毎回分からなくなるので、改めて整理してみました。
サンプルページはこちら
CSSセレクタの優先順位（スコア）
CSSは読み込む際の優先順位によって、このように点数が付けられているようです。
指定方...
CSS(シー・エス・エス) 【CSS】WEBサイトのページを開いた時にローディングアニメーションを実装する方法（CSSのみ）
WEBサイトを開いたときにローディングアニメーションを表示させる方法です。前回はjQueryで作成してみましたが、今回はCSSのみで実装してみます。
サンプルページはこちら
とりあえずHTML部分
ということで、前回同様...
CSS(シー・エス・エス) 【Flexbox】要素を上下左右の中央に配置する方法（CSS）
CSSで「画面の上下左右中央に要素を配置したい」と思った時にも、Flexboxが便利です。簡単にできますのでお試しください。
四角形を準備する
まずは、四角形を準備します。ひとまず、以下のような感じにして四角形を準備します。
...
CSS(シー・エス・エス) 【CSS Battle】画像通りにCSSを作る疑似ゲームに挑戦できるブラウザサービス
CSSのスキルアップを目指す時の便利なサービスのひとつが「CSS Battle」です。
CSS Battle
こちらのページから開けます。
まずは、Sign Upで新規登録します。
Twitterや...
CSS(シー・エス・エス) 【CSS】左側や右側に余白やスペースを作りたい時に使うmarginとpaddingの基本について
「WEBページの左側や右側にスペースを作りたい」という時には、「padding」「margin」を設定することで、領域の右側や左側に余白を作ることができます。padding、margin、余白についてを抑えてみます。
padding...
CSS(シー・エス・エス) 【CSS】テキストに下線（アンダーライン）を引く時に使えるプロパティ＋波線や点線・二重線を引く
「CSSで下線引く時に使うCSSは何？」という時に使えるプロパティです。
下線／text-decoration:underline;
まずは、このプロパティ「text-decoration:underline;」で下線（アンダ...
CSS(シー・エス・エス) 【CSS】タッチやクリックの挙動を無効化するCSS｜pointer-events
たとえば、前に実装をした「三角形の形」が要素の上に表示されると、下のアイコンがクリックできないという症状が発生する場合があります。
上の三角形が邪魔してクリックができない。
このときはCSS「pointer-e...
CSS(シー・エス・エス) 【CSS】吹き出しのような三角形の形を作る方法
例えば、ワードプレスなどでアイコンをクリックした際に画面が表示されるような場合に、吹き出しっぽく三角形▲←のような形を作りたいと思った時に使える方法です。
borderプロパティで作る
以前も書いたのですが、b...
CSS(シー・エス・エス) 【CSS】擬似要素／リストや要素の最後だけを色を変えたりする時に使える便利な方法「:last-child」「:last-of-type」
:first-child／:first-of-typeと反対に「擬似要素（ 擬似クラス ）」 :last-child／:last-of-type という方法を使うとリストやボックスが並んでいる最後の部分だけ、何か（例えば色を変えたり）な...
CSS(シー・エス・エス) 【CSS】擬似要素／リストや要素の最初だけを色を変えたりする時に使える便利な方法「:first-child」「:first-of-type」
「擬似要素（ 擬似クラス ）」 :first-child／:first-of-type という方法を使うとリストやボックスが並んでいる最初の部分だけ、何か（例えば色を変えたり）などが可能です。:first-childや:first-of-...
CSS(シー・エス・エス) 【CSS】画像をクリックしたら動き出すイベントを作る方法
画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。
input:ch...
CSS(シー・エス・エス) 【CSS】マウスカーソルの形状を変える方法「cursor」プロパティ
例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと（例えばクリックイベントなどで）ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか？と一瞬違和感を感じてしまう可能性があります。
ボタンをクリック...
CSS(シー・エス・エス) 【CSS】Grid Layout(グリッドレイアウト)で横縦縦縦の1×3のレイアウトを作る方法
以前にもGrid Layout(グリッドレイアウト)の話を書いたのですが、またまた分からなくなったので、改めて復習をしたいと思います。
▼サンプルページはこちら
基本「 display: grid; 」と書く
...
CSS(シー・エス・エス) 【CSS】ボタンにマウスオーバーしたら画面いっぱいに要素が広がるアニメーションを作ってみる
ボタンにマウスオーバーしたタイミングで、要素が画面いっぱいに広がって埋め尽くす、といったアニメーションを作ってみます。
▼demoページはこちら
CSSでアニメーションを設定する
まずは、ボタンを作ります。
...
CSS(シー・エス・エス) 【CSS】疑似要素:before/:afterのcontent内で改行をする方法
「疑似要素:before」のcontent内で改行したい…と思ったときに、どうやって？という壁にあたったので、その方法について紹介したいと思います。
white-space: preを使う
改行したい位置で \A を入...
CSS(シー・エス・エス) 【CSS】（蛍光ペン風）文字にマーカーが引かれたような下線デザインを作る方法｜background: linear-gradient
文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。
文字の下半分にマーカーのような線を引く
background: linear-gra...
CSS(シー・エス・エス) 【CSS】背景画像に半透明のレイヤーを重ねる方法｜疑似要素::after
「背景画像を配置してその上に文字を配置」などをした場合、背景画像が明るすぎて文字が見えない…という場合もあるかと思います。そのような時に使える方法です。
普通に画像に半透明の黒画像を重ねて画像化して配置しても良いのですが、それだと芸...
