このように書くと、たぶん、きっと、おそらく、、、クロールbotに捕食されにくい。はず。知らんけど。 脆弱性診断などで引っかかった場合、この方法でパスできる。 ポイントは、CSSの content: attr(); を使うこと。 HTML <a class="email" data-domain="domain" data-user="user" data-subject="タイトル" data-body="本文">@</a> CSS .email { cursor: pointer; } .email::before { content: attr(data-user); } .email::after { content: attr(data-domain); } JavaScript var mailto = document.querySelector('.email') mailto.addEventListener('click', onClick) function onClick () { var user = event.target.getAttribute('data-user') var domain = event.target.getAttribute('data-domain') var subject = event.target.getAttribute('data-subject') var body = event.target.getAttribute('data-body') window.location.href = 'mailto:' + user + '@' + domain + '?subject=' + subject + '&body=' + body } DEMO CodePen https://codepen.io/YusukeNakaya/pen/LYWqJyW 免責 保証はできません（笑）

はじめに 前回Sassに関する概要と一部の機能を紹介しました。 今回はSassの機能の中でも、とても便利な「mixin」という機能について紹介したいと思います。 よろしくお願いします。 mixinとは mixinという機能はいくつかのコードをまとめて、簡単に呼び出すようにする機能です。 同じコードを書く手間が省けるので、読みやすいコードになります。 mixinの使い方 まずはmixinを下記のように定義します。 @mixin hoge { width: 100px; padding: 20px; } 上記のmixinを使うためには、＠include mixin名を記述することで使用することができます。 下記の例を見てみましょう。 @mixin hoge { width: 100px; padding: 20px; } .hoge-1 { @include hoge; } .hoge-2 { @include hoge; } mixinに引数を渡して、柔軟にコードに幅を持たすこともできます。 下記の例を見てください。 @mixin hoge-text($color) { font-size: 14; color: $color; } .hoge-text1 { @include hoge-text(#ff0000); } 引数に任意の色を設定してあげると、$colorに代入されます。 終わりに mixinは同じ記述を何度も書く必要がなくなり手間を省けるだけでなく、記述量が減るのでコード自体がすっきりしますね。 引数を設けることにより、柔軟に対応ができますし、ぜひ活用していきたいです。

起こったこと HTMLの<nav> と　<aside> を固定したかった為、CSSでposition:stickyを設定したがうまく効かなかった。 調べたところ、以下の回答を見つけた。 the problem you are facing here is, that your section block consumes the full height. so it won't stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped your 'hi' inside a div. 翻訳 ここで直面している問題は、セクションブロックが高さ全体を消費することです。大きすぎてくっつかないので、くっつきません。それを機能させるには、セクション内に子要素を配置し、それにスティッキー属性を与える必要があります。あなたの例に基づいて、私は単にあなたの 'hi'をdivの中に包みました。 対処法 <nav> と　<aside>に各々子要素を配置したところ、うまく機能した。 style.css <nav> <div class="navigation"> ...中略 </div> </nav> style.css <aside> <div class="asideContainer"> ...中略 </div> </aside> 参考サイト