実習！パスワードジェネレータを作ろう03

スマホにはレスポンシブ・ウェブ・デザインで振り分けで学習したことを、さっそくパスワードジェネレータに適用して、モバイル対応してみましょう。

viewportとmediaを設定しよう

まず、モバイル対応にするためにHTMLの<meta>内に次のタグを追加します。

次に、<style>内にmediaを追加します。

	@media screen and (max-width:480px){
		/* ここに書く */
	}

max-widthというのは最大の幅の条件を指定するもので「width <= 480px」という意味です。「<」という記号はHTMLでも使うので都合が悪かったみたいです。

これで、デバイスの幅が480px以下の場合はこの{ブロック内}のスタイルが適用されるようになります。この{ブロック}以外は全ての場合に適用されるスタイルで、この{ブロック}内のスタイルは、条件に合った場合に上書きされるスタイルである、と考えるとわかりやすいです。

なので、モバイル用のスタイルをメインで書いて、デスクトップ向けのスタイルを上書きさせるという進め方でも構いません。その場合の条件は、@media screen and (min-width:481px)のようになるでしょう。

デベロッパーツールを使おう

この作業は、実際にスマホでアクセスしながらでも良いですが、ブラウザのデベロッパーツールの機能を使うことをおすすめします。

Chromeであれば、左上のスマホのアイコンをクリックすると表示がスマホ用に切り替わります。

モバイル用のスタイルを書いていこう

ソースを見ればわかるように、幅を100%に切り替えてコンテンツをデバイス画面にフィットさせています。画面いっぱいだと狭い感じになってしまうのでpaddingも適当に設定しています。

今回のこのパスワードジェネレータではパスワード表示欄の数を16個から1個に減らしていますが、あとはpaddingとmarginなどによってパーツの間隔を調整していくのがモバイル対応では基本になると思います。

さいごに

これでパスワードジェネレータは完成です。

このページはCSSもJSもひとつにまとめてあるので、ソースを見れば全てがわかるようになっています。不明な点はソースを見て学習しましょう。