Pocket
LINEで送る

制作記録全7日間/実装中に苦戦した箇所・気づいた点

iPhone 5C

コンテンツ

My Struggle to Create a Responsive Web Design …

I have finished turning this site into a responsive site!

Since I build my site with WordPress in August 2013,I had wanted to create a RWD for smartphone and tablet users.

However my plan hit a setback due to lack of skills(HTML/CSS).

So I had developed these skills in spare time.

At last I created a responsive web design from February 9 to 15.

Day 1 → Day 7

Day 1/February 9

■ I looked at the big picture of RWD with ドットインストール‘s lectures.

ドットインストール is a free online programming course
like Codecademy
.

Day 2/February 10

Media Queries and Viewport were easier than I had thought.

These are cliches!Understanding CSS inheritance made a concept of Media Queries simple.

Then I put Viewport between <head> tags. That’s it.

Day 3/February 11

■ Usage share of Internet Explorer is high in Japan.So I checked site on IE7, IE8, IE9, IE10, and IE11.Developer tools(IE10) played an active role.

Day 4/February 12

■ Making YouTube videos embed in site responsive.
■ Making a html table responsive.

Day 5/February 13

■ Making Lightbox responsive.
■ Making social media buttons responsive.
■ Installing responsive jQuery slider.

Day 6/February 14

■ For operation and maintenance,I reviewed and minified source code.

Day 7/February 15

I tested site on different devices.(Smartphone, Tablet and Laptop)
I checked site on different browsers.(Firefox, IE, Google Chrome, Safari and Opera)

Thank you for reading!

スマートフォン・タブレット用に導入したかったレスポンシブ

こんにちは、管理人です。( ̄^ ̄)ゞ

WordPressで当サイトを構築したのが昨年8月。Webサイトを完成させた勢いでレスポンシブ対応も実装しようと考えたのですが、まだ力不足であえなく頓挫しました。

あれから半年。以前と比べてHTMLとCSSコードの勘所を掴めてきた事もありレスポンシブWebデザインの実現に向けて再度挑戦する事にしました。

今回は無事完成させる事が出来たので、その制作記録をブログに書き残しておきたいと思います。

制作日数

■ 2014/2/9(日)~2014/2/15(土)

制作前と制作後の変化(レスポンシブのデメリット・心配事など)

iPad on Tanmay's jeans

■ 2カラムのPCサイトを1カラムのスマホ・タブレットサイトにするには? → floatを外しメインとサイドバーどちらもwidth: 100%;にして1カラムに。

■ 画面サイズに合わせて文字のフォントサイズを縮小するのか、読み易さは? → そのままでいい。

■ スマホ・タブレット版のメニューバーをどう実装するのか? → <select>タグでセレクトボックスを実装する。

■ PNG画像・YouTube動画の処理をどうするのか? → max-width: 100%;で処理する。

Media QueriesとViewportの敷居が高い。CSSの継承が分かっていれば簡単。決まり文句として捉える。

1日目 [2014/2/9] ドットインストール講義で全体像を掴む

dotinstall3

ドットインストールの『レスポンシブなウェブサイトを作ろう』を手始めに受講。

全11回分の講義を2周繰り返し視聴して、完成に向けてやるべき事をB5ノートに書き出しました。

その時のドットインストールの受講記録はこちらになります。

2日目 [2014/2/10] ソースコードをゴリゴリ書き出す

responsive1

上記講義の復習。(全11回分を1周)

講義内容に従ってウェブサイトがレスポンシブ対応になるよう、WordPressテーマのソースコードを書き直していきました。

書き直していく時に非常に役立ったコードがdisplay: none;

「展示していたものを無しにしてくれる」との字面通り、画面サイズの大きいPC状態の時では見せたい要素でも、画面サイズの小さいスマホ状態の時では隠しておきたい要素に対して大活躍してくれました。

また最初はとてもハードルが高く見えたMedia QueriesとViewportですが便利な決まり文句という事で、CSSファイルとHTMLファイルに繰り返し書き込んでいく内に慣れていきました。

3日目 [2014/2/11] 開発者ツールでIEの各バージョンを確認

The internet a series of tubes

各ブラウザの中でも、シェア率の高いInternet Explorerでの確認作業をしました。

最新版のIE11で問題が無い事を確認し、次にIE10付属のF12 開発者ツールでIE10~7における表示を確認しました。

