一番簡単なスマホ対応ページの作り方
スマホに対応したホームページの作り方(手法)はたくさんありますので、一概には言えませんが、超初心者向けに、これやっときゃ間違いないっていう簡単な方法を紹介します。(あくまでも一例なのでちゃんと勉強したい方は、基礎からやったほうが良いです)
1)形式はHTML5で作る
2)<head>の中にメタ Viewport のタグを入れる
<meta name="viewport" content="width=device-width"> |
Viewportについての詳しい解説はこちら >Viewport
3)HTML5のルールにしたがってコーディングしていきます
例 HTML5の基本的な書き方をまとめてみました | webデザイン | web is a creation
まずはここから!HTMLの書き方【初心者向け】 | TechAcademyマガジン
4)cssはPC用のスタイルを書いて直後にメディアクエリで条件付きで上書きしていく
いろいろやり方がありますが、私はPC用のスタイルを書いていって、その直後でメディアクエリでスマホ用をこまめに上書きしていく、ひとつのスタイルに、PC用・スマホ用を繰り返しながら記述していく方法がなれていてやりやすいです。
(これはコーダーさんの好みにより分かれるところでスマホ用+全部のデバイス用を記述して、最後にPC用を書く人の方が多いのかもしれません)
例えば下記は、imgタグにクラスphotoLがついていたら、左フロートで文字を右に流しこむ(PC用)ですが、ブラウザ幅が700px以下になったときに、フロートを解除し、幅はmaxで100%になるようにという指定です。
img.photoL{ img.photoR{ img.photoR{ ↓この下にどんどんcssを追加していきますが、全部、PC用とスマホ用がセットになります |
メディアクエリで条件を切り替える数字(ブラウザ幅)をいくつにするかは、サイトの考え方によります。
PC用、タブレット用、スマホ用の3パターン作る時もあります。
5)確認方法は実際にスマホでやるのが一番ですが、GoogleChromeだと簡単にできます。
GoogleChromeで表示させておいて、右クリックで検証をクリック
すると、検証のマドが開くので、スマホマークをクリックするだけです。
事例>焼肉の街 飯田 | 【天然ジビエと珍しいお肉通販/肉のスズキヤ】
6)ページトップへ戻るボタン
縦に長いページになったのでトップへ戻るボタンを常に左下に表示させたいです。
こちらのページを参考に入れてみました。
[JavaScript] jQuery を使わずにスクロールでトップに戻るボタンを表示する – rakuishi.com
<a href=”#wrapper” onclick=”scrollToTop(); return false” id=”scroll-to-top” class=”scroll-to-top-not-display”>▲Top</a> |
<script> } </script> |
#scroll-to-top { |
長いURLがつきぬけてしまう場合
テキストの中に長いURLがあると、外側のBOXを突き抜けて長く表示されてしまい、表示が崩れたり、スマホでスワイプしたときに左右にふらふらと振れてしまうことがあります。
そんなときはこのスタイルが有効
word-break:break-all
- 前の記事
- cssのpositionはあまり使いません
- 次の記事
- 信州小川の庄・縄文おやき村様
関連記事
-
-
【フィッシング詐欺】メールアドレスを確認してください 現在のパスワードを保持
今朝、ベッドの中でぼーっとスマホをいじっていて、このメールを開いたとたん、「何だっけ、Googleが ≫続きを読む
-
-
Q:メルマガを始めたいですが何からすれば良いですか?
こんにちは、webの森です。今回はサポートにいただいた質問と回答を掲載させていただきます。 質問され ≫続きを読む
-
-
zoomのオンラインセミナーをYoutubeでライブ同時配信する方法
zoomのオンラインセミナーをYoutubeでライブ同時配信する方法について調べていたのでやり方を記 ≫続きを読む
-
-
初めてのWordPressにおすすめ twentytwelve
かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル ≫続きを読む
-
-
Canvaを使ってみました。「イラレやフォトショがなくても、簡単な画像くらいなら自分で作成したい」方のための….
私はEC実践会の自主勉強会や、お客様の指導で、HPの作り方をレッスンすることもあるのですが、そんなと ≫続きを読む
-
-
千畳敷カールで2612体験してきました
10月3日、下界はまだ夏のなごりが残る初秋。この日、中央アルプス駒ケ岳ロープウェイにのって、2612 ≫続きを読む
-
-
【Q】ドメインの引っ越しについて何からしたら良いかわかりません。具体的には今別会社で管理しているのを私が管理したいのですが・・・
ドメインの移管は何度やってもけっこう大変というか、失敗しないように出来るかちょっと緊張します。 とい ≫続きを読む
-
-
【Q】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)
SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・ ≫続きを読む
-
-
最近ネットが遅くて、つながったり繋がらなかったり不安定
最近ネットが遅くて、つながったり繋がらなかったり不安定・・・・ 数週間前、突然、ネットが遅くなったり ≫続きを読む
-
-
【Q】ホームページでネットショップをやっています。ツイッターをやったほうがいいよと知人に誘われたのですが何がいいのかいまいちわからないのですが?
ツイッターってなに? 140文字の「つぶやき」を投 稿するだけのシンプルな webサービスです。 無 ≫続きを読む