Takako Style

Takako Style

トップ > 記事一覧 > スマホ対応サイト(レスポンシブデザイン/Bootstrap4)

スマホ対応サイト(レスポンシブデザイン/Bootstrap4)

2017/07/21(金)
スマホ対応にしてほしいというご要望にお応えする場合、色々な方法があると思いますが、私は管理の楽なレスポンシブデザインをおすすめしています。

ご存知ない方のために、説明してみますね。

なぜ管理が楽かというと、一つのページを伸縮することで、PCにもスマホにも対応しているからです。

これに対して、PC用、スマホ用、別々にページをつくった場合、変更が必要な時に、ぞれぞれ変更しなければならず、手間が2倍、ミスが発生する確率も2倍に増えますよね。

制作者によって、様々なつくり方があると思いますが、私の場合は、CSSのフレームワークの一種「ブートストラップ」が便利で重宝しています。

【CSS】
Cascading Style Sheets (CSS)とは、HTML や XML (XHTML・SVGなどを含む)で記述された文書の体裁や見栄えを表現するために用いられるスタイルシート言語
※MDMより

多機能ですが、特にグリッドシステムが使いやすいので、それをメインに使っています。グリッドシステムは、表示するデバイス(スマホなのか、タブレットなのか、小さいサイズのモニターなのか、大きいサイズのモニターなのか)を、自動で判別して、表示を切り替えてくれるシステムです。

それで、bootstrapにもVer.(バージョン)がありまして、これまではVer.3を使っていたのですが、Flexboxという新機能が盛り込まれているVer.4をこれから使ってみることにしました。Flexboxは、レイアウトを楽にしてくれるCSSのひとつとでもいったらよいでしょうか。これまではIE9(InternetExplorer9)に対応していないことがネックで、取り入れることを躊躇していましたが、IE9のブラウザのシェアも1%を切りましたので、そろそろ導入するのも良いかと、感じています。

ちなみに、Bootstrap4については、こちらのサイトを参考にさせていただきました。わかりやすかったです。

▼Bootstrap4 alpha.6
https://kuroko.goat.me/5P5VXJcJ

そのようなわけで、本日午後は、お勉強デー(タイム?)でしたが、明日からは、覚えたことを使って実際に、制作していきます。某社のリクルートサイト、今月末までに、ある程度カタチにするお約束をしていました。ちなみに、就職活動をする学生さんは、情報を、きっとスマホで探すのでは、ということで、スマホ対応サイトを制作させていただくことになりました。

たいてい、いくつかのサイトを並行して制作させていただいているのですが、打ち合わせを重ねたり、新しい知識や技術を加えながら、少しずつ育てたものを、世に放つ、そんな感じといったら大げさでしょうかね。

世に放たれると、そのサイトには、新たな力が吹き込まれて、手を離れていく、そんな心境になるんですよ。

▼カードリーディング
自分の内側を深く掘り下げるのが好きな方、内側を知って暮らしに活かしたい方、セルフ・セラピー・カードリーディングを随時、承っています。ご予約はこちらからどうぞ。

※ご希望の日時を第三希望までお知らせください。

【人生の目的を知る/セルフ・セラピー・カードリーディング】
日時:平日 月曜~土曜 10~15時までのご希望の時間帯
40分/3,500円(税込)
場所:カフェ&温アップサロンwith啓



▼WEB制作
これまで、こちらで制作されたことのある方については、随時、一部変更を承っております。新しく立ち上げる場合については、状況により、対応可能な場合もあります(7/21現在/お盆過ぎ頃より対応可能)詳しくは、ご相談ください。

【制作中のサイト】
・デザイン書道のポートフォリオサイト(7月公開予定)
・シルクベビードレスの販売サイト(9月公開予定)
・某社リクルートサイト(9月公開予定)
・某社サイトのスマホ対応(7月制作開始予定)
など

【人気のメニュー】
・既存のサイトのスマホ対応
・広告のない独自ドメインのオリジナルデザインブログ
・スライドショーの一部導入
など

Comment Box is loading comments...