*

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

公開日: : 最終更新日:2016/08/18 CSSやHTML、CGI, ウェブ・テクニック

この記事は約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にしていしている動画も、スマホではきれいに画面に収まります。

Adsense

関連記事

メルカリ売れた

メルカリ売れた!(初注文)苦節200日!?

メルカリに出品すること100日か200日か。コメントやイイネなどがつくものの売れる気配なく完全放置す

記事を読む

ヤフートップ

yahoo! shoppingのトップページはどうやって作るのですか?

無料で、しかも、地方の父ちゃん母ちゃんでも出店できてしまうyahoo! shopping。ライト出店

記事を読む

no image

ショップサーブのサイトがリニューアル

ショップサーブのサイトがリニューアルされました。 (管理画面も早くニューアルしてくれ。)

記事を読む

ヤフーショッピング自社サイトに埋め込む

自社サイトにヤフーショッピングを埋め込む方法

いくつか考えられるものを。 1つ目は、自社サイト内に商品ページが既にあって、そのページにヤフー

記事を読む

最強のメルマガCGI

メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサーブ(運営はEストアー)が、顧

記事を読む

yahooトップテンプレート

yahoo! shoppingトップページ用HTMLテンプレート

yahooさんが用意してくれてもいいのに、無いのがトップページ用のカテゴリー一覧のテンプレート。無い

記事を読む

no image

検索キーワードに思う如月

2015年もあっという間に過ぎましたが、2016年の1月2月もあっという間です。通常ニッパチと言えば

記事を読む

wixでブログ

ネットショップ用ブログをWixで始めるのも良い

ネットショップの運営にブログはつきものですが、ブログの書き方がわかっていないお店や活用しきれていない

記事を読む

ランディングページ

他店のランディングページから学ぶ

ショップサーブで販売中の商品のひとつをピックアップして、ランディングページを作ることにしました。

記事を読む

オプション

1商品にオプション10個まで設定可能

ある商品を購入するときに、カートボタンの上に「カラー」や「サイズ」を選べるやつ(プルダウン)がついて

記事を読む

Adsense

Adsense

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