Web制作タクヤコピペでOK!CSSでできるオシャレな商品比較ページ今回は、よく企業のホームページで見かける「商品比較ページ」の作り方を紹介します。使うのは「HTML」と「CSS」のみです。パソコンで表示したとき(https://webcommu.net/blog/product-comparison-table-css-pc.html)スマートフォンで表示したとき(https://webcommu.net/blog/product-comparison-table-css-mobile.html)スポンサーリンクHTMLまずは、こちらを表示させたい場所に貼り付けます。※非表示にしたい機能に「class=”none”」を記述します。商品比較ページに合わせて編集してください。class="txt">無料体験コースとなってきます。一ヶ月限定でほぼすべての機能がご利用いただけます。class="txt">一番人気のベーシックコースです。低価格でご利用いただくことができます。class="txt">ベーシックコースに「機能4」が付いたコースです。class="txt">より多くのサポートを受けることができるコースとなっています。class="txt">すべての機能を使うことができ、効率化を図ることができます。class="function-list"><ul><li>機能1</li><li>機能2</li><li>機能3</li><li>機能4</li><li>機能5</li><li>機能6</li><li>機能7</li></ul></div></div></div>CSS(パソコン)続いては、パソコンで表示させるときの「CSS」です。次のコードを貼り付けてください。url();」の()内にアップロードした画像のURL(~~~.jpg)を記述してください。CSS(スマートフォン)最後にスマートフォンで表示させるときの「CSS」です。次のコードを貼り付けてください。url();」の()内にアップロードした画像のURL(~~~.jpg)を記述してください。スポンサードリンクWeb制作この記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。RECOMMENDこちらの記事も人気です。2018.9.25はがきデザインキットで「往復はがき」は作成・印刷できる?ABOUTこの記事をかいた人タクヤサラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。