cssを覚えるキッカケになったのは、
複数指定されたclassを勘違いして使おうとしていたところからでした。
まずclassの使い方を覚えることで、
htmlをより深く理解できると同時に、cssの理解も進みます。
htmlすら手探り状態だったとき、
左寄せに文章を中央寄せするにはどうすればよいのか？
中央寄せしているサイトを見て、こういったタグを真似していました。
<p class="inline-center inline-block">こんにちは！</p>
なるほど、こんにちは！の言葉を
<p class="inline-center inline-block"></p>で囲えばいいんだな。
そう考えてサイトを作成していたわけですが、
たまたま、inline-centerの部分を消してしまい、
左寄せになってしまいました。
あれ？どういうこと？
classは、「こんにちは！」の部分を中央寄せしたり、文字の大きさや色を変えたりと、
pタグで囲った部分を変化させるために装飾を持たせる使い方をします。
classの名前は、用途がわかりやすいようにつけるので、
inlineはともかく、centerは中央の何かなんだな、
とわかりますよね。
inline-centerのcssは
.inline-center{
text-align: center;
}
という記載になります。
テキストのアライメント（並べ方）をセンターにする。
ということですね。
中央寄せにもいろいろと方法があって、
これはテキストに対する位置調整なんですが、
画像の調整にも使える方法です。
この”inline-center”を誤って消してしまい、
中央寄せが解除されてしまったというわけです。
目次
複数指定する
今回使われていた class=”inline-center inline-block” のように、
class=””の中に割り当てる型を2つ3つと追加することで、複数のスタイルを指定することができます。
そしてcssを2つ以上指定する場合は、半角スペースを間に入れて指定します。
『 inline-center□inline-block 』
この場合は、中央寄せである “inline-center” と
“inline-block” という2つのスタイルを持たせるための複数指定です。
中央寄せ以外必要のない場合は、”inline-center” のみ記述するということになります。
“inline-center” がどのような役割を果たしているのか知らずに消してしまい、
中央寄せができなくなってしまったことで、classがどういうふうに使われているかを調べ、
cssというものを理解していくことになったのです。
スタイルを直接記述
cssファイルに追記せず、classを使わずにスタイルを持たせることができ、
今回の例のように pタグ に style=”” と記載してスタイルを割り当てることができます。
<p style="text-align:center;">こんにちは！</p>
このようにcssの内容を直接記載します。
class名を使って複数のスタイルを指定するように
styleを使って複数指定することもできます。
この場合、スタイルを複数指定する場合、半角スペースを入れる必要はありません。
表示させたいページだけに使う場合は良いですが、
同じスタイルをいろんなページで使用するとき、
一括でスタイルを変えたいときはclassを使用したほうが便利です。