プラナートの代表 松木です。今回はコーディングについて少し書いていこうと思います。
そもそも「ホームページ制作にコーディングは必要なのか？」という疑問がある方もいるかもしれません。最近ではコーディング不要で簡単にホームページが作れるものもありますが、しっかりとしたホームページを作るにはコーディングは必要不可欠と言っても過言ではありません。そして、コーディングはいろんな要素を組み合わせて構成していきますので多少なり勉強は必要になります。
さて、今回ご質問をいただいた内容は「ファーストビューの右下にボタンを配置したい」「CSSのmargin-topとtopの違いは何か？」ということです。この2つの要素は同じような意味を持っていますが、実はシーンに応じて使い分けをしなければコーディングが崩れてしまう要因の一つになってしまいます。簡単にmargin-topとtopの要素について説明をすると以下になります。
【margin-top】
使い方：余白を作るために使うもの（例：上から○px余白を開ける。など）
【top】
使い方：表示位置を指定するために使うもの（例：上から○pxの位置に表示する。など）
このように、【margin-top】は要素同士を離したい時や余白を開けたいときに使用し、【top】は位置を固定したいときに使用することができます。コーディングをしていて望み通りの結果が得られない場合は、このように適正な要素を使用できていない可能性がありますので細かく見直すようにしましょう。
またこれらの要素を記述する際に使用する【position】も4つの値があり、それぞれ使い分けが必要ですので注意するようにしましょう。
【static】
初期値です。使用することはほとんどありません。
【relative】
現在の位置を基準に相対的な位置を決めます。
【absolute】
親要素を基準に絶対的な要素を決めます。
【fixed】
画面の決まった位置に固定します。
今回のように「ファーストビューの右下にボタンを配置したい」と言った場合は、【absolute】や【fixed】を用いてコーディングしていきましょう。
非常に簡単に書きましたが、これらのように要素同士の意味をしっかりと理解し、出来る限りシンプルな記述を身につけていけるよう勉強していきましょう。それらは、SEO対策にも繋がりますし、例え担当者が途中で変わったとしても修正や改修をしていく時に手間取らなくなります。
一言でホームページ制作といっても奥が深いものです。正しいホームページを制作したいと考えている企業様は、web制作業の実績や特徴を把握した上で依頼するよう心がけましょう。
福岡のホームページ制作・各種デザイン・店舗工事｜株式会社プラナート
https://planart.co.jp/