CSS

【CSS】background-sizeの使い方!背景画像のサイズを操作できる。

この記事ではCSSの【background-size】の使い方をご紹介します。 background-sizeを使うと、背景画像のサイズを操作することができます。レスポンシブサイトの場合、background-sizeを使えば背景サイズを自動で調整することができますよ。 background...

CSS

【CSS】background-repeatの使い方!画像の繰り返しを指定できる。

この記事ではCSSの【background-repeat】の使い方をご紹介します。 background-repeatを使うと、背景画像の繰り返しを設定することができるのでパターン画像を使う時にはよく使われるプロパティですね。 background-repeatの基礎知識 実際にbackg...

CSS

【CSS】background-positionの使い方!背景画像の初期位置を設定できる

この記事ではCSSの【background-position】の使い方をご紹介します。 background-positionを使うと、背景画像の初期位置を設定することができるので意図的に背景をずらしたりすることが可能になります。 通常は左上が初期値になっていますが、この背景画像は右下に...

CSS

【CSS】background-imageの使い方。

CSSのbackground-imageプロパティを使うと、色ではなく画像を使うことができます。 画像を使うことでbackground-colorではできなかった模様だったり、写真素材を使った表現ができるのでWeb制作のデザインでは重要なものとなります。 background-imageの記...

CSS

【CSS】background-colorの使い方。背景色の指定方法3つ。

今回はbackground-colorの使い方についてです。 background-colorは背景の色を決める時に使うCSSプロパティです。サイト制作では背景に色を使うのは数えきれないぐらいよく出てくるので、すぐに覚えられると思いますよ。 background-colorの記述サンプル ...

CSS

【CSS】backgroundプロパティの使い方

CSSのbackgroundプロパティを使うと、背景の設定をまとめて記述することができます。ちなみにまとめて記述することを「ショートハンド」と呼びます。 ひとつずつ設定するよりも記述が簡単になるので、ぜひ覚えておきましょう! backgroundは以下のプロパティをまとめて設定できる 設定...

CSS

strongなどで文字を強調した時によく使われているCSSデザイン5つ

htmlで強調したい文字にはstrongタグが使われることが多いですが、タグをつけるだけで特に何もしてない・・・という方もいると思います。 今日はstrongで文字を強調した時に、よく使われているCSSのデザインを5つご紹介します。 文字をstrongで強調すると、seoの面でも重要なテ...

CSS

【CSS】擬似クラスの:nth-child()を覚えて特定の順番の要素を指定する

今日はCSSの擬似クラスのひとつの:nth-childについてご紹介します。 擬似クラスは他にもたくさんありますが、:nth-childを使うと要素の指定を、順番で指定することができます。何番目の要素、といった指定の仕方ですね。 実際にnth-childの使い方を見ていきます。 :nt...

CSS

【CSS】floatした要素の親要素に高さを認識させる2つの方法

今回もCSSで本当によくある失敗ですね。 Webデザインを始めた人はかなりの確率でfloat問題にひっかかると思いますので、初心者の方で知らなかった・・・!という方がいたらぜひ覚えておいてください。 floatすると表示崩れる問題 floatしたら表示崩れる・・・なぜ・・・というの、よくあ...

CSS

iPhone(iOS)で送信ボタンなどのinput要素にCSSを正しく適用させる方法

CSSがブラウザによって効かなかったり、こっちでは表示できるのにあっちではうまくいかない!ってことよくありますよね。表示の差異があることって知っておかないと、ニアミス頻出したりします。忘れないように忘備録としても、この記事で紹介しておきます。 今回はiPhoneでのinput要素にCSSが効か...

CSS

CSSを使って、サイトの内部リンクだけデザインを変更する2つの方法

テキストリンクを貼る時に内部リンク(サイト内のページへのリンク)と外部リンク(他のサイトへのリンク)の2種類があると思いますが、どちらも同じ見た目だとどっちがどっちなのか分かりづらいですよね。 このブログでは外部リンクには右端にマークが出るようになっていますが、違いというのはそれぐらい。できれ...

CSS

CSSの属性セレクタを使い分ければ、特定の要素にスタイルが適用できる

今回はCSSの属性セレクタというものを使って特定要素にスタイルを適用する方法をご紹介します。 属性セレクタを覚えると、CSSでより細かい指定ができるようになります。 属性セレクタってなに? 属性セレクタというのは、属性や属性値の内容によって指定するものです。 そもそも属性とは? 属性っ...

CSS

【CSS】calcの使い方!計算式で幅などの値が指定できて便利!

今回はCSS3で導入された新しいプロパティについて説明します。これを使うと数値の指定がしやすくなるので、覚えておくととても使えますよ。 CSSのcalcって何? CSSを使って幅を指定する時に、単純にpxや%表記で指定することはよくあると思いますが、CSS3の「calc」を使うと計算式を入れるこ...

CSS

【CSS】pointer-eventsでマウスイベント(クリック・タッチ)を無効化する方法

jQueryを使わなくてもクリックイベントを制御できるCSS「pointer-events」についてです。 使ったことなかったんですが、最近使う機会があってこんなのあったんだ!と新鮮だったのでシェアしたいと思います。 対応ブラウザについて クロスブラウザは問題なさそうですがIEに限っては1...