自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経ちました。やる気がないのは、「今さら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を使わずコンテンツを作っていくかが腕の見せどころかも！？
