ブログやホームページにせっかく来てくれた人も、デザインが悪いと、信頼性が伝わらず、すぐにいなくなってしまう傾向があるようです。
デザインを自分で直したい。試行錯誤する。でも直らない。
デザインを修正するには、CSSの知識が不可欠です。
CSSを設定する時に、使う”id=”と”class=”という文字をよく見ると思います。
ここでは、基本的なホームページのデザイン制作の仕組みをご紹介します。
そもそもCSSって何？
以前こちらで少し説明しましたが、
平たく言えば、
建築に例えると
HTMLで、家の構造をデザイン
CSSでは、家の装飾をデザイン
無料のブログをされている方は、HTMLの構造はきちんとデザインされているので、比較的問題はないと思います。
HTMLにCSSでデザインをし、装飾を変更しようとした時に、壊れてしまった。思うようにいかない。などの問題が起こります。
こちらで説明するのは、家の装飾を担当するCSSさんです。
HTMLとCSSを連結する
HTMLのソースを見ると、こんな感じの記述がheaderタグの中にあると思います。
1 | <link rel='stylesheet' href='/style.css' type='text/css' media='all' /> |
これは、”stylesheet”です。stylesheetとは、CSSと同じ意味です。
これは、style.cssというファイルを外から読み込みます。
これは、text/cssというタイプのドキュメントです。
これは、表示タイプ(画面表示、プリント表示)の全てに適用します。
という意味です。
まずは、スタイルシートが適切に読み込まれているか確認してくださいね。
HTMLとCSSをもっと連結する
HTMLファイル内に、idとclassという文字があると思います。
例えばこんな形
1 | <li id="menu-item-792" class="menu-item" >こんな文字</li> |
CSS内では、このように記述して連結します。
[css]
#menu-item-792
{
// 指定の内容
}
.menu-item
{
// 指定の内容
}
[/css]
ここで、ちょっと重要な内容があります。
HTMLの中で、同じidは１度しか使えません。
classは複数使えます。
複数のidを指定してしまうとエラーになってしまいますので気をつけてください。
こんなイメージです。
学校の教室を例にとってみます。
ある時、先生が質問します。
「みかんが好きな人！手を挙げて！」
はーい！10人が手を挙げました。
これがclassです。
「おい！吉田くーん！」
これがidです。
ちょっと例が分かりにくいかもしれません。。。笑。
吉田くんは、一人だけ。
みかんが好きな人は、複数いる
ということです。
要するに、
ここでは、idは１度だけ、classは複数設定可能であると覚えておいてください。
つまりこんな設定であれば大丈夫です。
1 2 3 4 | <li id="menu-item-792" class="menu-item" >こんな文字</li> <li id="menu-item-793" class="menu-item" >こんな文字</li> <li id="menu-item-794" class="menu-item" >こんな文字</li> <li id="menu-item-795" class="menu-item" >こんな文字</li> |
idは個別のもの、classは複数指定できますよね。
また、こんな事も可能です。
1 2 3 4 | <li id="menu-item-792" class="menu-item menu-item2" >こんな文字</li> <li id="menu-item-793" class="menu-item menu-item2" >こんな文字</li> <li id="menu-item-794" class="menu-item menu-item2" >こんな文字</li> <li id="menu-item-795" class="menu-item menu-item2" >こんな文字</li> |
“menu-item2″のクラスを追加しました。
教室で例えると、みかんが好きな人！そしてりんごが好きな人！という感じです。
idは、複数指定はできませんので気をつけてください。
JavaScriptとの連携
メニューバーが壊れた。スライドショーが動かなくなった。
ホームページ上で動いたりする機能がついている場合、JavaScriptという言語を使用しています。
JavaScriptは教室で例えると、教頭先生みたいなものです。
この教頭先生は、すごく偉いので、生徒を名指しで呼びます。
「おい！吉田！ちょっと来い！」笑。
JavaScript教頭は、idを使って生徒を指名します。
ということで、JavaScriptとの連携は、idを使用します。
idは、ホームページの機能を制御するのに使用されますので、きちんした設定は非常に重要です。
ブログをカスタマイズしようとした人はお分かりになると思いますが、この調整は非常に大変だったりします。
idが違っていたり、CSSの指定が違っていたりして、教室で例えると、先生が生徒に指示を出せなかったりします。
ご自分で全て行なうのであれば、この連携の構造をきちんとまず押さえる必要があります。
Amazonで購入したおすすめ商品
お疲れ様です。パソコン仕事は体を痛めます。長時間のパソコン仕事で、肩や目が痛い方はこちらがおすすめです。
快適な環境で仕事をしたいですね。
肩が上がらない。姿勢が悪くなる。
腕を広げてタイピングできるので、肩への負担が軽減されます。
目の奥が痛い！時に。
画面の色を損なうことなく、パソコンを長時間見るときに役立ちます。
見た目はエッジが効いている？ので、集中モードの時に。
ネットが遅くて困る！接続数足りてる？
パソコン・スマホ・タブレットを８０台まで接続できてこの値段。
