ホームページを作ってみよう！ - 2022。

2022年10月19日 05:49

ホームページを作る技術も日々進歩しています。その中でもちょっと気になったCSS、スタイルシートについてのメモです。

基本の構造です。

<!DOCTYPE html>
<html>
<head>
<title> ホームページを作ろう！　</title>

<style>

#　CSSを書きます

</style>

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

</head>
<body>

#　HTMLで本文を書きます　CSSを使うためのidとClassを指定します

<script>

#　JavaScriptを書きます。

</script>

</body>
</html>

表示したもの。

HTMLは


<h1>ホームページを作ろう</h1>

<img class="zero" src="de.jpeg">

<div id="continer">

<p>タグと呼ばれるキーワードを使って構造を考えながら作っていきます。</p>
<p>スクロールしてみましょう</p>

</div>　　<!-- "continer" -->
</div>　　<!-- "wrapper" -->

としています。ここでCSSの指定としては、

<img class="zero" src="de.jpeg">

.zero{
margin: 0 calc(50% - 50vw);
width:100vw;
}

で余白をなくして横幅いっぱいに広げます。calc関数で計算させることができます。

そして"vm"

width:100vw;

ブラウザ表示領域（ビューポート）の幅に対する割合で表示するようにできます。単純な幅ではなく、見ている画面の幅に合わせてくれる便利なものになります。

次に本文記載の表示させ方について指定していきます。

<div id="continer">

#continer{
margin: auto;
max-width:800px;
}

本文の表示されるところをいつでも表示画面の中央に持っていきたいので

margin: auto;

で余白を自動で調整して中央に持っていきます。

max-width:800px;

本文を各エリアの最大の横幅を決めます。この数字以上は広げないようにして余分な余白ができないようにします。
"width"の指定だけではブラウザの幅を変更した時に固定されて全体のレイアウトが崩れる場合があるためこの指定が必要となります。

今主流の画面いっぱいの画像の配置と、本文の位置ぎめについてでした。

この記事が気に入ったらサポートをしてみませんか？