htmlに、そのまま画像などを置いていくと全て左寄りにされます。
これを真ん中に配置する方法を紹介します。
超お手軽簡単に真ん中に配置
超超初心者なら、こんなつくり方もアリ。と個人的に思う方法です。
サイト界的にどうかは……(´・ω・｀)
style.cssをサクラエディタで開いて、body｛｝の、中括弧の中に以下のコードを追記してください。
text-align: center;
サクラエディタは、こんな感じです
ブラウザ表示は、こんな感じです。
真ん中に配置されました。
しかしコレ、すっごい難点もありますので使うときには注意が必要です。
いま「真ん中に配置して」とお願いしている範囲が、「body」＝「全体」になっています。
つまり、SNSボタンを左下に配置したい。となった時などに問題発生です。真ん中に置けっていった手前、これだけ左下に…とか言いづらい。
ちょっとお手軽簡単に真ん中に配置
じゃあ、全体ではなく個別に真ん中配置をお願いしよう。
イメージ図
全パーツそれぞれにtext-align: center;を入れたら、どうなるか見てみましょう。
ブラウザで見ると…
あれ？？画像だけが真ん中に寄ってくれません。
理由は、各タグに属性があってtext-align: center;が効くものと効かないものが……て感じなのですが、詳細はいずれ分かってくるので、今は「風属性なので竜巻攻撃が効かない。」みたいな認識で大丈夫です。
じゃ、どうするか。
効く属性にしちゃいましょう。＜ｐ＞～＜/ｐ＞で囲います。
<p><img src="image/top.png" alt="トップ画像"></p>
CSSに、ｐタグに対してtext-align: center;を指定します。
p {text-align: center;}
これで画像も、真ん中配置になったはずです。サイト界的にも許容範囲内だと思います。たぶん。きっと。
お手軽じゃないけど、一番良い方法
新しいタグを使う事になりますが、一番いい方法は他にあります。
色々盛り込んだサイトにする際、絶対不可欠なタグなので別記事でゆっくり書くとして、ここではざっくりと説明します。
まず、箱を作って、その中にタイトル、画像、メニューを入れる。そして、その箱ごと真ん中に配置する。
…そんな方法です。
＜div＞というタグを使います。この子の認識は「得体は知れないが便利な子」です。透明で純真で柔軟な子です。
楽しみですね。頑張りましょう！
そろそろお気づきだと思いますが、同じ結果を得るのに色んな方法が存在するのがホームページ作りです。どれがいい。と言いづらくもあります。流行り廃りが激しい世界ですし…。
可能な限り、「簡単な方法」と「主流の方法」を紹介できたら…と思います。
コメント