HTMLコーディングでスマホファーストにしている話

f:id:Kawan0116:20200117153857j:plain

かわんです。

HTML、CSS、jQueryでHTMLコーディングをしています。結構ムズイ(笑)。

既に制作しているサイトはPCファースト書いているので、ゴッソリとスマホファーストに変える必要があるのです。

ぶっちゃけ面倒だわな(笑)。

流れとしては・・・。

流れとしては、

PCファーストのCSS→スマホファーストのCSSに置き変え。

コピペで可能かと思いきや、中々上手くいかない。

メディアクエリで対応

CSSでPCファーストで書いていたものは根こそぎメディアクエリで対応。

要するに、普通に書いていたPC向けCSSをメディアクエリに移動する感じ。

うーん・・・。

グローバルナビでつまずく・・・。やばば・・・。くっそ、ハンバーガーメニューが上手くいかない!

結構シンドイ・・・。ま、上手くいきましたが・・・

やったw

地道に対応

10枚ほどのWebサイトがあるので、1つずつ地道に対応。

まぁ、

ホント、シンドイよね(笑)。

CSSの扱い

サイト全体のCSSを用意して、各ページそのCSSを読み込むことにしています。

なので、1枚ずつ対応と言っても、1から全てやりかえる必要はありません。

で、そのCSSでカバー出来ない時は新たにCSSファイルを作ってそこに書きこんでいます。

整理しておこう

と、まぁ、ちょっとややこしくなってきたので整理しておこう。

スマホで表示させた時、デザインが崩れない。そして、スマホで使いやすいWebサイトにする!

という感じです。

スマホ向けWebサイトを作る場合、パソコンを使うのですが、どうやって制作するのか。

それは、Atomでコーディングを行い、Chromeでデベロッパーツールで表示を確認します。これでスマホで表示した時、どんな感じになるか確認出来ます。

ぶっちゃけ便利。これがないとWebサイトを作れない。

めちゃ便利!

という感じで、Webサイト制作はとても楽しいのであります。

思う通りに出来た時は・・・

地道なコーディングをした結果、思う通りに出来た時は踊ります(笑)。

えーっと・・・。

なんでそこに余白が出来るの!?

って思うことがありますけどね。そんな時はCSSをチェックします。

100%思い通りにいかないと嫌だ(笑)。

あくまで趣味です

HTMLコーディングはあくまで趣味です。好き勝手作っています。誰かに依頼されて作ることはしません。

それをしてしまうと、まぁ、お小遣い稼ぎにはなるんでしょうけど、プレッシャーが半端ない(笑)。

あーしんどw

なので、趣味の領域で遊びます。

ま、息抜きになって良いですね。