CSS

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

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

CSS

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

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

jQuery

【jQuery】クラス名を操作するメソッド4つまとめ

この記事を読むとクラス名(class)を操作する4つのjQueryメソッドを一気に覚えることができます。 クラス名の操作はよく使う上に内容も簡単なので、初心者向けです。 全てclassが入っているので名前自体も覚えやすいのでぜひ使ってみてください。 クラス名を追加するaddClass ...

jQuery

【jQuery】特定の文字列が入った要素を指定して処理を行う方法

今回は「特定の文字列が入った要素を指定して処理を行う方法」です。 「この文字が入ってる要素だけ、色を変えたい!デザイン変更したい!」という時に使えるものです。 特定の要素にクラス名をつけて、CSS側で変更・・・といった方法もできますが、それだと自分で特定の要素を探してクラス名をつけて、と...

CSS

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

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

CSS

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

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

jQuery

jQueryでよく使う演算子の一覧をおさらい【初心者向き】

今回は演算子(えんざんし)についてです。 演算子は色々なプログラミング言語で使われますが、jQueryでよく使うものをまとめてみました。 CSSでも少し出てくるので、一部は使ったことあるという人もいると思います。よくあるのが「<(小なり)」とか「+(加算)」とかですね。 演算...

jQuery

jQueryのifを使った条件分岐の方法【初心者向け】

今回はjQueryのifを使った条件分岐の書き方を紹介します。 ifは英語でもよく出てきますが「もし〜ならば」という意味ですね。jQueryでも同じ意味合いで、特定の条件を指定して、それに合う時、合わない時の処理を振り分けることができます。 初心者の方向けなので、細かくは書かず基本的には...

CSS

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

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

jQuery

jQueryでページ内をスムーズにスクロールさせる方法【初心者向け】

ページ内を移動できるアンカーリンクではid名でジャンプ先を指定しますが、jQueryを使うと移動する時にスクロールでスムーズに移動させることができます。 スムーズなスクロールの動きをつけたほうが「同じページの中を移動したんだな」ということが視覚的にわかりやすいので、実装しておくとより見やすいペ...

jQuery

【jQuery入門講座】初心者向けjQueryの基本的な使い方

この記事は「HTMLやCSSはわかるようになったけど、jQueryはよくわからない」といった初心者の方向けに書いたjQuery入門編です。 HTMLやCSSも分からないよ!?という方でも、なんとなーくjQueryとは何ぞやということが伝わるように書いてます。 最初の入門編としての記事なの...

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...