CSS(シー・エス・エス) 【CSS】flexbox（フレックスボックス）の基本的な機能一覧（flexbox使い方）Part1
flexbox（フレックスボックス）とは？ Flexbox (Flexible Box Layout) は、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できるようにする CSS レイアウト モジュール...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】linear-gradient プロパティ（線形勾配）でグラデーションを作成する
linear-gradient()を使うと、グラデーションを作ることができます。 linear-gradient プロパティとは？ linear-gradient プロパティは、直線に沿った 2 つ以上の色の間の漸進的な変化からなる画像を作...
CSS(シー・エス・エス) 【CSS】hrefのURLをセレクタで指定する方法（完全一致・部分一致）
例えば、一覧ページなどの中でパスワード保護されているページなど、特定のURLのページのみを非表示にしたい場合は、セレクタで指定する方法もあります。 hrefのURLをセレクタで指定することもできます。※リストから非表示にさせる方法は、リスト...
CSS(シー・エス・エス) 【CSS】英語のサイトや英語の言語の場合でCSSの条件を指定する｜:lang()
例えば、「英語版のサイトのみ○○を非表示にしたい」といった場合に使えるCSSです。 :lang() 例えば、lang="en-US"となっている場合など、言語別にスタイルを適用したい場合に:lang疑似クラスが使えます。 div#notic...
CSS(シー・エス・エス) 【CSS】メディアクエリ(Media Queries)とは？スマホのレスポンシブ対応の基本
今回はCSSでのスマホのレスポンシブ対応の基本、「メディアクエリ(Media Queries)」についてご紹介します。 メディアクエリ(Media Queries)とは? メディアクエリ(Media Queries)とは、「表示された画面サ...
CSS(シー・エス・エス) 【CSS】背景画像や画像を白黒（グレースケール）にする｜filter:grayscale( )
「画像や背景画像を白黒にしたい」と思ったときは、画像を予め白黒に加工してアップロードするのもひとつですが、CSSのfilter:grayscaleを覚えておいたほうが早いかもしれません。 filter:grayscaleとは？ filter...
CSS(シー・エス・エス) 【CSS】マウスオーバー（hover）で作成するボタンアニメーション
ボタンにマウスオーバーした時にアニメーションさせるCSSです。 疑似要素:hover（ホバー）にアニメーションを加える 考え方としては「疑似要素のhover(ホバー)にアニメーションを加える」・・・で良いかと思われます。 PUSH 疑似要素...
CSS(シー・エス・エス) 【CSS】見出しや段落の文字に引いた下線の位置を調整する方法
CSSで見出しや段落の文字に引いた下線の位置を調整する方法です。 基本：text-decoration まずはtext-decorationで傍線（下線）が表示できます。 text-decoration: underline; 下線の位置や...
CSS(シー・エス・エス) 【CSS】長い文字やURLをページ内で強制的に改行する方法（word-break: break-all）
記事コンテンツ内に長いURLなどがあると改行されずに右に突き出る場合があります。見た目の問題だけでなく、本来できない想定の画面右端からの右スクロールができてしまう、といった問題が出てしまいます。 こちらを修正する方法です。 word-wra...
CSS(シー・エス・エス) 【CSS】input name属性をCSSで指定する方法
フォームなどでクラス名を持っておらず、nameやvalueでCSSを指定したいと思った時に、inputのname属性をcssセレクタとして指定する方法です input ということで「input」と指定をすることで、CSSを適用させることがで...
CSS(シー・エス・エス) 【CSS】「height」は「ヘイト」？「ハイト」？
CSSでよく使われる「height」＝「高さ」。こちらの読み方は？？ height 紛らわしいですが、正確には「ハイト」が正しい発音になっているようです。 height【hάɪt】 正：ハイト 誤：ヘイト まとめ heightは正確には「ハ...
CSS(シー・エス・エス) 【CSS】セレクタの優先順位の計算方法についてpart1
CSSの優先順位が毎回分からなくなるので、改めて整理してみました。 サンプルページはこちら CSSセレクタの優先順位（スコア） CSSは読み込む際の優先順位によって、このように点数が付けられているようです。 指定方法指定の例点数（スコア）ユ...
CSS(シー・エス・エス) 【CSS】WEBサイトのページを開いた時にローディングアニメーションを実装する方法（CSSのみ）
WEBサイトを開いたときにローディングアニメーションを表示させる方法です。前回はjQueryで作成してみましたが、今回はCSSのみで実装してみます。 サンプルページはこちら とりあえずHTML部分 ということで、前回同様にHTML部分を実装...
CSS(シー・エス・エス) 【Flexbox】要素を上下左右の中央に配置する方法（CSS）
CSSで「画面の上下左右中央に要素を配置したい」と思った時にも、Flexboxが便利です。簡単にできますのでお試しください。 四角形を準備する まずは、四角形を準備します。ひとまず、以下のような感じにして四角形を準備します。 <style>...
CSS(シー・エス・エス) 【CSS Battle】画像通りにCSSを作る疑似ゲームに挑戦できるブラウザサービス
CSSのスキルアップを目指す時の便利なサービスのひとつが「CSS Battle」です。 CSS Battle こちらのページから開けます。 まずは、Sign Upで新規登録します。 TwitterやGithubのアカウントでログインできます...
CSS(シー・エス・エス) 【CSS】左側や右側に余白やスペースを作りたい時に使うmarginとpaddingの基本について
「WEBページの左側や右側にスペースを作りたい」という時には、「padding」「margin」を設定することで、領域の右側や左側に余白を作ることができます。padding、margin、余白についてを抑えてみます。 paddingとmar...
CSS(シー・エス・エス) 【CSS】テキストに下線（アンダーライン）を引く時に使えるプロパティ＋波線や点線・二重線を引く
「CSSで下線引く時に使うCSSは何？」という時に使えるプロパティです。 下線／text-decoration:underline; まずは、このプロパティ「text-decoration:underline;」で下線（アンダーライン）が引...
CSS(シー・エス・エス) 【CSS】タッチやクリックの挙動を無効化するCSS｜pointer-events
たとえば、前に実装をした「三角形の形」が要素の上に表示されると、下のアイコンがクリックできないという症状が発生する場合があります。 上の三角形が邪魔してクリックができない。 このときはCSS「pointer-events: none;」を使...
CSS(シー・エス・エス) 【CSS】吹き出しのような三角形の形を作る方法
例えば、ワードプレスなどでアイコンをクリックした際に画面が表示されるような場合に、吹き出しっぽく三角形▲←のような形を作りたいと思った時に使える方法です。 borderプロパティで作る 以前も書いたのですが、borderプロパティを使うこと...
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-t...
CSS(シー・エス・エス) 【CSS】画像をクリックしたら動き出すイベントを作る方法
画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。 input:checkedを使う...
CSS(シー・エス・エス) 【CSS】マウスカーソルの形状を変える方法「cursor」プロパティ
例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと（例えばクリックイベントなどで）ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか？と一瞬違和感を感じてしまう可能性があります。 ボタンをクリックであれば...
CSS(シー・エス・エス) 【CSS】Grid Layout(グリッドレイアウト)で横縦縦縦の1×3のレイアウトを作る方法
以前にもGrid Layout(グリッドレイアウト)の話を書いたのですが、またまた分からなくなったので、改めて復習をしたいと思います。 ▼サンプルページはこちら 基本「 display: grid; 」と書く Grid Layout(グリッ...
CSS(シー・エス・エス) 【CSS】ボタンにマウスオーバーしたら画面いっぱいに要素が広がるアニメーションを作ってみる
ボタンにマウスオーバーしたタイミングで、要素が画面いっぱいに広がって埋め尽くす、といったアニメーションを作ってみます。 ▼demoページはこちら CSSでアニメーションを設定する まずは、ボタンを作ります。 HTMLでdivボックスを作りま...
CSS(シー・エス・エス) 【CSS】疑似要素:before/:afterのcontent内で改行をする方法
「疑似要素:before」のcontent内で改行したい…と思ったときに、どうやって？という壁にあたったので、その方法について紹介したいと思います。 white-space: preを使う 改行したい位置で \A を入力し、white-sp...
CSS(シー・エス・エス) 【CSS】（蛍光ペン風）文字にマーカーが引かれたような下線デザインを作る方法｜background: linear-gradient
文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。 文字の下半分にマーカーのような線を引く background: linear-gradientを使います。...
CSS(シー・エス・エス) 【CSS】背景画像に半透明のレイヤーを重ねる方法｜疑似要素::after
「背景画像を配置してその上に文字を配置」などをした場合、背景画像が明るすぎて文字が見えない…という場合もあるかと思います。そのような時に使える方法です。 普通に画像に半透明の黒画像を重ねて画像化して配置しても良いのですが、それだと芸が無いの...
CSS(シー・エス・エス) 【CSS】背景画像（background-image）を横幅100%に広げる方法【レスポンシブWEBデザイン】
「CSSで背景画像を画面幅いっぱいに広げたい」という時に使える方法です。背景画像を配置しただけでは、必ずしも画面幅いっぱいに広がる訳ではなく、no-repeatなどを指定した場合、左上の方に１枚ポツンと表示されてしまったりします。 このよう...
CSS(シー・エス・エス) 【CSS】文字の行右端の位置が合わない…？時に使えるjustify（均等割り付け）の方法｜text-align
p(段落)でテキストを入れた時に、右側の端が微妙に合わない…？という状態になっていました。 そんな時は「text-align プロパティに「justify」を指定する」という方法で、CSSの両端揃え(均等割り付け)を設定すると、行の右端も揃...
