ホームページの基礎知識 ホームページ制作

初心者さんが抑えておくべきCSS基礎知識

投稿日:

ホームページ作成ソフトに任せて良しとは言われても、暗号のような HTMLをご覧になって、テンションが下がり気味の社長さんもいらっしゃるかもしれません…

弱っているところに追い打ちをかけるようで申し訳ないのですが、隠してもいられませんのでお伝えしますと…

実は、ホームページ制作には、HTMLだけでなく、もう1つ重要な要素があるんです(笑)

それが、HTMLとは別の言語、CSSと呼ばれる文章です。はい、笑えませんよね…。

あんな暗号みたいなのが、もう一つあるのかよ!って衝撃を受けている方も少なくないと思いますが、残念ながら事実。

まずは論より証拠ってことで、HTMLの時と同様に、当サイトで実際に使用している CSSをご覧いただきたいと思います。

当サイトのCSS全部見るには、こちらをクリックしてもらうと、新規のタブが表示されて見ることができますが、全部みるのは精神的に辛いって方に、ほんの一部ですが抜粋しましたので、ご覧ください。

html,
body {
	height: 100%;
}

body {
	min-width: 320px;
	word-wrap: break-word;
	background-color: #fafafa;
}

body.mceContentBody {
	background-color: #fff;
}

.st-hide {
	display:none;
}

hr.hrcss {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.post h4 .point-in i,
.n-entry i,
.p-entry i{
margin-right:5px;
}
安心してもらいたいから、初めから結論をお伝えしておくと、CSSもホームページ作成ソフトがやってくれるぞ!

でも、本来であれば、HTML同様に、CSSも自分で書かなくちゃいけないんだ。

CSSは、ホームページの装飾指示書。

HTMLだけでも厄介なのに、またも、面倒臭そうなモノを見てしまいましたよね…(笑)

しかも、今回ご覧いただいた CSSは、HTMLとは、だいぶ雰囲気が違うことに気付いていただけましたでしょうか…?

これって… もしかして記述ルールが違うんじゃ?

って、感じとった社長さんは… かなり鋭いです!
 
大変残念なことではございますが、包み隠さずお伝えしますと、このCSSは、HTMLとは全く異なる文章でして… 当然のことながら、基本的な記述ルールは全く異ります。

で、肝心のCSSってのは、何をするモノかと言いますと…

ホームページの装飾や、レイアウトを制御する言語なんです。

家で例えると、構造や、骨組み部分は HTMLで表現され、CSSは、家の外壁の色や、窓の大きさ、家具のレイアウトなどを担当しています。

つまり、ホームページの装飾指示書であり、ホームページがオシャレになるか否かは、このCSSにかかっているといっても過言じゃありません。

CSSの効果を見てみよう!

CSSとは、正式名称として、カスケーディング・スタイル・シート( Cascading Style Sheets )で、その頭文字をとって、CSSと略されます。

WEBの現場では、CSSと呼ぶのが一般的ですが、時にスタイルシートとも呼ばれたりします。

で、そのCSSを実際に使うと、どんなことができるのかと言いますと、

文字を大きくしたり、

小さくしたり、

赤くしたり、

黄色いマーカーを引いてみたり…

こんな吹き出しを作ってみたり

ディースケをこのように、画面の 左側に配置させてみたり、

こんなBOXもCSSで作れるよ。

こういった、グレーのボックスを作ってみたり

このように、色や、形、レイアウトなどをコントロールし、ホームページのデザインを担当しているんです。
 
つまり、ホームページは、HTMLという設計書を元に作られた骨格に、CSSという装飾指示書に従って色を塗られ、できあがってるんです。

CSSもホームページ作成ソフトに丸投げを推奨します。

ディースケが、3万円払ってでもホームページ作成ソフトに投資すべきと言う理由… ご理解頂けたでしょうか?

HTMLを勉強して、次に、CSSも覚えて…

なんて事してたら、ホームページが完成するのに何年かかるか分かりません(笑)

仮に、アナタがCSSを勉強して、文字の色を赤くするのに成功したり、グレーのボックスを作れたとしても、それで、集客アップが見込めるかと言えば、答えは NO。

だから、CSSなんて、ホームページ作成ソフトに、お任せしちゃうのがベスト!

無料ブログを利用したことがあるならイメージし易いと思いますが、ホームページ作成ソフトを使えば、文字を大きくするのも、赤くするのもボタン一発。あんな、暗号みたいな奇怪な文章を覚える必要は全くありませんので(笑)

全てを、自分でやろうとするには、ホームページ制作に求められる知識は、あまりにも広範囲過ぎます。

自分がやるべきことと、自分がやるべきでないことを明確にする。

これは、初心者さんが挫折しないためにも、とっても重要なことだと思っています。

面倒なHTMLも、CSSも、3万円の投資で解決、アナタは、SEOに注力すべきと、ディースケは考えています。

次の講座は、独自ドメインについてです!

ホームページ作成ソフトと同じく、集客ホームページを作るためには欠かせないアイテムなんだ!

次の講座
初心者さんが抑えておくべき独自ドメインの基礎知識

さて、ココまでの講座で、ちょこちょこ登場していた ドメイン。 集客ホームページを作るには絶対必須で、当サイト推奨 ホームページ作成における必要コストで、年間 1,480円かかるとお伝えしましたが… 納 ...

メルマガ始めました!

産地直送
店舗集客アップに役立つ情報を、WEB業界からダイレクトにお届けする、ディースケのメールマガジン雨天決行は、もちろん無料です(笑)
ディースケが、WEB業界の現場から、店舗集客に役立つ情報を、お届けしちゃうWEBマガジン…
その名も"雨天決行"

雨が降ろうと、槍が降ろうと、頑張る社長さんのために、ブログじゃ言えない 訳ありノウハウや、お勧めツールなど、情報盛り沢山(予定)

無料登録はこちらから

-ホームページの基礎知識, ホームページ制作

Copyright© セルフサービスホームページ , 2019 All Rights Reserved.