redblue.link

ホームページの特定の部分を、特定の位置に表示する方法(パソコン、スマホ表示両対応)



ソースコードはこちら
<head>
<style type=text/css>
.n{
margin:0 auto;
max-width:700px;
}
<style>
</head>

<body>
<div class="n">
ここにコンテンツを表示する
</div>
</body>


解説
head内にスタイルシート(style type=text/css /style)のコードを書くのですが、.n{}で、nの指定がある領域のみにスタイルを適用できます。
そのやり方が、div class="n" /divです。
このdivで囲まれた領域のみ、.n{}が適用されます。
margin:0 auto; によって、コンテンツを中央に表示できます。
max-width:700px; で、その最大幅が700pxと指定することができます。
この、700を自分の好きな値に変えることで、幅を好きなように決めることできます。

ホームページが、パソコン、スマホどちらでもうまく表示できる方法がこの方法ということにもなります。
max-width: は、最大幅の指定であるため、この最大幅に満たない場合には、見ている機種の最大表示幅で表示されるようです。


トップページ