その結果、スマホ・タブレット搭載のブラウザとの兼ね合いから、IE11・10・9→レスポンシブ対応、IE8・7→レスポンシブ非対応で作業を引き続き進めることにしました。

4日目 [2014/2/12] テーブル(表組み)のレスポンシブ対応に大苦戦

ブログ記事に埋め込んでいるYouTube動画と、<table>タグのテーブルをレスポンシブ対応にしていきました。

YouTube動画の処理はスムーズにいったのですが、テーブルのレスポンシブ対応処理が非常に難航しました。

最終的にテーブルの枠組みを縮小するのと同時に、テーブル枠内の文字サイズも縮小させていく事で不具合を解決しました。

5日目 [2014/2/13] ライトボックス/SNSボタン/jQueryスライダー

bxSlider

ドットインストール講義再復習。(全11回分を1周)

この日はライトボックス(Lightbox)・SNSボタン・スライダーをレスポンシブ対応にしていきました。

jQueryスライダーのbxSliderは設置方法も非常にシンプルで、この日の作業はスムーズに進みました。

6日目 [2014/2/14] ソースコードの見直しと軽量化

CSS Beautify

前日に続き、ドットインストール講義再復習。(全11回分を1周)

レスポンシブ対応になるよう書き直していったCSSファイルをCSS Beautifyで整形すると同時に、これからの運用・保守の為に不要なコードを洗い出し削除してソースコードの軽量化を図りました。

7日目 [2014/2/15] レスポンシブメニュー実装+最終チェック

Screenfly

スマホ・タブレットサイズに画面を縮小した際のメニューバー(ナビゲーション)を実装しました。

最後はScreenflyでスマホ・タブレット・PC時の各状態の表示をチェックして、各種ブラウザ(Firefox・IE・Google Chrome・Safari・Opera)で確認しました。

特にiPhone・iPadの初期ブラウザであるSafariでのスクリーン表示を重点的にチェックするようにしました。

ブログ記事まとめ [レスポンシブWebデザイン制作を通して]

実際に制作作業に取り掛かるまでは「本当に完成させることが出来るのか」「そもそも今取り掛かるべき課題なのか」と考えていたレスポンシブWebデザインでしたが、いざ実装してみるとレスポンシブ制作の手法に加えて制作工程の段取り/既存ソースコードのブラッシュアップなど得る物も数多くありました。

今後も継続してウェブサイトの改善に力を注いでいきたいと考えています!(。´ー`。)

画像の引用元 (Flickr・イラストAC)

iPhone写真
作品名 iPhone 5C
Janitors 様

ジーンズとiPad写真
作品名 iPad on Tanmay’s jeans
Chirantan Patnaik 様

アリイラスト
作品名 あり
OOtsuki。 様

Internet Explorer写真
作品名 The internet: a series of tubes
quinn.anya 様

ブログ次回更新日のお知らせ

3/1(土)前後にUP予定です。

レスポンシブ対応に既存のソースコードを書き直していった時に、CSSプロパティとHTMLタグで悩んだ箇所を書きたいと考えています。(変更あり)

開業のお悩み解決に製品・サービスの情報をまとめました↓
少しでも情報が役立てば嬉しいです

製品・サービスの公式ページで見る こんな人に見てほしいです
ウェブキャンプ :Webスキルのパーソナルジム・いつでも質問 & 豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ :実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
オンラインストアの開設は、お試し無料の カラーミーショップ で!
:日本で一番選ばれているネットショップ作成サービス・どんなに売れても【手数料0円】(2017年3月現在)・利用ショップのインタビュー記事(本当に色々なお店を取り上げている・記事数のボリュームが凄い)を読むだけでも面白いしビジネスの勉強になるがおすすめポイント。ネットショップを開業したいと現在考えているが、その方法が分からない!と悩んでいる方におすすめです。
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」
:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive
:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
Pocket
LINEで送る

比較表:説明

近況報告

コメント欄

この記事はこんな人が書いています

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。(●´ω`●)

当サイトの目標

  • 管理人はこれまでの人生で
  • 「知らないこと」で悔しい思いを何度もしてきました。
  • だから、日々調べたこと・学んだことを
  • ブログにまとめて発信しています。
  • ここでまとめた情報が少しでも役立てばとても嬉しいです。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る