もうやり始めると止まらない(><)。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にしていしている動画も、スマホではきれいに画面に収まります。