こんにちは。ドルフィンです
スマホ向けサイトの作り方を簡単に紹介していきます。
今のウェブサイト制作は、スマホ向けコンテンツなど多種多彩に渡って大きく力を注ぐ企業が多いです。
今回はスマホ向けサイトを作るにあたって、初歩的な部分を抜粋して順番に紹介していきたいと思います。
スマホサイトに存在する2つの種類 スマホ専用サイトとレスポンシブデザイン
はじめに
スマホ対応サイトにするためには、大きく2通りの作り方が存在します
1つ目はスマホ用サイトの設立です。
PC用サイトとスマホ用サイトの２つをあらかじめ用意しておきます。
やり方はいくつかあるのですが、訪れたユーザーによって切り分けて表示するという手法です
きっちり作り込まれているサイトは、この手法を用いることが多いです。
場合によってはCSS以外の知識も必要になってきます。
2つ目がレスポンシブデザインです
これはデザインだけで、1つのサイトでPCとスマホを切り分けるというものです。
ブラウザの幅を縮めた状態でも、きちんと表示されるようにデザインを施しています。
なので厳密にはスマホ以外にもさまざまな対応が１つのサイトで可能になります
それもCSSだけで完結できるようになっています！
これは僕がウェブデザイナーを志望しはじめた2011年頃から存在して、今もなお使われ続けている手法です。
今回はこのレスポンシブデザインを学んでいきたいと思います！
bootstrap グリッドの解説と使い方
前回の記事で導入方法の紹介をした、bootstrapを使用していきたいと思います。
bootstrapの機能の１つである、グリッドシステムを使っていきます。
グリッドとは、画面のレイアウト配置を自動で均等に分けることができる機能です。
たとえば、レイアウトをきっちり2等分したいと思ったときなどに、グリッドシステムを使うと早いです。
実際の使い方を見てみましょう
<div class="row"> <div class="col-md-6 alert alert-secondary">A</div> <div class="col-md-6 alert alert-secondary">B</div> </div>
皆さんはPCで作業していると思うのですが、きっちり2等分されているかと思います。
また、PCとタブレットで見え方がそれぞれ違います。
ブラウザの幅を縮めてみてください。違いが分かるかと思います
これがレスポンシブデザインです。
グリッドデザインのコード解説 rowとcolについて
コードの説明を少しだけしておきます。覚えておくところは大きく2つです。
1つ目はrowというクラスです。一番最初にあったdivです。rowは1行という意味です。
この1行の中身は12個のカラムに分解されています。
次に、先ほどのrowの中にあるクラスでcol-md-6と書いてあるところを見ていきます。
colはカラムのことです。mdは後程書きますが、幅を縮めた時の切り替わり設定をしています。
最後の6というのがカラムの個数です。
つまり、今の状態は6つのカラムが1つのdivに入っているという事です。
6つのカラムを１つのdivに収め、そのdivが2つあるので
合計12カラムとなり、ぴったり半分ずつで表示されているのです。
3等分にしたい場合は、カラム数を4つにして、divをもう1つ足してあげると可能です。
ちなみに、12個の範囲を超えてしまったり超えなかった場合は、その部分が空白となります
コード解説は以上です。
まとめると
- rowというクラスは1行分という意味で、12個のカラムを入れることが出来る
- colとはカラムのことで、最後の数字がカラム数となり、rowの中に12個まで好きなように割り振ることが出来る。
本来ならCSSを書かなければいけないのですが、bootstrapを導入していることにより、HTMLだけでレスポンシブデザインを組むことができます。
割合を自分で決めることができるので、大変便利です。
せっかくなので、ブログっぽい形にしてみましょう
ブログ形式のレイアウトを作ってみよう
ここでは、簡単なブログ形式のレイアウトを組んでみたいと思います。
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header alert-secondary">
<h2>楽しく学ぶBootstrap</h2>
</div>
<div class="card-body">
<p>bootstrapを楽しく学んでいるでしょうか！</p>
<br>
<p>今回はグリッドシステムについてお伝えしたいと思っております</p>
<br>
<p>ブラウザの幅を縮めてみてください！レイアウトが変化したことにお気づきでしょうか？</p>
<br>
<p>まだまだ続きをやっていくので、是非読んで行ってください</p>
<br>
<br>
<p>投稿は以上です！</p>
<br>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card alert-primary">
<div class="card-header alert-primary">
<h2>最近の投稿</h2>
</div>
<div class="card-body">
<p>最近の投稿A</p>
<p>最近の投稿B</p>
<p>最近の投稿C</p>
</div>
</div>
<div class="card alert-primary">
<div class="card-header alert-primary">
<h2>カテゴリー</h2>
</div>
<div class="card-body">
<p>カテゴリーA</p>
<p>カテゴリーB</p>
<p>カテゴリーC</p>
</div>
</div>
</div>
</div>
</div>
こちらをSublimeTextで保存して、ブラウザで開いてみましょう
なんとなくですが、ひと昔前のようなブログっぽい見た目になりましたか？
今回学んだ、rowとその中のカラム数を見つけてみてください。
こんな風にしてグリッドは使われていることが多いです。
グリッドを覚えることができれば、レイアウトの要となる部分の理解につながるります。
次回はここにヘッダーを付けていきたいと思います！
コメント