様々なページを作成していると、ページ毎にコンテンツの容量に違いが出てきます。そうすると、縦の長さの違いに伴って、スクロールバーが表示されているページと、されていないページを行き来することで、表示の際にガタつきが生じます。スクロールバーが必要なページのスクロールバーを消してしまうと、コンテンツが全て見れなくなってしまう為、スクロールバーが必要な方に合わせるのが一般的です。つまり、画面を統一させるため……
メディアクエリはユーザーの環境を調べ、環境ごとに適したスタイルシートを指定しておいて自動で反映させることができるというものです。これを利用することで、ユーザーの環境や閲覧する時の表示サイズに影響されることなく、最適なデザインを保つことができます。CSSのメディアクエリの使い方ユーザーの閲覧環境によって表示を振り分ける方法は、media属性を利用することでも出来ましたが、今回ご紹介するCSSで使うメ……
セルの中が思ったより長文になってしまった場合や、表示する範囲が狭まってしまった時に、文字列が勝手に折り返してしまい、レイアウトが崩れることがあると思います。そんな時は、今回ご紹介する方法を利用することで、簡単に文字列の折り返しを禁止することができます。white-space: nowrapを利用する white-space: nowrapは、改行を強制的に禁止するとができるプロパティです。例を見て……
z-indexプロパティは、要素の重なる順番を指定することができるプロパティです。これを利用することで、よりcssでのデザインにバリエーションが増えます。そんなz-indexプロパティの使い方について、今回はご紹介します。z-indexプロパティとは先ほども記述した様に、z-indexプロパティでは要素の重なる順番を指定することができます。Y軸が縦方向、X軸が横方向なのに対し、Z軸は重なりのことで……
デザインする際に、背景色を透明にして要素を透過させたいと思ったことはありますか？CSSを使えば、これも簡単にできてしまうので覚えておきましょう。今回は、簡単なrgbaを利用した要素の透過方法をご紹介します。rgbaを利用して要素を透過するカラーコードではなく、rgbaを利用することで簡単に透明度を変更することが可能になります。普段色の設定の時に使っている、rgb（red, green, blue）……
cssを記述していると、ボックスのwidthやheightといった値を編集することが必須になってくると思います。色々なプロパティを追加していくうちに、デザインが崩れてしまったり、表示が思い通りにならなくなったりしたことはないでしょうか？この様な場合、ボックスのサイズを算出する方法が原因に考えられます。そんな時に、(box-sizing)を使うと、簡単に問題を解決することができるのでご紹介します。(……
cssを記述しだして、始めに誰もが疑問に思うのがpaddingとmarginの違いでしょう。実際に、記述しながらデザインを確認していると、どこが変化しているのかわかる為、ここのことか！とわかると思いますが、普段使っていると、どっちがどっちだったっけ…となりがちです。そんな事がないように、今回はpaddingとmarginの違いをもう一度確認しておきたいと思います。marginとはmarginは、要……
テーブルセルや画像には、border属性を記述することで枠線を表示させることができます。この他に、（border）を使用することでテーブルセルや画像以外の様々な要素に、枠線をデザインすることが可能です。 今回はその枠線の設定の仕方をご紹介します。 枠線の設定の仕方 要素 { border: 太さ 線の種類 色; } 実際に記述する場合はこの様になります。 要素 { bo……
cssを記述していくと（float）プロパティを利用して、div要素を指定した位置に配置していくことでデザインを作り込んでいくことになると思います。しかし、この（float）プロパティは解除を行わないと、上に配置されているdiv要素のfloatにより、下に配置された要素が回りこんでしまったりして、デザインを崩れさせてしまいます。そんなデザインの崩れを防ぐために、今回は回りこみの解除の方法をご紹介し……
cssを記述していくと、指定したボックスの大きさでは中に製作したテキストや画像などが入りきらない場合が出てきます。そんな場合に（overflow）プロパティを使うことで、ボックスに入りきらない部分の表示を設定することができます。 今回は、その（overflow）プロパティの使い方をご紹介します。 overflowプロパティの使い方 要素 { overflow: 種類; } 実際の記述の仕方……
