LINE2018.11.11この記事は約10分で読めます。スポンサーリンク最近覚えたWEBプログラミングの小細工を紹介したい。こんな機能を知っていれば何かの役に立つかも知れない。それは、CSSの設定において、::beforeや::afterでアクセスできる疑似要素に対して、そのcontentにattr()と言う特殊なやり方を使うと、ヘンテコな事が出来るのだ。文章で説明するのは分りにくいので、早速実例で紹介しよう。属性はカスタムデータ属性と言うやつCSSで::beforeや::after疑似要素のcontent:attr()の使い方、その2hrefデータを取り出して疑似要素のcontentにセットする画像にタイトルを付けるまとめCSSで::beforeや::after疑似要素のcontent:attr()の使い方まずは、以下に示すhtmlを使う。id="btn2">Afterを変更</button>まあ、divが一個とbuttonが二個の簡単なサンプルだ。それらの要素の見栄え(=スタイル)を決めるCSS設定は以下のようにする。</style>上のCSS設定はちょっと長いので簡単に解説しておく。この例では、一つのdiv要素と、その前後に二つの疑似要素を作成している。::beforeはdiv要素の直前に作成される疑似要素だ。幅は100pxにしているが、display:inline-blockにすると100pxの幅に出来る。CSS設定で重要なのが以下の部分だ。);恐らく多くの皆さんは初めて見る記述だと思う。この意味はこの後で解説したいが、まずはこれらのhtmlやCSSで作成されるWEBページを表示してみる。サンプルプログラムを実行するその表示結果の画面キャプチャが以下の通り。このサンプルプログラムをこのページにも埋め込んだ。その表示結果は以下の通り。上のボタンをクリックするとデモが見られる。画面キャプチャ画像と文字サイズなどが若干異なるが、それはあまり気にしなくても良い。肝心なのは、div要素の前後にbeforeとafterの疑似要素が正しく追加されている点だ。'表示させたい文字列';のように書くのが一般的だ。);などの見慣れる記述をしている。この記述をする事によって、疑似要素のcontentをプログラム的に変更出来るのだ。jQueryを使って疑似要素のcontentを動的に変更するまずはjQueryでやってみる。以下のプログラムコードを実行する。</script>このコードの冒頭の部分で、二つの疑似要素に対してそのcontentに文字列をセットしている。二つのボタンのclickイベントでも、同じくcontentに別の文字列をセットしている。これによって、ボタンをクリックすると、疑似要素のcontentを動的に変化させる事が可能だ。実際に、[Beforeを変更]ボタンをクリックした後のキャプチャが以下の通り。上のキャプチャは、before疑似要素のcontentを変更した状態だ。JavaScriptだけで記述すると以下のようになる。値を変更する手法は以下のどちらの記述でも良い。中のdata-beforeは、カスタムデータ属性と呼ばれる機能だ。カスタムデータ属性は、一般には以下のような使い方をする。data-before="何らかのデータ">これが本文</div>つまり、html要素に対して、自前のデータを保持しておく時に使う。実用的なサンプルならこんな感じか。形式でDOM要素に与える事が出来るのだ。それらのデータはjQueryやJavaScriptで設定したり取得したり出来るのだ。ワテの場合、こう言う便利機能が有る事を知らなかった当時は、何らかのデータを保持しておきたい場合には、兎に角JavaScriptの変数で保持していた。それだとグローバル変数になってしまうので、数が多くなるとどの変数が何の情報を保持しているのか自分自身でも分らなくなってしまう欠点がある。それを今回紹介したDOM要素にdata-*と言うカスタムデータ属性で保持させる事で、そのDOM要素に関連するデータで有る事が一目瞭然なので、グローバル変数を大幅に減らす事が出来て混乱の解消に大いに役立つのだ。今回の例では、data-beforedata-afterと言うカスタムデータ属性を用いたが、これはワテが勝手に作成した属性なので、実際はどんな名前でも良い。日本語が使えるのかどうかは未確認だ。CSSで::beforeや::after疑似要素のcontent:attr()の使い方、その2さて、もう少し別のサンプルを紹介したい。今までの説明では、data-*カスタムデータ属性を使うやり方を紹介した。カスタムデータ属性以外の属性でも同様に扱う事が可能だ。指定しているurl文字列を同じように取り出して疑似要素のcontentにセットする例を紹介したい。その<a>タグのafter疑似要素に対して、以下のCSS設定を行う。]';}その表示結果は以下のようになる。hrefに指定しているurl文字列を取り出してafter疑似要素のcontentにセットしただけであるが。言うテクニックを覚えておけば、何かの役に立つだろう。画像にタイトルを付ける画像にタイトルを付けてみる。alt="">この文字は取得できない。</p>こんなhtmlと以下のCSSを使う。5px;}その表示結果は以下の通り。こんな風にわざわざ疑似要素を使わなくても、画像の下にタイトル文字列を表示するだけなら、普通にこんな風にやれば良いと思うが。alt=""/></div><p>タイトル</p>まとめ当記事では、DOM要素に対してそのbeforeやafter疑似要素のcontentをプログラムで動的に変更する手法を紹介した。言うよりは、ワテの備忘録みたいなもんだな。ここで紹介した手法を使うと、WEBページに表示している文字列を動的に変更する事が可能だ。今回紹介した疑似要素を使う方式だと、必要最低限のDOM要素だけで実装出来るという点が長所かもしれない。疑似要素を使わないで類似の事をやるなら<div>要素の前後に<div>を追加すれば良いだろう。id="div_after">ここはAfter</div>でも、その為にはjQueryやJavaScriptでdiv要素を追加すると言うDOM操作を行う必要がある。それでも良いが、今回紹介した疑似要素を使う方式なら、既存のdivIDだけで実現出来る。言う事で、何かの役に立つかな。スポンサーリンクワテ推薦のプログラミングスクールで学ぶコメント募集この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。CSSクラス操作まとめワテの場合、JavaScriptやjQueryを使ってWEBプログラミングを始めてから約二年になる。そんな中で、当初はクラスと言うものが良く理解出来なかった。ここで言っているクラスとは、HTMLの記述で使う以下の例のようなクラスであ...CSS【ワテのCSS講座】レクタングル広告を横並びにする方法【四種類】ワテの場合、Googleアドセンス広告やAmazonアソシエイト広告をウェブサイトに貼っている。このページにも幾つか表示されていると思う。このページの場合にはWordPressと言うウェブサイト作成ソフトで作っていて、そのWo...CSS【ワレコCSS講座】今日覚えたSCSSとCSSのテクニック今日覚えたSCSSのテクニックとCSSのテクニックを紹介したい。言うか、単にワテの備忘録であるが。使うとこんな計算が可能だ。昨日、こんな記事を書いた。