CSS(シー・エス・エス) CSSの:has擬似クラス:not擬似クラスとは？
:has擬似クラス :not擬似クラスとは？CSSの:has擬似クラスは、指定されたセレクタに一致する要素の中で、特定の子孫要素を持つ要素を選択するために使用されます。CSSの:not擬似クラスは、指定された条件に合致しない要素を選択するた...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】取り消し線の色を変更するには？
text-decorationとは？text-decorationは、CSSのプロパティの一つであり、テキストの装飾や線の追加に使用されます。このプロパティは、テキストに下線、上線、取り消し線、およびその他の線を追加するために利用されます。...
CSS(シー・エス・エス) 【CSS】美しいInstagramフォローボタンを作成する方法
以下は美しいInstagramフォローボタンのCSSデザイン例と設置方法です。 フォローするFontAwesomeを読み込むFontAwesomeをダウンロードするか、CDNから読み込みます。<link rel="stylesheet" h...
CSS(シー・エス・エス) 【CSS】margin: 0 autoが効かない？
margin: 0 autoが効かない？要素を中央に配置するために、margin: 0 auto; を使ってもうまくいかない場合、次のような可能性があります。要素がブロック要素かどうか要素がブロック要素である必要があります。inline要素...
CSS(シー・エス・エス) 【CSS】margin-block-endとは？｜要素の下部（ブロック軸）にマージンを付ける方法
margin-block-endとはmargin-block-endは、CSSのプロパティの一つで、要素の下部（ブロック軸）にマージンを追加するために使用されます。p { margin-block-end: 20px;}上記のコードでは、<...
CSS(シー・エス・エス) 【CSS】iframeを画面サイズに合わせて可変させる
サンプルはこちら▼iframeを画面サイズに合わせて可変させる方法iframeの親要素に以下のCSSを追加します。iframe-wrapというクラス名を親要素で囲んだ例です。.iframe-wrap{max-width: 100%;posi...
CSS(シー・エス・エス) 【CSS】video（動画）全画面表示の方法｜動画視聴がより快適に！CSSを使った全画面表示のテクニック
CSSで動画やビデオをフルスクリーンで表示にするには、CSSを使用して次の手順を実行します。ビデオを含むHTML要素（videoタグなど）を作成ビデオを含むHTML要素（videoタグなど）を作成します。ワードプレスの場合は便利な「動画」ブ...
CSS(シー・エス・エス) 【CSS】「@supports」とは？使い方について
@supportsとは？CSSの「@supports」は、ブラウザが特定のCSSプロパティや機能をサポートしているかを判定するためのディレクティブです。これを使用することで、CSSを使用する前に特定のプロパティや機能が使用可能かを確認するこ...
CSS(シー・エス・エス) 【CSS】インライン要素とpaddingについて（上下の余白が効かない…？）
インライン要素にpaddingを設定する際には注意が必要です。インライン要素とは？インライン要素とは、HTMLで文章を構成するときに使われる要素のことを指します。インライン要素は、文章の中に含まれる要素であり、通常のブロックレベル要素とは異...
CSS(シー・エス・エス) 【CSS】margin（マージン）とpadding（パディング）とは？違いについて
margin（マージン）とは？marginとpaddingは、HTML要素の外側と内側のスペースを調整するためのプロパティです。marginは要素の外側のスペースを調整するために使用されます。marginで指定されたスペースは、要素を囲む他...
CSS(シー・エス・エス) 【CSS】flexbox（フレックスボックス）の基本的な機能一覧（flexbox使い方）Part1
flexbox（フレックスボックス）とは？Flexbox (Flexible Box Layout) は、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できるようにする 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#notice-a...
CSS(シー・エス・エス) 【CSS】メディアクエリ(Media Queries)とは？スマホのレスポンシブ対応の基本
今回はCSSでのスマホのレスポンシブ対応の基本、「メディアクエリ(Media Queries)」についてご紹介します。メディアクエリ(Media Queries)とは?メディアクエリ(Media Queries)とは、「表示された画面サイズ...
CSS(シー・エス・エス) 【CSS】背景画像や画像を白黒（グレースケール）にする｜filter:grayscale( )
「画像や背景画像を白黒にしたい」と思ったときは、画像を予め白黒に加工してアップロードするのもひとつですが、CSSのfilter:grayscaleを覚えておいたほうが早いかもしれません。filter:grayscaleとは？filter-f...
CSS(シー・エス・エス) 【CSS】マウスオーバー（hover）で作成するボタンアニメーション
ボタンにマウスオーバーした時にアニメーションさせるCSSです。疑似要素:hover（ホバー）にアニメーションを加える考え方としては「疑似要素のhover(ホバー)にアニメーションを加える」・・・で良いかと思われます。PUSH疑似要素:hov...
CSS(シー・エス・エス) 【CSS】見出しや段落の文字に引いた下線の位置を調整する方法
CSSで見出しや段落の文字に引いた下線の位置を調整する方法です。基本：text-decorationまずはtext-decorationで傍線（下線）が表示できます。text-decoration: underline;下線の位置や色を調整...
CSS(シー・エス・エス) 【CSS】長い文字やURLをページ内で強制的に改行する方法（word-break: break-all）
記事コンテンツ内に長いURLなどがあると改行されずに右に突き出る場合があります。見た目の問題だけでなく、本来できない想定の画面右端からの右スクロールができてしまう、といった問題が出てしまいます。こちらを修正する方法です。word-wrapで...
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は読み込む際の優先順位によって、このように点数が付けられているようです。指定方法指定の例点数（スコア）ユニバーサル*0点要素...
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とmarg...
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 という方法を使うとリストやボックスが並んでいる最後の部分だけ、何か（例えば色を変えたり）などが...
