本日はホームページ修正を行いました。
— 枠のサイズ
Bootstrapを使用しているので、12の枠をどのように分けるか決めていきます。
・2の枠の余白、8の枠に画像、2の枠の余白では画像が大きく
・3の枠の余白、6の枠に画像、3の枠の余白では画像が小さい
場合、
・2の枠の余白、8の枠に画像、2の枠の余白
としておいて、画像の左右に余白をつけます。
余白はhtmlに余白をつける場所を特定するための名前（class名）をつけておき、cssでその名前に対して余白を設定します。
余白は、marginとpaddingがありますが、今回はpaddingを使用しました。
padding: 0 150px;
とすると、上下の余白は0、左右の余白は150pxになります。
— スマホ対応
PCで見たときは丁度良いサイズでも、スマホで見ると余白が広くなりすぎて画像が小さくなってしまいます。
スマホのときは余白をなしにします。
@media screen and (max-width: 768px) {
.classname { padding: 0; }
}
で、classnameの余白が0になります。
— リンクの削除や追加
リンクはaタグを使用します。
aタグを削除したり、追加することでリンクの削除や追加ができます。
— 背景画像
パララックス（視差効果）に対応した背景画像はcssで表示しています。
htmlにcssで指定してあるclass名を指定すると、その画像を背景として表示できます。
— 背景の色
背景の色もcssで指定してあります。
htmlにcssで指定してあるclass名を指定すると、その色になります。
— データのアップロード
契約しているレンタルサーバーにデータをアップロードするとそのデータが公開されます。