css PC版表示のみ、改行コード<br>を有効にする方法 コンテンツが大切と言われる昨今のWEBサイトにおいて、は極めて重要な要素の１つです。 ここでは、PCやスマートフォンといった端末の差にとらわれず、全ての端末でテキストが読みやすいように最適化する方法...
css PC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法 WEBサイトを作る際に、例えばこんなことがあります。 PC版の表示では大きいバナーを表示して、 スマホ版表示ではコンパクトなバナーを表示したい。 バナーに限らず、コンテンツや改行など、様々な要素を...
css 奇数・偶数・n番目の要素を指定してCSSを適用させる記述方法 CSSを適用させるにあたって、 といった、イレギュラーな設定を行いたい場合があります。 そんなときは、CSSの「nth-child」プロパティを使いましょう。 細かくクラス名を振り分けるよりも、簡単で汎用性が高いCSS記述ができます。 「nth-child」プロパティの基本 一般的に、「E:nth-child(...
css デバイスごとにスタイルシートの適用を分ける方法 レスポンシブ対応が標準となった今日、スタイルシートはデバイスサイズごとに分けて管理するのがおすすめです。 従来、一つのスタイルシート（styles.css）に対してレスポンシブ用のタグを記述するのが一般的とされてきました。 しかし、今日ではよりハイクオリティなデザインを実現するために多くのデザインタグを活用することが...
css 背景画像を固定してコンテンツ（要素）のみスクロールさせる方法 デザイン性が高いWEBサイトを作る際、 という方法があります。 この方法の場合、ページ全体がスクロールされるよりもコンテンツの動きが大きく見えるようになるため、テキストや写真への注目を集めることができます。 通常、要素の背景に画像を設置する時は、CSSの「」プロパティを使って指定します。 ここでは、具体的な設定の...
css javascriptとcssでポップアップを作る基本のプログラム 写真を拡大表示したり、ボタンクリックでテキストを表示する際に、ポップアップを実装すると便利です。 ここでは、javascriptとcssでポップアップを実現するための基本的なプログラムについて紹介していきます。 ポップアッププログラムのサンプル ID名「popup」で囲われたブロックが、ポップアップで表示される領域...
css CSSで実現する、ホバー時にオブジェクトを太枠で囲うエフェクト 通常、マウスホバー時にオブジェクトの枠を太くすると、オブジェクトそのもののサイズが大きくなってしまいます。 例えば、元々300pxの正方形オブジェクトがあったとして、ホバー時に5pxの太枠で囲おうとすると、310pxの正方形になってしまいます。 ここでは、について見ていきましょう。 オブジェクトのサイズは保ったま...
css ハイクオリティなキャプションエフェクトをCSSで実装する方法 WEB制作の際によく実装する、使い勝手の良いキャプションエフェクトを紹介します。 これらのエフェクトはすべてCSSで実現可能です。 キャプションエフェクトサンプル マスクをかけるエフェクト キャプションをここに表示キャプションをここに表示キャプションをここに表示 HTML CSS マスクをかけた後にテキストを左か...
css PHPで動的に取得した値をCSSに反映させる方法 PHPで動的に取得した値をCSSに反映させたい時、そんな時は、PHPファイルにCSSを記述することで、CSSにPHP変数の値を埋め込んで動的に組み込ませることができます。 【STEP1】CSSをPHPファイルに記述する まずは適当にPHPファイルを作りましょう。 PHPで変数を定義し、echoでスタイルシートを出力し...
css CSS（スタイルシート）をコピペしたけれどデザインが反映されない場合の対処法 よく、WEB初心者の方で という相談を受けます。 ここでは、スタイルが存在しているのにデザインが適用されない場合の対処法について見ていきましょう。 デザインが反映されない原因 追記するファイルが間違っている まず考えられるのが、追記する場所の間違いです。 WEBサイトでは、<header><...
