HTML・CSS・JavaScriptメモ
はるこのスクラップでは、HTML・CSS・JavaScriptなどのメモを投稿していきます。
はる外部リンクアイコンを表示する(fontawesome)
<i class="fa-solid fa-up-right-from-square"></i>
はる新しいタブで開く
<a href="example.com" target="_blank">example</a>
target="_blank"のセキュリティ上の懸念
target 属性を使用する場合には、常にrel="noreferrer noopener"を一緒にアンカー要素に追加することを強くお勧めします。
参考：
rel=noreferrerとは？
noreferrer キーワードを <a>, <area>, <form> の各要素の rel 属性に指定すると、ターゲットリソースへ移動する際、 Referer ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 noopener キーワードを設定しているかのように動作します。
noopenerとは？
noopener キーワードを <a>, <area>, <form> の各要素の rel 属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの Window.opener プロパティプロパティは設定されません（null を返します）。
これは、信頼されていないリンクを開くときに特に有効で、 Window.opener プロパティを介して発信元の文書を改ざんできないようにするためです (詳細は rel=noopener についてを参照してください)。ただし、 HTTP の Referer ヘッダーは（noreferrer を同時に使用しない限り）提供されます。
なお、 noopener を使用した場合、ターゲット名に _top, _self, _parent 以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて _blank と同様に扱われます。
はる文字と文字の間に特殊文字で空白を入れる
 
 
はるカラーコード変換サイト
はるマウスカーソルの形を変更
以下は、ポインター（指のマーク）にする場合。
cursor: pointer;
はるrequired属性を、JavaScriptによって追加する
// 要素を取得
var checkbox = document.getElementById('check');
// required属性を追加
checkbox.setAttribute('required', 'required');
複数のinputとlabelを横並びにする
php部分のコード
<div class="form-check-container">
{% for X in Xs %}
<div class="form-check">
<input class="form-check-input" type="radio" id="{{ X }}" name="X" value="{{ X }}"
{% if selected_X==X %} checked {% endif %}>
<label class="form-check-label" for="{{ X }}">{{ X }}</label>
</div>
{% endfor %}
</div>
cssのコード
.form-check-container {
display: flex;
flex-wrap: wrap;
}
.form-check {
margin-right: 10px; /* 各要素の間隔を調整するために必要に応じて変更 */
}
※ChatGPTによる生成コードを一部使用しています。
はるPaddingやMargin
はるaタグのリンクの下線を消す
a {
text-decoration: none;
}
シャドーをつける
◯◯ {
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;
}
例 .box {box-shadow: 2px 2px 4px -2px gray inset}
はるボタンにリンクを貼る方法
選び方は、以下のpinをチェック。
<button type="button" onclick="location.href='<リンク>'">ここに文字</button>
<a href="<リンク>">ここに文字</a>
<input type="button" onclick="location.href='<リンク>'" value="ここに文字">
取り消し線の書き方
Googleで検索したときの強調スニペットでは、strikeを書くようにと出てくるが、どうやらsとかdelとかを使ったほうが良いらしい。
<p><s>Sample</s></p>
<p><del>Sample</del></p>
また、削除された範囲などを表すには、insを使ったほうが良いらしい。 以下参考サイト