★生jsソースコード
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <dl> <dt>Lorem ipsum dolor sit amet</dt> <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></dd> <dt>Integer rhoncus felis mauris</dt> <dd><p>Integer rhoncus felis mauris</p></dd> <dt>Integer pretium porttitor lectus at tempor</dt> <dd><p>Integer pretium porttitor lectus at tempor. </p></dd> </dl> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="app.js"></script> </html> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
html,body{ margin: 0; padding: 0; height: 100%; } dl dt{ margin: 20px 50px; font-size: large; border: 1px solid #7BAEB5; border-left: 1em solid #7BAEB5; padding-left: 10px; width: 600px; cursor: pointer; } div#grayLayer{ display: none; position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: #7BAEB5; filter:alpha(opacity=75); opacity: 0.75; } #overLayer{ display: none; width: 400px; background: white; padding: 10px; position: fixed; top: 50%; left: 50%; } #overLayer img.close{ position: absolute; top: -10px; right: -10px; cursor: pointer; } |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// テキスト非表示；モーダル仕込み document.querySelectorAll('dd').forEach(function(value) { value.style.display = 'none'; }); // cssのgrayLayer var grayLayer = document.createElement('div'); grayLayer.setAttribute('id', 'grayLayer'); // cssのoverLayer var overLayer = document.createElement('div'); overLayer.setAttribute('id', 'overLayer'); document.body.appendChild(grayLayer); document.body.appendChild(overLayer); //モーダル閉じる document.querySelectorAll('#grayLayer, #overLay img.close').forEach(function(value){ value.addEventListener('click', function(){ grayLayer.style.display = 'none'; overLayer.style.display = 'none'; }, false); }); //モーダル開く document.querySelectorAll('dt').forEach(function(value){ value.addEventListener('click', function(){ grayLayer.style.display = 'block'; overLayer.style.display = 'block'; var close = document.createElement('img'); close.setAttribute('src', './image/close'); close.setAttribute('class', 'close'); // dtの弟要素ddの子要素pのテキスト取得 overLayer.textContent = this.nextElementSibling.firstElementChild.textContent; overLayer.insertBefore(close, overLayer.lastElementChild); overLayer.style.marginTop = '-' + overLayer.clientHeight / 2 + 'px'; overLayer.style.marginLeft = '-' + overLayer.clientWidth / 2 + 'px'; }, false); }); |
メモ
MDN Web DocsCSS の filter プロパティは、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。
ブログの記事に画像を貼り付けるとき、わざわざ”Photshop”などの画像加工ソフトで彩度や明度、コントラストを調節するという方も少なくは無いと思います。
しかし、CSSのfilterプロパティを利用して、画像加工するという手法もあるのです。
彩度や明度、コントラストを調節することができるfilterプロパティについて詳しく解説します。
★”filter”でできること
①ぼかし blur
②ものくろ grayscale
③コントラスト contrast
④明度 brightness
⑤彩度 saturate
⑥階調反転 invert
⑦色相回転 hue-rotate
⑧セピア sepia
⑨影 drop-shadow
⑩透過 opacity
指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。
elm.setAttribute(name, value);
・nameは「属性の名前を文字列で表現したもの」
・valueは「属性の希望する新しい値」
|
1 2 3 4 |
setAttribute(‘id’, ‘grayLayer’); var d = document.getElementById(‘d1’); d.setAttribute(“align”, “center”); |
textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。
※textContentは、innerHTMLと比べられる事が多い。
→innerHTMLは、HTMLを解釈して出力する。
→textContentは、HTMLを解釈せず、そのまま文字として出力する。
|
1 2 |
let text = someNode.textContent; someOtherNode.textContent = string; |
①insertBeforeで要素の前に挿入する
Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。
※insertBeforeは、appendChildと関係する？
指定した要素を、現在の要素の子要素として、対象要素の前に插入するもの。
②insertBeforeで要素の後に挿入する
要素の前ではなくて要素の後に挿入したい時にinsertAfterを探してしまいがちですがありません。
そのような時は nextSibling または nextElementSibling メソッドと組み合わせます。
③appendChildについて
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// dd要素を削除 $('dd').hide(); // htmlタグを追加 $('body').append('<div id="grayLayer"></div><div id="overLayer"></div>'); // モーダル閉じる $('#grayLayer, #overLay img.close').on('click', function(){ $('#grayLayer').hide(); $('#overLayer').hide(); }); // モーダル開く $('dt').click(function(){ $('#grayLayer').show(); $('#overLayer').show() .html('<img src="" alt="" class="close" />' + $('+dd', this).html()) .css({ marginTop: '-' + $('#overLayer').height() / 2 + 'px', marginLeft: '-' + $('#overLayer').width() / 2 + 'px' }); }); |
この記事へのコメントはありません。