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

学んだこと

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

もうやり始めると止まらない(><)。HTML5とCSS3?レスポンシブWEBデザインをちょこちょこと。いや~新しいことを学ぶのは楽しんもんですね。そんなこんなで、学んだことを載せています。

<form>関係

HTML5+CSS3のページにショップサーブのカートタグを貼り付けようとしたらエラー祭り。

<form method=”post” action=”https://hoge/cart.php” target=”_top”>
<input type=”hidden” name=”ITM” value=”商品番号”>
<select name=”CNT”>
<option value=”1″ >1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
<input type=”submit” value=”カートに入れちゃう?(*´∀`*)”>
</form>

↓で解決

<form method=”post” action=”https://hoge/cart.php” target=”_top”>
<input type=”hidden” name=”ITM” value=”商品番号”>
<select name=”CNT” tabindex=”1″>
<option value=”1″ selected>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
<input type=”submit” value=”カートに入れちゃう?(*´∀`*)”>
</form>

リンクのテキスト

これはHTML5というよりはSEOの話です。ついつい、○○はこちらとリンクを貼ったりするのですが、よろしくないようです。そりゃそうですよね。リンクテキストは、その先のページのキーワードなりにしておくのが基本ですから。

 何かと属性書くな!が多い(泣)

<td>で改行させないための属性「nowrap」ですが、ついついその場で仕込んでしまいます。が、これもCSSにせよとのお達しです。CSSを書いて、必要なTDにclass指定です。

td .nokaigyo {white_space:nowrap;}

としておいて、<td class=”nokaigyo”></td>

youtubeをスマホ表示で画面幅に合わす

これは、imgと同じ考えで、iframe {max-width: 100%;}と入れてやれば、幅640pxにしていしている動画も、スマホではきれいに画面に収まります。