MENU
カテゴリー

KDC : Web演習 中期 第4回

Web制作の現場で闘うために必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載します。

中期 第4回目では、前回学んだコンポーネント「Width」の続きと、グリッドをレスポンシブ対応するための方法を学びます。

目次

前回のおさらい

画像でざっくり復習

あわせて読みたい
KDC : Web演習 中期 第3回 Web制作の現場で闘うために必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載します。 中期...

Width設定の続き

「Auto」と「Expand」

https://getuikit.com/docs/width#auto-amp-expand

子要素の横幅が決まっていない時、中身に応じて横幅を指定したい時に使用します。
autoとexpandは組み合わせて使います。

早見表

子要素に指定

[Auto]中身にあわせた横幅になる

.uk-width-auto

[Expand]埋められてないグリッドの残りスペース分、幅を拡張する

.uk-width-expand

親要素に指定

[Auto]コンテンツに合わせて、グリッドの中身を一律の横幅にする

.uk-child-width-auto

[Expand]親コンテナの余白を埋める形で、グリッドの中身を一律の横幅にする。
埋めるように分割することからどんなに中身が増えても1行に収めるため、子要素の数が多い場合は見づらくなります。

.uk-child-width-expand

「Auto」と「Expand」の記述例

子要素に対して「Auto」と「Expand」で分割数を指定した場合

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container">
		<!-- グリッドの始まり -->
		<div uk-grid>
			<!-- Autoの始まり -->
			<div class="uk-width-auto">
				<div class="uk-card uk-card-default uk-card-body">Auto</div>
			</div>
			<!-- Autoの終わり -->
			<!-- Expandの始まり -->
			<div class="uk-width-expand">
				<div class="uk-card uk-card-default uk-card-body">Expandの枠に入ったテキスト</div>
			</div>
			<!-- Expandの終わり -->
		</div>
		<!-- グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

親要素に対して「Expand」で分割数を一律に指定する場合

親コンテナの余白を埋める形で、グリッドの中身を一律で分割

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container">
		<!-- 「Expand」グリッドの始まり -->
		<div class="uk-grid-small uk-child-width-expand uk-text-center" uk-grid>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ1</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ2</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ3</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ4</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ5</p></div>
			</div>
		</div>
		<!-- 「Expand」グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

親要素に対して「Expand」で分割数を一律に指定し、途中の子要素に個別で幅を指定する場合

少しややこしいですが、子要素1つだけに幅を指定し、残りは「Expand」という並び方も可能です。

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container">
		<!-- 「Expand」グリッドの始まり -->
		<div class="uk-grid-small uk-child-width-expand uk-text-center" uk-grid>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ1</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ2</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ3</p></div>
			</div>
			<div class="uk-width-1-2">
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ4</p></div>
			</div>
			<div>
				<div class="uk-card uk-card-default uk-card-body"><p>コンテンツ5</p></div>
			</div>
		</div>
		<!-- 「Expand」グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

レスポンシブ対応

そのグリッド、タブレットではどのように表示させる?パソコンの場合は?大画面のモニターの場合は?

様々なディスプレイサイズに合わせてグリッドを変えたい場合、レスポンシブ対応が必要です。
UIkitでは、「@~」が付いたCSSクラスを記載する方法でレスポンシブ対応を行います。

具体的には、4つのブレイクポイントが用意されています。

ブレイクポイントとは?

画面サイズごとにデザインを切り替えるポイント(切り替え地点)のこと。
画面サイズが ***px 以上の時はこの組み方、****px 以上の時はこの組み方といったようにアクセスする端末(スマートフォンやパソコン)の画面サイズによって切り替えることができます。

@sデバイスの幅が 640px 以上の場合に指定した数値で分割
スマートフォンよりも大きい画面(タブレット等)向けに設定を行う時
@mデバイスの幅が 960px 以上の場合に指定した数値で分割
↑タブレットよりも大きい画面(ラップトップ=ノートPC)向けに設定を行う時
@lデバイスの幅が 1200px 以上の場合に指定した数値で分割
↑ラップトップ(ノートPC)よりも大きい画面(デスクトップPC)向けに設定を行う時
@xlデバイスの幅が 1600px 以上の場合に指定した数値で分割
↑より大きいフルHDサイズ(1920px等)の画面(モニター)向けに設定を行う時

UIkitはモバイルファースト設計のため、基本的なWidthの書き方は以下の記述で問題ないです。

.uk-width-*
.uk-child-width-*

* には、1-1、2-1、4-6、などの数字が入ります

モバイルファーストとは?

モバイルファーストとは、「モバイルデバイスを最優先にしたデザインの考え方」であり、サイトの設計工程において、モバイルユーザーのニーズを最初に考慮し、その後にデスクトップ向けのデザインを拡充するという考え方です。スマートフォン向けWebサイトのみを作ったりすることではなく、デスクトップ向けのウェブサイトを完全に無視ということではありません。

