*

レスポンシブ・デザインへの移行に際し学んだこと(その1)

公開日: : 最終更新日:2016/08/14 CSSやHTML、CGI

この記事は約4分で読むことができます。

自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経ちました。やる気がないのは、「今さらHTMLやCSSを勉強したくない。そんな時間もったいない。」これが最大の理由です。

ランサーズ(Lancers:仕事募集応募サイト)で、「HTML4からHTML5へのコーディングお願いします。10万円ぽっきりで」とか募集すれば済んだ話なんです。でも、それもどうかと思って結局、最小限の労力でレスポンシブ化できる方法を発見して、自力でやることにしました。orz

そこで、HTMLやCSSについて、いろいろ学んだことをリストアップします。同じようにHTML4しか知識のない方には、お役に立てるのではないかと思っております。なお、今回取り上げたのは、HTML5の文法チェッカーを使いながら、できるだけ高得点を取れるよう改善した際に引っかかったポイントばかりです。

imgタグにalignやhspaceはダメ

便利な属性ですがダメだそうです。駄々こねたところで変わらないのでおとなしく従いましょう。代替というかHTML5では、次のように書くのがよろしいようです。

<div sytyle=”float;left;margin:1em;><img src=”img.jpg” alt=”ホゲ”></div><p>画像右側に文章</p><br style=”clear:boath;>

スマホ画面いっぱいに画像を表示させたい

サイドナビに配置していた幅210pxのバナーがスマホで表示すると画面の半分になって格好悪かったので、これを修正する方法。スタイルシート内に、スマホ用のCSSが書かれている場所があるのですが、その中に次のCSSを挿入します。

<p class=”pro-source”>p.resize img {width: 100%;}

そして、バナーには、<p class=”resize”><img src=””></p>

これで、パソコンで表示された際は「resize」は無視されて、スマホ表示の時のみリサイズされて、画面いっぱいに表示されます。なるほどね!

<a name=”hoge”></a>は使わない

ページの任意の場所にラベルを付けるタグです。別のページから飛ばす場合は「#hoge」としてやるHTMLではお馴染みのやつでしたが、廃止されたようです。代わりに、<div id=”hoge”></div>や<h2 id=”hoge”></h2>とやれば良いみたい。シンプルになっていいけど、「name=」を全部交換。めんどくさ。

改行(BR)を使わない

これは知っていましたが、BRなしでCSSを使ってレイアウト調整をするのはなかなか面倒ですが、一度決まれば、後は楽なので、だいぶBRの数は減ったと思います。いかにBRを使わずコンテンツを作っていくかが腕の見せどころかも!?


Adsense

関連記事

メールフォームCGI

レスポンシブ対応メールフォームCGIを設置した

ショップサーブのメールフォームが気に入らないので、レスポンシブ対応の無料CGIメールフォーム

記事を読む

横取りマーケティング

スマホサイト横取りマーケティング

すでにスマホ・ショッピング全盛です。楽天やヤフーに出店しているネットショップは、スマホからアクセスし

記事を読む

no image

全部の商品ページに同じパーツを表示せる方法

ショップサーブのような開業サービスを使うメリットは、何かと「一括」処理ができる点です。例えば、商品ペ

記事を読む

アプリ開発

CGIやPHPアプリ開発前に依頼者が理解、習得しておくべきこと

ネットショップ開業と同じく、一発当てられる可能性を秘めているスマホアプリ、CGIやPHPアプ

記事を読む

jQuery外部ファイル

外部HTMLファイルをjQueryで読み込んでも表示してくれない2つの原因

古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどで

記事を読む

HTML編集

ヤフーショッピングの画像やHTML編集方法

ヤフーショッピングは、ショッピングモールなので、と言うと語弊

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

カスタマイズ

WEB MART(KentWeb)カスタマイズ

WEB MART CGIの続き。購入は最低限のスッキリ3ステップなので、カスタマイズもしやすく、かつ

記事を読む

CPI

レンタルサーバーの時代はもう終わった

レンタルサーバーを借りてネットショップを作ったりホームページを作ったりしたい人が、2004年に100

記事を読む

ケントウェブ

WEB MART(KentWeb) を設置してみた

KENT WEBさんを久々に見ると、カートCGIがちょいとバージョンアップしていたので、おもしろそう

記事を読む

Adsense

Adsense

海外輸入
ド素人でも海外仕入れを簡単にできる方法(輸入が熱い!?)

普段は迷惑メールフォルダに仕分けられるであろうメールが受信ト

楽天退店
楽天退店。ちょっと待った!感情的な退店はキケン。

久々に楽天のニュースが出でましたね。楽天は楽天でも、一般消費

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

→もっと見る

PAGE TOP ↑