【jQueryの基本のキ】CSSメソッドで複数プロパティを指定するコード

ど忘れしがちな「.CSS();」の複数指定構文

CSSのセレクタと値を設定できるjQueryのCSSメソッド。

どこかをクリックしたら、ちょっとしたスタイルをあてたりする際などに、とても便利です。

ただ、このCSSメソッドにおいて、複数プロパティを指定する際の構文をど忘れすることがあります。

今回は、コピペOK!な形でCSSメソッドの複数指定コードを紹介します。

記事の続きを読む

【CSS】親要素に依存せずブラウザ幅100%にする指定とは?

親要素を無視して画面幅100%指定できる?

要素の横幅を指定するCSSプロパティ「width」。

あるHTML要素にこのwidthを指定した場合、HTML上の親要素から影響を受けたり、影響を与えたりします。

ただ、例えば画面いっぱいの背景画像を一部エリアにのみ表現したい場合など、親要素を無視して横幅を指定したいケースもあるでしょう。

今回は、widthプロパティの値として使用する、親要素を無視して画面幅100%を指定できる単位を紹介します。

記事の続きを読む

【コピペコード有り】後から追加した要素にイベント発生させる方法

クリックしても動かない!どうする??

appendイベントやbeforeイベントで、後から追加されるHTML要素。

jQueryのプラグインなどに良くある形態です。

そして上記の追加要素にクリックイベントを設定したいケースってあると思います。

で、「よし、ググったところonメソッドなら大丈夫なんだな」と思って、「$(’selector’).on(’click’, function() 〜」と記載。

しかし、該当要素をクリックしても何も反応しない!

一体、何がいけないのでしょうか?

記事の続きを読む

子テーマって何?【WordPressカスタマイズ基本編】

今さら聞けない!子テーマについて。

WordPressでサイト・ブログを作成するとき、既に制作済みのテーマを使用することが多いと思います。

さらに一般的には、そのテーマを目的に合ったデザインなどにカスタマイズして使用することになるでしょう。

その際に便利なのが、子テーマと呼ばれる仕組みを活用することです。

今回は「子テーマとは何か?」および、その作成手順について解説します。

記事の続きを読む

Facebookライクボックスの横幅をスマホサイズ100%に!

LikeBoxはみ出してませんか?

fb-likebox

フェイスブックページを運営されている方なら、通常WEBサイトにライクボックスを設置されていると思います。

ただ、サイトをいわゆるレスポンシブデザインにされた場合、ブラウザ幅を狭く(=スマホなどで表示)した際に、ライクボックスが横にはみ出してしまうことが多々あります。

これは、LikeBoxを構成しているパーツの横幅が、px指定で固定されているせいです。

そんな場合、スマホ表示用のCSSに、次のソースを追記してみていただければと思います。

記事の続きを読む

表現が広がる!疑似要素・疑似クラス一覧【CSS1&2編】

この基本、見落としてない?!

part3-css

CSSシリーズ第三回は、疑似要素と疑似クラス。

といっても、CSS3で追加された疑似クラスがけっこう多いため今回はレベル1と2のみ、すなわち疑似要素&疑似クラスの基本を網羅したいと思います。

合い言葉は「疑似要素と疑似クラスで表現の幅を広げよう!」

記事の続きを読む

【サンプル有】入門からCSS3まで!属性セレクタリファレンス

痒いところに手が届くスタイル指定!

attr-selector

前回は、classセレクタやidセレクタなど、超基本的なセレクタを紹介しました。

この記事では続編として、属性セレクタをサンプルを交えて解説。CSS2レベルの基本から、CSS3で追加されたものまでを網羅しようと思います。

属性セレクタを知っておくと、かゆいところに手が届くようなスタイル指定が可能になりますよ。

記事の続きを読む

【初心者対象】超基礎的なCSSセレクタの種類一覧

“基本も基本…大原則だっ…!”

by 伊藤開司(マンガ:賭博黙示録カイジ)

basic-selector

CSS3では、かなり小技の効いた擬似要素などのセレクタが追加されました。

それらを知ることも大切ですが、まずは基本であるCSS1・CSS2レベルを押さえておくことが肝要。

押さえておかないと、例えばテンプレートのちょっとしたカスタマイズを行うことすらできなってしまうからです。

今日は、超基本的なCSSセレクタを、例を交えて紹介します。

記事の続きを読む

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

サイトをシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

flight