デザインする際に、背景色を透明にして要素を透過させたいと思ったことはありますか？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: 種類; } 実際の記述の仕方……

昔は角丸を使用したい場合、四隅の角の画像を用意して要素の角丸をデザインしていました。 しかし、今ではcssの（border-radius）プロパティを使用することで、簡単に角丸を表示することが可能です。 今回は、そんな（border-radius）の使い方をご紹介します。 border-radiusの使い方 （border-radius）プロパティは、ボックスの４方向の角を全て丸くデザインします。……

文字のフォントサイズを調整する場面は、cssを記述していると必ず出てくるので、しっかりと覚えておきたいですよね。そんなフォントサイズの指定方法を今回はご紹介します。font-sizeの使用方法フォントサイズを変更するには、（font-size）プロパティを利用します。値には３つ種類があるので１つづつ見ていきましょう。単位で値を指定するpx/em/exなどの単位を使った数値を値に入れる方法です。fo……

（font-family）はフォントを指定するプロパティです。フォントを変更することで、よりデザインが豊かになります。しかし、指定したフォントをユーザーも所持しているとは限りません。ユーザーが所持していないフォントの場合は、指定されたフォントは表示されず、デフォルトのフォントが表示されることになります。今回は、（font-family）を使用する際の注意点や実際の記述の方法を紹介します。フォントの……

CSSを記述する時に、記述する場所は大きく分けて２つあります。HTMLと同じファイル内に書き込む方法と、別のファイルに記述したものをHTML内で呼び出して適用する方法です。CSSの記述の量が増えるとコードがややこしくなってしまいますし、外部ファイルにすることで別のHTMLファイルからも簡単に利用することができます。とても簡単に出来るので、必ず覚えておくようにしましょう。今回は外部ファイルのスタイル……