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の属性セレクタを使い分ければ、特定の要素にスタイルが適用できる

こんにちは、@nakafujiです。 今回もCSSで覚えると便利なものをひとつご紹介したいと思います。 普段CSSを使う中で、リンクの<a>タグなど単純にその要素に対して設定することはよくあると思います。例えばこんな感じ。 a{ font-size: 16px; col...

CSS

CSS3の「calc」を使えば計算式で値が指定できる

CSSを使って幅を指定する時に、単純にpxや%表記で指定することはよくあると思いますが、CSS3の「calc」を使うと計算式を入れることができます。calcというのは英語で「演算」という意味ですね。 余談ですがgoogleで「calc」といれて検索すると、検索結果に電卓が出てきますよ。 サポ...

CSS

クリックイベントを制御するにはCSSの「pointer-events」が便利

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