【CSSの基本書式】CSSに余計なモノ入っていませんか? | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


今日は、アメブロガーの中で、アメブロカスタマイズにCSS(シー・エス・エス)を使っている方のための内容になります。

そもそもCSSってなんですか?CSSの略はなんですか?といった方は、こちらの過去記事『ところでCSSってなんですか~』をご覧くださいませ^^

そして、どうやってCSSの編集をすることができるようになるのですか?
といった方はこちらの過去記事『「CSSの編集」をクリックするとは』をご覧くださいませ^^


さて、CSSが何で、CSSの編集をするにはどうしたらいいのかが、わかったところで、次に進みます!


まず、CSSのルールにいきますね。
(けっこう単純です^^;)

CSSの基本書式は次のとおりです。

セレクタ { プロパティ : 値 ;}
(CSSは半角英数(スペースも半角)で書きます。)


また、この専門用語が厄介ですよね(笑)

訳しますと・・・

セレクタ → どこの
プロパティ → なにを
値 → どうする



になりますので、CSSの基本書式は

どこの{ なにを : どうする ;}


といった構成になっていますね。
(しつこいですが、全部半角英数でないとダメです。よく最後の「}」が全角だったために、うまくCSS設定がされていない、というトラブルもありますので^^;)


これは見やすくするのに、

どこの{
  なにを : どうする ;


のように、改行やインデントを入れて記述することができます。

「どこの」はアメブロの中のHTMLを指します。
そして、「なにを」「どうする」を増やすこともできます。

どこの{
  なにを : どうする ;
  なにを : どうする ;
  なにを : どうする ;
  なにを : どうする ;



それともう一つ大事なルールがあります!


それは・・・

 /* と */ で囲んだ部分はコメントとなります。
(コメントは入れ子にすることはできません。)


・・・で、この /* と  */ で囲った範囲だけは、全角や日本語で書かれていてもOKです。


ですから、例えばこのようなCSSソースを見てみると↓


/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

 (1) 文字のスタイル

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

*/

/* (1-1) 全体の文字
--------------------------------------------
*/

/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}


/* と*/ で囲まれた部分が3か所(赤字部分)あるのがわかります。

そして、CSSの構文とでできています。


ですから、ご自分のCSSソースをチェックなさる際、

■CSSの基本チェック■
1. /* と*/ で囲まれたコメントになっているか
2. CSSの基本書式になっているか


この2つをまずチェックされるとよいですね。
(他にもルールがありますが)


そして、この2つ以外の文字列が入っている場合は、さっくり削除されるとよいと思います。
(または、前後に/* と*/をつけてコメントにしてしまうか)


たとえば・・・
ある方のCSSを見てみたら、必要のない赤枠の部分が入ってましたね~


川上雄大のワンポイントレッスン 

これは、さっくり削除されるとよいですね^^!


さぁ、誰のCSSでしょうか~(笑)

ご本人に通じるといいのですが^^;




<補足>
赤枠の最後の

#frame { background-color: transparent; }
#main { background-color: transparent}
#header { background-color: transparent; }


この3行は、CSSの基本構成なのですが、アメブロの旧デザイン用のCSSコードなので、今回の新デザインでは関係ないので削除の対象にしました。


<CSSの他の記事>

◆CSS(シーエスエス)

CSSって何?

「CSSの編集」って?

CSSの基本書式

CSSの記述場所

CSSでのヘッダー画像の挿入方法

◆ヘッダー下のメニューバー

メニューバーの設置方法

メニューバーのボタンを画像にする方法

メニューバーのグラデーション






以上、パソコンワンポイントレッスンでした。


LIDS札幌・ライフデザインスクール
川上 雄大

川上 雄大☆パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント

Copyright © CyberAgent, Inc. All Rights Reserved.