ウェブサイトの構築方法
どのように表示されるかを考えながら、コーディングしていきます。ビジュアルデザインをイメージしながら、法則に従って、文字列を使って表現していくというわけです。
メモ帳などの簡単なテキストエディタでアイデアを形にしていき、Visual Studio Codeを使って、構築していきます。基本的には、htmlで、ウェブページの構造を造り、CSSを使って装飾を加えていきます。
WYSIWYG(What You See Is What You Get/見たままが得られる)を採用したウェブオーサリングツールもありますが、思ってもいない不要なコードを生成してしまうことがあります。ちょうどカメラのマニュアルモードとオートモードで撮影する時と似ている気がします。どちらもうまく組み合わせて、シチュエーションで使い分けることができると思います。
レスポンシブウェブサイト
レスポンシブウェブサイトのデザインは、Webページをさまざまなスクリーンサイズで表示できるように開発する方法です。当サイトのSpyder CHECKR 24ページで、カラーチャートを掲載しています。
レスポンシブを意識しないで作ってしまうと、デスクトップパソコンで表示すると、きれいに表示されているのに、画面サイズの小さいスマホなどでは、画面幅に収まり切れず、切れて表示されてしまうということが起きてしまいます。
古いやり方で、デザインをすると、このような現象になってしまうことがあります。以下にコードを見ていただくと分かるように、Tableの表組の中に、背景色などを記述しています。大きな画面サイズでは、それほど分かりませんが、サイズを可変していくと、はみ出してしまいます。
See the Pen
Not a good use of the table by webcreator365 (@webcreator365)
on CodePen.
新しい方法を使ってみる
いつも同じ方法ばかりだと、進歩しないので、時には、新しい方法にチャレンジしてみます。厳密には、間違っているところもあるかもしれませんが、今回は、グリッドレイアウトを使ってみました。
コンテナ-親要素(grid)
grid-template-columnsで、横軸のアイテム数を設定します。6枠を画面比率に合わせて、均等に配列する設定です。
grid-template-rowsで、縦軸のアイテム数を設定します。4枠を画面に合わせて、均等に配列する設定です。
gapとpaddingで、アイテムとアイテムの間の枠組みの太さを設定します。
.grid {
display: grid;
gap: 10px;
padding:10px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
background-color:#111;
}
24個のアイテム-子要素(item)
item1～24を、以下のように記述しています。
display: flex;で、フレックスコンテナを指定します。
align-items:とjustify-content:で、アイテム同士が、縦横等間隔になるように指定します。
font-size: clampで、clamp関数を使って、フォントの最小値、推奨値、最大値を指定してあげます。ウインドウ幅を縮小した場合、最小値から最大値の範囲で可変します。Clamp Generator
font-size: 12px;で、念のためclamp関数が使えないブラウザ用に定義しておきます。
.item1 {
display: flex;
align-items: center;
justify-content: center;
background-color:#343434;
color:#c8c8c8;
font-size: 12px;
font-size: clamp(6px, 1vw, 12px);
text-align: center;
}
全体のコード部分を以下に掲載しますが、グリッドレイアウトだと、アイテムのスタイルが一緒の場合は、シンプルになりますが、24アイテムあると、記述が長くなってしまいます。後で、編集しなおすときに、探すのも大変になります。
See the Pen
Spyder CHECKR24 by webcreator365 (@webcreator365)
on CodePen.
このように失敗と改善を繰り返しながら、他の優秀なコーダーのアイデアなどを参考に、コーディングしております。
