PC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法サーバー、WordPress、EC-CUBEなどWEB全般の疑問を解決するブログ。トップページWordPressWEBデザインWEBプログラミングサイト運営・活用トップページWordPressWEBデザインWEBプログラミングサイト運営・活用ホームWEBプログラミングcssPC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法シェアTweetGoogle+FeedlycssWEBプログラミングPC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法2018年2月15日WEBサイトを作る際に、例えばこんなことがあります。PC版の表示では大きいバナーを表示して、スマホ版表示ではコンパクトなバナーを表示したい。バナーに限らず、コンテンツや改行など、様々な要素をPC・スマホで表示を切り替えることができます。ここでは、その方法についてご紹介します。画面サイズごとの振り分けを記述するまずは、レスポンシブデザインの基本をおさらいしておきましょう。PC版とスマホ版で表示を切り替える際には、メディアクエリ「@media」を使って、ブラウザサイズごとにCSSを記述していきます。ちなみに、1つのファイル上で処理を振り分けるのではなく、PC用スタイルシートとスマホ版スタイルシートの2つを読み込ませる方法もあります。詳しくは以下の記事を参考にしてください。「PC版表示タグ」「スマホ版表示タグ」を作るそれぞれの記述エリアに、「PC版表示タグ」と「スマホ版表示タグ」を作っていきます。このタグは、「display」プロパティを使って表示・非表示の切り替えを実現しています。CSS実際のHTMLでタグを使ってみる実際に、HTMLを記述する際にタグを使ってみましょう。PC・スマホ表示切り替えサンプルこの例の他にも、「img」タグや「div」タグなどの幅広いHTMLタグでクラス名を指定するだけで、PC・スマホでの表示を切り替えることができます。使い方のワンポイントとして、このタグを「改行」で使うということがあります。これにより、PC版、スマホ版のどちらでもテキストが読みやすいサイトに仕上がります。PC版表示のみ、改行コード<br>を有効にする方法2018.02.22コンテンツが大切と言われる昨今のWEBサイトにおいて、は極めて重要な要素の1つです。「FileZilla」を使ってサーバーにFTPファイル転送を行う手順サーバー契約を行なった時に発行されるFTPアカウント情報。この情報を使うと、サーバーに直接アクセスすることができます。プラグインのインストールが必要になります。上図のような一部のエリアのみ有効な日本地図を描画する方法を紹介します。http...WordPressWordPress関数「the_○○」と「get_○○」の違いWordPressでは色々な関数が存在していますが、ざっくりとしたフォーマットで「the_○○」と「get_○○」というものが多くあります。...cssハイクオリティなキャプションエフェクトをCSSで実装する方法WEB制作の際によく実装する、使い勝手の良いキャプションエフェクトを紹介します。これらのエフェクトはすべてCSSで実現可能です。レンタルサーバー会社の選定は、極めて重要かつ難易度が高い問題です。いった、イレギュラーな設定を行いたい場合があります。