設定項目

https://getuikit.com/docs/width#responsive-width

早見表

* には、1-1、2-1、4-6、などの数字が入ります

デバイスの幅が 640px 以上の場合に指定した数値で分割
スマートフォンよりも大きい画面(タブレット等)向けに設定を行う時

.uk-width-*@s
.uk-child-width-*@s	

デバイスの幅が 960px 以上の場合に指定した数値で分割
↑タブレットよりも大きい画面(ラップトップ=ノートPC)向けに設定を行う時

.uk-width-*@m
.uk-child-width-*@m

デバイスの幅が 1200px 以上の場合に指定した数値で分割
↑ラップトップ(ノートPC)よりも大きい画面(デスクトップPC)向けに設定を行う時

.uk-width-*@l
.uk-child-width-*@l

デバイスの幅が 1600px 以上の場合に指定した数値で分割
↑より大きいフルHDサイズ(1920px等)の画面(モニター)向けに設定を行う時

.uk-width-*@xl
.uk-child-width-*@xl

レスポンシブ対応の記述例

スマホの時は1カラム、タブレットは2カラム、PCは3カラムの場合

子要素に指定したバージョン、親要素に指定したバージョンの2つを用意しました。
コードを手元にコピペしたら、ブラウザの画面幅をぐりぐり動かしてみて(もしくは検証ツールでデバイス幅を変更)

子要素にそれぞれ指定したバージョン

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container uk-container-xsmall">
		<!-- グリッドの始まり -->
		<!-- 子要素にそれぞれ指定 -->
		<div class="uk-grid-large uk-grid-match" uk-grid>
			<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
				<div>コンテンツ1</div>
			</div>
			<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
				<div>コンテンツ2</div>
			</div>
			<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">
				<div>コンテンツ3</div>
			</div>
		</div>
		<!-- グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

親要素に一括指定したバージョン

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container uk-container-xsmall">
		<!-- グリッドの始まり -->
		<!-- 親要素に一括指定した場合 -->
		<div class="uk-grid-large uk-grid-match uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
			<div>コンテンツ1</div>
			<div>コンテンツ2</div>
			<div>コンテンツ3</div>
		</div>
		<!-- グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

子要素に対して「Auto」と「Expand」で分割数を指定した場合

先ほどの「Auto」と「Expand」の記述例をカスタマイズしてみましょう

<!-- セクションの始まり -->
<div class="uk-section uk-section-primary">
	<!-- コンテナの始まり -->
	<div class="uk-container">
		<!-- グリッドの始まり -->
		<div uk-grid>
			<!-- Autoの始まり -->
			<div class="uk-width-auto uk-width-1-2@s uk-width-1-3@m">
				<div class="uk-card uk-card-default uk-card-body">
					<div>Auto</div>
				</div>
			</div>
			<!-- Autoの終わり -->
			<!-- Expandの始まり -->
			<div class="uk-width-expand">
				<div class="uk-card uk-card-default uk-card-body">
					<div>Expandの枠に入ったテキスト</div>
				</div>
			</div>
			<!-- Expandの終わり -->
		</div>
		<!-- グリッドの終わり -->
	</div>
	<!-- コンテナの終わり -->
</div>
<!-- セクションの終わり -->

解説

左側の「Auto」を以下のように変更しています。

<div class="uk-width-auto">

<div class="uk-width-auto uk-width-1-2@s uk-width-1-3@m">

上記を翻訳すると、以下のようになります。

画面幅が

  • スマホ表示(640px以下)の時は中身に合わせた横幅(Auto)になる
  • タブレット等(640px以上)では全体を2分割し、そのうちの1/21-2の横幅になる
  • ラップトップ(960px以上)では全体を3分割し、そのうちの1/31-3の横幅になる

理解できたら、末尾の数値を変更したり、「Expand」側のクラスもカスタムしてみよう!

おさらい

AutoとExpandグリッドをどう分割するか、指定する為の横幅の設定
・子要素の横幅が決まっていない時、中身に応じて横幅を指定したい時に使用
・autoとexpandは組み合わせて使う
レスポンシブ対応「@~」が付いたCSSクラスの記載が必要
・4つのブレイクポイントを使い分ける
・スマホファースト設計なので、スマホのデバイス幅を基準とした指定方法

Dreamweaverで確認してみよう

今回紹介したコードをDreamweaverに貼り付けて、どのような見た目を作ることができるのか、確認しましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Sunnana Inc. / Web Designer
熊デザ16期生。紙媒体広告やWebのデザイン、サイトの立ち上げから運営まで幅広く担当。料理にどハマリ中。

目次