今回はWebサイトのデザインには欠かせない、レイアウトの仕方を紹介します。
最近はスマホでWebサイトを見ることが多くなりました。
パソコンで見る時・スマホで見る時のレイアウトは柔軟に対応が必要です。
それなら、レイアウトの仕方とスマホ対応を一緒にやっちゃいましょう!!
今回はWebサイトのデザインには欠かせない、レイアウトの仕方を紹介します。
最近はスマホでWebサイトを見ることが多くなりました。
パソコンで見る時・スマホで見る時のレイアウトは柔軟に対応が必要です。
それなら、レイアウトの仕方とスマホ対応を一緒にやっちゃいましょう!!
Webサイトのレイアウトはどのように作られるのでしょうか?
実はWebサイトのレイアウトの仕方は大きく分けて2種類しかありません。
2種類だけならすぐできちゃいそうですね!!
レイアウトの仕方は大きく分けて2種類あります。
「横並びにする」方法と「好きなところに配置する」方法でWebサイトは出来ています。
この2種類の方法を作って、パソコンやスマホといった端末ごとに見やすいレイアウトを作っていきます。
要素を縦並びから横並びに変えてレイアウトしていく方法です。
たくさんの画像を横並びのしたり、メニューの項目を横並びに表示したり、さまざまなところで使われている方法です。
横並びにする方法は2通りあり、目的に合わせて使い分けます。
親要素と子要素の関係を利用して横並びにする方法です。
親要素の決めた範囲の中で子要素がすべて横並びになります。
親要素と子要素の関係を利用して横並びにする方法です。
親要素に格子状の枠を作成します。
子要素は枠の中の好きなところに配置して横並びにします。
好きなところに要素を配置する方法です。
親要素が決めた範囲内で好きなところに子要素を配置することが出来ます。
複雑なレイアウトを組みたい時にとても便利な方法です。
この2種類の方法でレイアウトを組み立てていきます。
そんなに難しくないので、とりあえずやってみましょう。
まずは、フレックスボックス横並びにしてみましょう。
フレックスボックスはたった1行で横並びに出来ちゃいます。
フレックスボックスは横並びにするためのCSSプロパティです。
親要素にフレックスボックスを指定することで、すべての子要素が横並びになります。
親要素の「ul」タグにFlexBoxを指定して、子要素をすべて横並びにします。
CSSで「display」プロパティを使って、値を「flex」を指定します。
ulタグに指定した「list-style」はなにをしているのでしょうか?
「list-style」はulタグを使った時に自動で表示される「」を操作します。
この値を「none」を指定して「」を消去しています。
liタグの「width: 100%」はなぜ指定したのでしょうか?
理由はFlexBoxの特徴を利用するために指定しています。
親要素のulタグにFlexBoxを指定して子要素のliタグを横並びにした時、liタグは自動で横幅を調整されます。
liタグの横幅を「100%」にしたものを3つ並べた時、実際の横幅は「33.33%」まで自動で縮小します。
「%」で指定している時に限りますが、柔軟に対応してくれるFlexBoxの小技です。
実はフレックスボックスは横並びにするだけではありません。
要素を中心に持ってくる機能も用意されています。
フレックスボックスには子要素を横並びにするだけではありません。
子要素の状態を操作する機能が備わっています。
「justify-content」と「align-items」というプロパティを使って子要素の中心に持ってくるといったことが出来ます。
「justify-content」は左右の間隔を揃えるプロパティです。
親要素に「justify-content」を指定して、子要素の左右の間隔を寄せたり離したりすることが出来ます。
指定できる値は「center」「flex-start」「flex-end」「space-around」「space-between」の5つが用意されています。
子要素をすべて中央寄せします。
子要素をすべて左寄せします。
子要素をすべて右寄せします。
子要素はすべて等間隔で並びます。
両端の子要素は左右に寄せて、後は等間隔で並びます。
「align-items」は上下の間隔を揃えるプロパティです。
親要素に「align-items」を指定して、子要素を上寄せ・下寄せ・中央寄せすることが出来ます。
指定できる値は「center」「flex-start」「flex-end」「baseline」の4つが用意されています。
子要素をすべて中央寄せします。
子要素をすべて上寄せします。
子要素をすべて下寄せします。
子要素のテキストの位置で揃えます。
高さがそれぞれ違う時に、テキストの位置で揃えることが出来ます。
フレックスボックスの中央寄せはテキストにも適用することが出来ます。
横幅や高さが指定されている時、なにもしなければテキストは左上にあります。
テキストを中央寄せしたい要素にフレックスボックスを使うと、テキストが中心に来るようになります。
フレックスボックスを横並びにしてたけど、やっぱ縦並びに戻したいって時ないですか?
画面が小さいスマホでは横並びのままでは不便な時があります。
スマホ対応には欠かせない機能なので知っておくとGOODです。
フレックスボックスを使って横並びにしていたものを、縦並びに戻すといったことが出来ます。
また、順番を反対に並べ替えることも出来ます。
「flex-direction」というプロパティを使って、並ぶ向きや順番を変更します。
子要素の並ぶ向きと並ぶ順番を変更するプロパティです。
親要素に「flex-direction」を指定して、子要素の並ぶ向きと並ぶ順番を変更します。
指定できる値は「row」「column」「row-reverse」「column-reverse」の4つが用意されています。
子要素をすべて横並びにします。
この値は初期値で設定されているので、使う頻度は少ないと思います。
「display: flex」だけでも同じように横並びになります。
子要素をすべて縦並びにします。
フレックスボックスで横並びにしていたものを、縦並びに戻したい時に使います。
子要素をすべて反対に並び変えて横並びにします。
右から左へ並ぶようになります。
子要素をすべて反対に並び変えて縦並びにします。
下から上へ並ぶようになります。
フレックスボックスを使って横並び・縦並びを切り替える時に注意しなければいけないことがあります。
フレックスボックスの「justify-content」と「align-items」で子要素を揃えていましたが、横並びと縦並びでは機能が反対になります。
子要素を横並びにしている時は「justify-content」は左右の間隔を揃えます。
それに対して「align-items」は上下の間隔を揃えます。
子要素を縦並びにしている時は「align-items」が左右の間隔を揃えます。
それに対して「justify-content」は上下の間隔を揃えます。
「flex-direction」で縦並びの「column」を指定している時は、反対の効果になります。
次もスマホ対応には欠かせない機能です。
先ほどは縦並びに戻してスマホ対応しました。
次の方法は、横並びのまま折り返すようにしてスマホ対応する方法です。
フレックスボックスで横並びにしている時に、画面が小さいと綺麗に収まらないことがあります。
そんな時は自動で折り返すようにしましょう。
横並びの状態で子要素が収まりきらない時、折り返すように変更するプロパティです。
指定できる値は「nowrap」「wrap」「wrap-reverse」の3つが用意されています。
「nowrap」は子要素の折り返しはしません。
親要素の大きさに収まらなかった時は、子要素が縮むことで調節されます。
この値は初期値で設定されているので、「display: flex」だけでも同じようになります。
「wrap」は子要素を折り返すようにします。
親要素の大きさに収まらなかった時は、子要素を下に折り返します。
「wrap-reverse」は子要素を折り返すようにします。
親要素の大きさに収まらなかった時は、子要素を上に折り返します。
それでは最後にこれをやってみましょう。
折り返した時に要素の位置を揃える方法です。
使う機会が多くないかもしれませんが、知っておくといざって時に使えそうですね。
フレックスボックスで子要素を折り返した時に、上下の間隔を寄せたり離したりすることが出来ます。
「align-content」というプロパティを使って、子要素の上下の間隔を変更します。
「align-content」は横並びで折り返している時に、上下の間隔を揃えるプロパティです。
指定できる値は「center」「flex-start」「flex-end」「space-around」「space-between」の5つが用意されています。
子要素をすべて中央寄せします。
子要素をすべて上寄せします。
子要素をすべて下寄せします。
子要素はすべて等間隔で並びます。
最上部と最下部に並ぶ子要素は上下に寄せて、後は等間隔で並びます。
フレックスボックス便利ですよね?
実はフレックスボックスの機能はまだまだあります。
今回はよく使うものだけを紹介しました。
ぜひいろいろお試しください。
今度はグリッドレイアアウトについて紹介していきます。
Webサイトのベースのレイアウトによく使われる方法です。
グリッドレイアウトはいくつか種類があるので、まずはそちらを紹介します。
グリッドレイアウトは格子状の枠を作って、その枠に配置する方法でレイアウトします。
枠にはめる位置は自由に決めることが出来るので、好きなレイアウトを作成することが出来ます。
グリッドを作成する方法は「エリアベース」と「ラインベース」の2種類の書き方があります。
エリアベースで作成する時は、上の図のように「ヘッダー」「サブ」「メイン」「フッター」の4つのエリアに名前を付けて分割します。
名前が付いた4つのエリアにそれぞれ配置して、レイアウトを作成します。
ラインベースで作成する時は、上の図のように縦と横にラインを引いて分割します。
引いたラインが縦横に交わって、格子状の枠を作成します。
「このラインからこのラインまで」といったように配置して、レイアウトを作成します。
左上から番号が割り振られた1〜4の番号は、子要素の配置を指定する時に使用します。
また、割り振られた番号は反対から数えることも可能です。
反対から指定する場合は-1〜-4のようにマイナス値で指定します。
グリッドレイアウトは2種類のやり方があります。
正直どちらの方法でも結果は変わりません。
自分にあった方法で大丈夫だと思います。
まず最初は、エリアベースからやってみましょう。
エリアベースのグリッドレイアウトは、名前付きのエリアを作成して分割します。
「title」「title」「time」「list」の4つのエリアを作成してそれぞれ配置します。
「title」「title」「time」「list」の4つのエリアに分割してグリッドを作成します。
グリッドの左側を「100px」に固定して右側は自動的に調整されるようにします。
子要素をどこのエリアに配置するか指定します。
「title」「title」「time」「list」の4つのエリアに配置します。
「スケジュール」の文字が入ったクラスを「title」エリアに配置します。
同じ名前のエリアが複数ある時は、結合して一つのエリアになります。
時計の画像と時刻があるクラスを「time」エリアに配置します。
やることリストが入ったクラスを「list」エリアに配置します。
意外と簡単でしたね!!
エリアベースの書き方は直感的に書くとこが出来ます。
次は少し自由度が高いラインベースの書き方をやってみましょう。
ラインベースのグリッドレイアウトは、縦と横に区切り線を引いて分割します。
区切り線の本数と間隔は自由に決めることが出来るので、複雑なレイアウトも作成することが出来ます。
縦(column)と横(row)のラインを引いてグリッドを作成します。
縦ラインを「1fr」の間隔で4本の区切り線を引きます。
「1fr」はグリッドレイアウト特有の単位で比率で大きさを決めます。
今回の場合は「1fr 1fr 1fr」と指定するので、「1 : 1 : 1」の比率で広がります。
横ラインは「auto」と「300px」の間隔で5本の区切り線を引きます。
一番上だけ「auto」にして、中の要素の高さに合わせるようにします。
残りは「300px」の大きさで高さを固定します。
グリッドレイアウト特有の「fr」という単位は大きさの比率を表しています。
「1fr 2fr 1fr」の場合は「1 : 2 : 1」の比率で広がります。
もし「40px 1fr 2fr」のように「px」の固定値がある場合は、40pxを固定して残りを「1 : 2」の比率で広がります。
子要素をどこのエリアに配置するか指定します。
ラインベースのグリッドは区切り線を作成する時に、区切り線に自動で番号は振られます。
割り振られた番号を使って「このラインからこのラインまで」といったように範囲を決めて配置します。
タイトルを一番上の両端に合わせて配置します。
両端の1と4を指定して、タイトルを両端まで広げます。
縦方向の位置はグリッドの特性を使います。
グリッドの配置は指定がない時は、左上から空いてるところから自動で配置されます。
この特性を利用して、縦方向の位置は指定していません。
縦と横の枠を2個ずつ使って画像の2を大きく配置します。
左右は1と3、上下は2と4を指定して配置します。
横の枠を2個使って画像の2を細長く配置します。
今回は配置する時にマイナス値で指定します。
左右は-3と-1、上下は-2と-1を指定して配置します。
グリッドに配置する時はマイナス値で指定することが出来ます。
グリッドのラインを反対から数える時は、配置番号の開始と終了を「マイナス値」で指定することが出来ます。
今回は画像を右下に配置するので、反対から数えた方が都合がよかったため全てマイナス値で指定しています。
ちなみに下記の書き方でも構いません。
残りの456の画像はあえてなにも指定しません。
グリッドの特性を利用して、左上から空いている枠に自動で配置されます。
画像を複数使用する時は、画像の大きさにどうしてもバラつきが出てしまいます。
そんな時は「object-fit」というプロパティを使って揃えることが出来ます。
画像や動画のサイズが合わない時に、どのように揃えるか決めることが出来ます。
object-fitの値を「cover」にすることで、画像や動画の比率を保ちながら綺麗に揃えてくれます。
ただし、画像の大きさを指定していないと「object-fit」は効かないので、必ず大きさを指定してください。
ラインベースはグリッドの大きさや配置位置を自由に決められます。
Webサイトのレイアウトによく使われる方法です。
最後に、ラインベースを使いやすくするためにカスタマイズしてみましょう。
この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。
建物全体が白を基調に美しい街並みが広がり、まるでたくさんの雪が積もっているかのよう。
また夜になると街全体がオレンジに灯り始め、なんとも幻想的な景色が広がります。
この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。
ラインベースでグリッドを作成する時に、ラインに「left」「right」「title」「main」といった名前を付けることが出来ます。
名前付きのラインを作成する時は、[]で名前を囲って作成します。
縦ラインの左から順に「left」「second」「third」「right」の名前がついたラインを作成します。
それぞれのラインの間隔は「20px」「1fr」「20px」の大きさを空けます。
横ラインの上から順に「title」「image」「main」「footer」「bottom」の名前がついたラインを作成します。
それぞれのラインの間隔はすべて「auto」にして、要素の高さで柔軟に対応するようにします。
グリッドラインの名前を使って、子要素を配置します。
通常のラインベースの配置の書き方とほとんど同じです。
サントリーニ島の北西部にある「イア」...
タイトルを一番上に配置します。
上下は「title」「image」左右は「second」「third」を指定します。
サントリーニ島の北西部にある「イア」...
画像をタイトルの下に配置します。
上下は「image」「main」左右は「left」「right」を指定します。
サントリーニ島の北西部にある「イア」...
メインの記事を配置します。
上下は「main」「footer」左右は「second」「third」を指定します。
一番下にフッターを配置します。
上下は「footer」「bottom」左右は「left」「right」を指定します。
以上でグリッドレイアウトは終了です。
お疲れ様でした。
一度理解すればなんてことないと思います。
ちょっとずつ頑張っていきましょう。
今度は好きなところに配置する方法をやってみましょう。
好きなところといっても、動かせる範囲を決めて配置します。
要素を好きな時に配置する時、動かせる範囲を決めます。
決めれた範囲の中で「ここに配置する!!」と明確に指定する必要があります。
場所の指定をする時は「子要素の左上の部分を親要素の左上に置く」と指定して配置します。
ポジションの種類がいくつかあり、使い分けが必要になります。
ポジションには「static」「relative」「absolute」「fixed」の4種類あります。
ですが、実際よく使われるのは3種類だけです。
初期値で設定されている値です
初期値の「static」の状態だと配置が出来ないため、この値を「relative」「absolute」「fixed」のどれかに変更して配置します。
配置が出来る範囲を設定する値です。
この値が設定されている要素の中を自由に移動が出来ます。
親要素に「relative」子要素に「absolute」という関係でセットで使います。
配置する場所を設定する値です。
親要素の「relative」の範囲の中で移動することが出来ます。
画面に固定して配置する値です。
パソコンやスマホなどの画面の中で、スクロールしても付いてくるようになります。
例としてはこのサイトの右下にあるが「fixed」の値で、画面の右下に固定してあります。
「relative」「absolute」「fixed」を使い分けが重要です。
それでは、実際にやってみましょう!!
親要素の「paris」クラスに「relative」を設定します。
「paris」クラスの中にある子要素は、「paris」クラスの範囲の中で移動が出来る状態になります。
「absolute」を使って「paris」クラスの中にある子要素を配置していきます。
今回は「place」クラスと「date」クラスの2つの要素を配置します。
「place」クラスの左上を親要素の「paris」クラスの左上に合わせます。
「top」と「left」を使って、親要素の左上から「0px」離して配置します。
値が「0px」の時は、「0」で省略することが出来ます。
「date」クラスの右下を親要素の「paris」クラスの右下に合わせます。
「bottom」と「right」を使って、親要素の左上から「0px」離して配置します。
要素を移動する時の「top」「left」「right」「bottom」ってなにを基準にしてるの?
どれも要素の角を基準にしていますが、組み合わせによってどの角が基準になるのか変わってきます。
「top」と「left」を指定した時は要素の左上が基準になります。
「top」と「right」を指定した時は要素の右上が基準になります。
「left」と「bottom」を指定した時は要素の左下が基準になります。
「right」と「bottom」を指定した時は要素の右下が基準になります。
「top」「left」「right」「bottom」を指定した時は要素のすべての角が基準になります。
値がすべて「0」の時は、親要素と同じ大きさになるまで広がります。
親要素に「relative」子要素に「absolute」をセットで覚えておきましょう。
「relative」がないと動かないので注意してください。
画面の右下にヒツジが出来ます。
画面にくっついてるので、スクロールしてもずっと付いていきます。
ちなみに右下のヒツジを押すと帰ります。
「sheep」クラスの画像をパソコンやスマホなどの画面に固定して、スクロールしても付いてくるようにします。
「fixed」を使って「sheep」クラスを画面の右下に固定します。
画面の右から「40px」下から「120px」離して固定します。
そんなに難しくないですね。
「fixed」でよく使うものは画面に固定して、使いやすいサイトにしちゃいましょう。
実は「fixed」によく似た方法がもう一つあります。
「sticky」はパソコンやスマホなどの画面に固定して、スクロールしても付いてくるようにします。
スクロールしても画面に付いてくる点では「fixed」同じですが、「sticky」と「fixed」に違いは、画面に固定されるタイミングは違います。
「sticky」は「fixed」とよく似ていますが、固定されるタイミングと動作に違いがあります。
スクロールをして「sticky」が指定された要素が画面の上部まで来たら画面に固定されます。
「fixed」の場合は、最初から画面に固定されているのに対して、「sticky」は要素が上部まで来たら固定されます。
「sticky」を指定した要素は、その親要素の中でしか画面に固定されません。
スクロールして親要素の高さを超えると、「sticky」は画面の外に出るので固定されなくなります。
「top」で画面の上からどの位置で固定するか決めることが出来ます。
「top」が指定されていなかった場合は「sticky」は動きません。
必ず「sticky」と「top」はセットで書きましょう。
「sticky」は楽しい動きをしますね!!
ちょっと使うのに慣れが必要かもしれませんが、使い道は無限大です!!
最近よく聞かれる「スマホ対応」という言葉。
「意味はわかるけど、なにするの?」について答えて行こうと思います。
そもそもスマホ対応ってなんでしょうか?
スマホ対応とは、簡単に言うとスマホでも見やすいページにするという意味で使われます。
他にも「スマホ対応」と意味が似た「モバイルフレンドリー」と「レスポンシブ対応」という言葉があります。
モバイルフレンドリーとは、スマホやタブレットのようなモバイル端末でもWebサイトを見やすく・使いやすい(フレンドリーな)Webサイトのことを言います。
レスポンシブ対応とは画面の大きさで向きでデザインやレイアウトを細かく変えて「モバイルフレンドリー」にするための対応のことを言います。
具体的にはブラウザの大きさでレイアウトやデザインを変える方法があります。
CSSで「360px」以下の時はこのレイアウト、「760px」以下の時はこのデザインのように、「メディアクエリ」というものを使ってCSSを分けることが出来ます。
簡単にやり方をいうと「メディアクエリ」というものを使えばスマホ対応が出来ます。
さっそくメディアクエリを使ってみましょう。
メディアクエリはブラウザの大きさごとにリアルタイムでCSSを変更してくれます。
ブラウザの大きさは「px」で判断されます。
下記のようにCSSを書いた場合、ブラウザの大きさが「460px以下」の時に、CSSスタイルを上書きして適用します。
「461px」以上の大きさの時はCSSスタイルは上書きされません。
画面が小さくなった時にCSSスタイルを上書きするようなイメージになります。
下記のようにCSSを書いた場合、ブラウザの大きさが「460px以上」の時に、CSSスタイルを上書きして適用します。
「max-width」時とは反対に「459px」以下の大きさの時はCSSスタイルは上書きされません。
画面が大きくなった時にCSSスタイルを上書きするようなイメージになります。
ブラウザ(ビューポート)の大きさが縦長の時にCSSスタイルを適用します。
正確には横幅より縦幅の方が大きい時にスタイルが適用されます。
必ずしもスマホを縦向きにした時という訳ではないので注意してください。
ブラウザ(ビューポート)の大きさが横長の時にCSSスタイルを適用します。
正確には縦幅より横幅の方が大きい時にスタイルが適用されます。
必ずしもスマホを横向きにした時という訳ではないので注意してください。
今回メディアクエリで切り替えるプロパティは「display」を使用しました。
「display」を使って要素を表示したり非表示にすることが出来ます。
displayの値を「none」を指定するとその要素は消えて見えなくなります。
displayの値を「block」を指定するとその要素が表示されます。
正確には「none」以外の「block」「flex」「grid」などを指定すると表示されます。
レイアウトは「FlexBox」「Grid」「Postion」の3つ方法。
スマホ対応は「メディアクエリ」でCSSを変更。
これをすべて習得したら、本格的なWEbサイトが作成が出来ます。
それでは、実際に作ってみましょう。
「FlexBox」「Grid」「Postion」「メディアクエリ」すべて使って旅館風のホームページを作ってみます。
復習や腕試しにどうですか??