検索
Close this search box.

CSSとはWEBページのスタイリング

WEBページの装飾に関する設定をまとめて行えるスタイルシート言語といえます.おしゃれなデザインのサイトには必要です.

カスケーディングスタイルシート

CSS –> Cascading Style Sheets のカスケード ( cascade ) とは、階段上に連続する滝のことだそうだ.

電気的には縦つながぎ と書かれていました.

いくつもの項目があっても、滝上から設定できるようなことだろうか.

CSS とは、スタイルシート言語です.

HTML や XML 文章にスタイルを追加して、おしゃれなデザインに変更が可能です.

文章の情報と構造を分離して、簡単に管理できること、検索エンジンに理解しやすい文章構造であることが求められている.

Elementor と CSS

CSS は、コードを作ったり、コピーしたり、それを改変したりして入力することになります.

Elementor の趣旨とは異なるように感じるかもしれませんが、CSSが少し使えると、Elementor のページを作ったり改変したりするときの生産性がグーンと上がりますので、知っていても損はないと思います.

CSS の書き方

CSSの基本書式(セレクタ・プロパティ・値)

CSSでスタイルを指定する際には、

  • どの部分に対して
  • どのスタイルを
  • どのように

適用するかを指定します。

以下の使用例では、p要素の色を赤くするスタイルを指定しています。

				
					p {color:red;}
				
			

上の名称は、

p : セレクタ
color : プロパティ名
red : 値

に相当します.

この形 セレクタ {プロパティ名:値;}が基本形なので、覚えておきましょう.

一つのセレクタで複数のスタイルを指定できる

一つのセレクタに対して、複数のスタイル指定する場合には、スタイル宣言をセミコロン( ; )で区切って記述できます.

				
					p {color:red;line-height:1.5;}
				
			

CSS の記述上の注意

コメントの書き方

				
					 /*段落を赤くして行の高さを1.5倍にする*/
 
  /*
  段落を赤くして行の高さを1.5倍にする
  */
				
			

CSSでは半角スペース・タブ・改行はスタイルに影響しない.

				
					p {
color:red;
line-height:1.5;
}
				
			

大文字小文字の区別はないが、将来は小文字のみになるので、小文字で記述するように推奨する.

セレクタの種類

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

css とは何か

記事の見出し番号

関連記事

見出し装飾CSS

投稿記事の見出しを CSS で装飾できれば、編集作業は大幅に削減で、また、ページの見栄えも良くなる。

CSSで自動で見出し番号 その2

見出し番号をCSSで、ブロックエディタ投稿は動作するが、Elementorで投稿するとうまく動作しないので原因を探る

Elementor で CSS

Elementorで CSS を使う時のポイントは CSS のクラスや ID を使って適応範囲をコントロールするのがポイントになる

最新記事

iframe

iframeを使って、他サイトをページに表示させることができます。

例)スクロール効果

スクロールの効果のサンプルページです。印象に残るページの参考にしていただけると良いですね。Elementorより。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。