【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法
【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法 Web2017年3月27日 「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。 サンプルコード html <ul class="hoge"> <li><p>特にスタイルを当てる必要なし</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p class="moge">これの親要素liにだけcssを適用したい</p></li> <li><p>特にスタイルを当てる必要なし</p></li> <li><p
LightBoxで簡単にギャラリーの実装ができたので導入と使い方メモ - Qiita
はじめに 公式サイト 公式ドキュメント、デモはこちらから LightBoxとは 簡単に言うとWebサイトでよく見かける、クリックすると画像がぽわ〜っと拡大して表示されるアレです。 個人的な依頼でWebサイトをつくることになりまして、 「ギャラリーページが欲しい」 「んで画像の横クリックしたら次の画像に移動するやつがいい」 「それと画像のグループが変わり目では移動させないで」 「あ、画像毎にタイトルも表示させたい」 と言った要望があり、色々と探した結果LightBoxに行き着きました。 ではどんな機能か、まさしく要望にあった通りです。 サムネイルをクリックすると拡大画像が表示され、 画像クリックで遷移でき、 グルーピングやキャプションの設定ができる 加えてCSSでデザインの変更も用意 導入も非常に簡単 夢のようですね。 JavaScript戦士のジョブ経験がない自分にはまさに夢のようです。
imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」 | TechMemo
deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。 ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。 例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。 <img src="sample.svg" alt="" class="svg"> deSVGを使うと、以下のようなインラインSVGに変換することができます。 <svg i
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
