スキルアップを始める!

CSS(シー・エス・エス)

CSS(シー・エス・エス) CSS(シー・エス・エス)

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の頭文字を取ったもので、「WEBサイトのスタイルを指定する」言語です。「スタイルシート」と呼ばれることが多いです。

WEBサイトにおけるHTMLはWEBページの各要素の意味や構造を定義するのに対して、CSSはHTMLの装飾を指定します。

書籍一覧
Kindle本一覧 初めてのWordPress入門読本 『初めてのWordPress入門読本』は、WordPressを学ぶ初心者に向けた入門書です。 マーケティング用語集100 今から始めるマーケティングの基本 マーケティングの世界に新しく...
CSS(シー・エス・エス)

【CSS】ボタンがマウスオーバーしたら色が変わっていくようなアニメーションのパターン

ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果のCSSコード例を紹介します。 ボタンのHTMLコード ま...
CSS(シー・エス・エス)

【CSS】10個のボタンのサンプルコード(そのまま使える)

HTMLとCSSを使用して、異なるスタイルの10個のボタンを作成します。 HTMLコード <button class="button1">デフォルト</button> <button class="button2">ホバーエフェクト</bu...
CSS(シー・エス・エス)

【CSS】マージンの相殺とは?(Collapsing Margins)

マージンの相殺とは CSSにおいて、マージンの相殺は、隣接する要素間のマージンが一方に集約される現象です。これは特にブロック要素間で顕著に見られ、例えば、縦に並んだ要素の上下マージンが相殺されることがあります。 この挙動は予期せぬレイアウト...
CSS(シー・エス・エス)

CSSのclass名に使える文字は?適切なクラス名とそのサンプル

CSSのclass名に使えるルール CSSのクラス名には、ほとんどのUnicode文字が使用できます。ただし、いくつかのルールがあります。 英数字(a-z、A-Z、0-9)は使用できます。 ハイフン(-)やアンダースコア(_)も使用できます...
CSS(シー・エス・エス)

z-indexとは?要素の重なり順番を制御するCSS

z-indexは、要素のスタッキングコンテキスト内での描画順序を制御するためのCSSプロパティです。このプロパティは通常、position プロパティが static 以外の値を持つ要素に対して使用されます。 以下に、z-indexの詳細な...
CSS(シー・エス・エス)

CSSのmargin(マージン)余白設定の基本的な使い方と参考例について

以下、marginの基本的な使い方と参考例です。 margin(マージン)とは? CSSのmargin(マージン)は、要素の外側にスペースを追加するためのプロパティです。このスペースは、要素とその周囲の要素との間に配置されます。 margi...
CSS(シー・エス・エス)

【CSS】ビューポートメタタグでスマホの画面を調整する|いきなり画面がフォーカスを防ぐ

スマホで、inputテキストの入力時に、いきなり画面がフォーカスして入力しにくい動きが発生しました…! アプリと同じように、インプット入力時に自動的にズームにならないように制御してみます。 フォーカスを制御するmetaタグ 下記のように、ビ...
CSS(シー・エス・エス)

CSSとJavaScriptで画像が横スクロールするカルーセルスライダーを作る

CSSとJavaScriptを使用して、画像が横にスクロールするカルーセルスライダーを作成する方法を以下に示します。この例では、HTML、CSS、およびJavaScriptを使用して基本的なカルーセルスライダーを実装します。 HTMLのセッ...
CSS(シー・エス・エス)

【CSS】1文字ずつバラバラにテキストアニメーションするCSS

CSSとアニメーションを使用して各文字を上から下へ1文字ずつ降ってくるアニメーションを作ります。 H e l l o , W o r l d ! .animation-container { position: relative; over...
CSS(シー・エス・エス)

CSSだけを使用してボタン風のラジオボタンを作成してクリックで色が変わるようにする方法

CSSだけを使用してボタン風のラジオボタンを作成し、クリックで色が変わるようにする方法です。以下のコードは、HTMLとCSSを使用してこの目的を達成する方法を示しています。 ラジオボタンを作る まずは、ラジオボタンを作ります。 <!-- ラ...
CSS(シー・エス・エス)

CSSの:has擬似クラス:not擬似クラスとは?

:has擬似クラス :not擬似クラスとは? CSSの:has擬似クラスは、指定されたセレクタに一致する要素の中で、特定の子孫要素を持つ要素を選択するために使用されます。 CSSの:not擬似クラスは、指定された条件に合致しない要素を選択す...
CSS(シー・エス・エス)

【CSS】取り消し線の色を変更するには?

text-decorationとは? text-decorationは、CSSのプロパティの一つであり、テキストの装飾や線の追加に使用されます。このプロパティは、テキストに下線、上線、取り消し線、およびその他の線を追加するために利用されます...
CSS(シー・エス・エス)

【CSS】美しいInstagramフォローボタンを作成する方法

以下は美しいInstagramフォローボタンのCSSデザイン例と設置方法です。 フォローする FontAwesomeを読み込む FontAwesomeをダウンロードするか、CDNから読み込みます。 <link rel="stylesheet...
CSS(シー・エス・エス)

【CSS】margin: 0 autoが効かない?

margin: 0 autoが効かない? 要素を中央に配置するために、margin: 0 auto; を使ってもうまくいかない場合、次のような可能性があります。 要素がブロック要素かどうか 要素がブロック要素である必要があります。inlin...
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%;...
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#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を適用させることがで...
URLをコピーしました!