プログラミング備忘録【CSS編⑤】

今回はリンク先のページを別のタブで開く方法と
フォームの高さや幅をCSSで変更する方法を紹介します

別タブで開いてみる

<a href="https://note.com/notes/new" target="_blank">
  note
</a>

このtargetを追加することによって別タブでURLを開くことができます。
しかし一つ注意点！これだけではセキュリティ面に不安があるという
Tweetを発見したので少し検索してみました。

解決方法はrel="noopener"を付けるというものでした。
内部リンクの場合は問題ないそうですが、外部リンクが貼ってある場合は
この記述を追加して

<a href="https://note.com/notes/new" target="_blank" rel="noopener">
  note
</a>

こんな感じで記述します。
ちなみに"noopener"って何？？

元タブと新しいタブで別スレッドになるため、新しいタブから元タブへの操作を制御することができます。 noopenerを付けないと、JavaScriptでwindow.openerというオブジェクトが操作できるようになり、
新しいタブで開いたページから元タブのページの操作が可能となります。
いつも参考になるMDNサイト↓
https://developer.mozilla.org/ja/docs/Web/API/window.opener

つけないとどうなる？？

開かれたリンク先のページに悪意をもったJavaScriptが記載されていれば、リンク元であるページを好きに改ざんされてしまう可能性がある。

何も知らずにblankにしていましたが、これから個人アプリを開発して
デプロイしていくのでこういったセキュリティやパフォーマンスも
意識しなくてはいけないなと感じました。
このnoteにあげようと思わなければ調べなかった内容なので
アウトプットこそ最高のインプットとはよく言ったものですね。

CSSでform入力の高さ(height)幅(width)指定をする

今まではHTML側で指定していました。
高さであれば　rows="10"
幅であれば　　size="100"
しかしCSSで指定した方がフレキシブルなサイトにするときに便利と思い
方法を検索した結果、結構簡単に実装できました。
このような記述で実装できます。
ちなみにtype=のあとの名前はHTML側のfield名を入力してください。

--CSS--
input[type="text"] { 
　　width: １００px; 
　　height: 100px;
}

おまけ（昨日の困った話）

エディタはVScodeを使用しているのですが
command + ろ　を押してしまい、画面が縮小して文字がめちゃくちゃ
小さくなってしまいました。ヤッベどうしよう（汗
解決方法
command + shift + "+"キーで拡大できました。
予期せぬことが起きるたびに学びになる
そんなプログラミングが大好きです。

ここまで読んでいただきありがとうございました。
Twitterでもプログラミングに関することを日々呟いています。
https://twitter.com/john01tgmck