今回は、jQueryで要素にclassを追加する方法を説明します。 イベントによって動的にclassを追加することで、デザインを切り替える時などに使うことができます。 要素にclassを追加する.addClass() addClass()は、指定した要素にclassを追加するメソッドです。 以下の例では、#targetにshowというclassが追加されます。 HTML <div id="t……
jQueryで現在表示中のページのURLとそのパラメータを取得する方法を説明します。 if文を使うことで、URLやそのパラメータによって表示を切り替えることができるので頻繁に見る処理です。locationを使用した方法jQueryでも、JavaScriptでデフォルトで用意されているLocationオブジェクトを利用できます。 Locationオブジェクトでは、「location.プロパティ」のよ……
jQueryで要素を取得する方法はたくさんあり、もちろん「兄弟要素」の取得も簡単に行えます。 兄弟要素とは、例えば以下のHTMLで言うと５つのliタグは、同じ親要素を持ち同じ階層にある要素なので兄弟要素となります。 HTML <ul> <li>one</li> <li>two</li> <li>three</……
今回は、jQueryを初めて使う人向けの基本的な書き方・文法ついて説明します。 jQueryの基本形 jQueryでは、DOM（HTML）の操作をすることが多く、基本形は以下のようになります。 $("セレクタ").メソッド("パラメータ[引数]"); セレクタは、CSSと似ており「#id」「.class」というように、対象となる要素を指定することができます。さらに、「.」でメソッドをつなげることで……
要素には、親要素と子要素や孫要素と呼ばれる、大きい括りの要素と、その中の小さな括りの要素があります。そして、その親要素に指定したスタイリングは子要素に継承されます。つまり、親のスタイルは子孫の要素に、自動的に適用されるのです。例えば上図のように、<body>が親要素で<body>にフォントサイズの指定をした場合、<body>内にある子要素にも、自動的に親要素のフ……
CSSの基本的なセレクタとプロパティの記述の仕方は、セレクタ{ プロパティ:値; }こうですよね。複数のプロパティを指定する方法も、次のように記述するだけです。セレクタ{ プロパティ:値; プロパティ:値; プロパティ:値; }しかし、色々な状況に応じて、もっと便利な記述をすることができるので、いくつか紹介していきたいと思います。複数のセレクタに一度にデザインを指定同じプロパティを複数のセ……
CSSをたくさん記述していくと、うっかり同じセレクタやプロパティに違うスタイルが指定されている、なんてことが起きてくるかもしれません。こういった場合、どの記述が実際に適用されているのか知っていますか？ 実は、記述が読み込まれて表示されるのには優先順位があります。スタイルの優先順位スタイルの優先順位ですが、同じ要素の同じプロパティに、違う値を指定してあったとします。p {color:red;} p ……
太さを変えて文字を強調することは、よくありますよね。CSSでは文字の太さを変える方法も、知っておくと便利なものが幾つかあるので、覚えておいて損はないでしょう。基本としては、boldを使って太字にします。boldで太文字を指定しよう.sample1 { font-wight: bold; }記述の仕方は上記の通りです。また、bolderとlighterというスタイルもあります。これは相対的に文字の……
背景の色を変更したい、この様な場面もよくあるかと思います。背景色の指定はとても簡単です。背景色指定のプロパティはbackground-colorなので、background-colorを使って好きな色を指定するだけです。色の指定はRGB値か色の名前で行います。背景色を指定してみようでは、実際に例を見ていきましょう。body { background-color: red; }上の様に指定すること……
これも多く使用することがあるデザインです。文字の色を変更したい時は、colorを使用します。記述の仕方などは、背景の色を指定する時と一緒で、とても簡単です。文字色指定のプロパティはcolorなので、colorを使って好きな色を指定するだけです。文字色の指定の場合も、RGB値か色の名前を使用します。文字色の指定をしてみようでは実際に、例を見ていきましょう。body { color: white; ……