超超初心者向け漫画サイトのつくり方【表示全体を真ん中にする。】

htmlに、そのまま画像などを置いていくと全て左寄りにされます。

これを真ん中に配置する方法を紹介します。

超お手軽簡単に真ん中に配置

超超初心者なら、こんなつくり方もアリ。と個人的に思う方法です。

サイト界的にどうかは……(´・ω・`)

style.cssをサクラエディタで開いて、body{}の、中括弧の中に以下のコードを追記してください。

text-align: center;

サクラエディタは、こんな感じです

ブラウザ表示は、こんな感じです。

真ん中に配置されました。

しかしコレ、すっごい難点もありますので使うときには注意が必要です。

いま「真ん中に配置して」とお願いしている範囲が、「body」=「全体」になっています。

つまり、SNSボタンを左下に配置したい。となった時などに問題発生です。真ん中に置けっていった手前、これだけ左下に…とか言いづらい。

ちょっとお手軽簡単に真ん中に配置

じゃあ、全体ではなく個別に真ん中配置をお願いしよう。

イメージ図

全パーツそれぞれにtext-align: center;を入れたら、どうなるか見てみましょう。

ブラウザで見ると…

あれ??画像だけが真ん中に寄ってくれません。

理由は、各タグに属性があってtext-align: center;が効くものと効かないものが……て感じなのですが、詳細はいずれ分かってくるので、今は「風属性なので竜巻攻撃が効かない。」みたいな認識で大丈夫です。

じゃ、どうするか。

効く属性にしちゃいましょう。<p>~</p>で囲います。

<p><img src="image/top.png" alt="トップ画像"></p>

CSSに、pタグに対してtext-align: center;を指定します。

p {text-align: center;}

これで画像も、真ん中配置になったはずです。サイト界的にも許容範囲内だと思います。たぶん。きっと。

お手軽じゃないけど、一番良い方法

新しいタグを使う事になりますが、一番いい方法は他にあります。

色々盛り込んだサイトにする際、絶対不可欠なタグなので別記事でゆっくり書くとして、ここではざっくりと説明します。

まず、箱を作って、その中にタイトル、画像、メニューを入れる。そして、その箱ごと真ん中に配置する。

…そんな方法です。

<div>というタグを使います。この子の認識は「得体は知れないが便利な子」です。透明で純真で柔軟な子です。

楽しみですね。頑張りましょう!

そろそろお気づきだと思いますが、同じ結果を得るのに色んな方法が存在するのがホームページ作りです。どれがいい。と言いづらくもあります。流行り廃りが激しい世界ですし…。

可能な限り、「簡単な方法」と「主流の方法」を紹介できたら…と思います。

コメント