ASP.NETで要素を隠してみる | Tech Media

相关文章推荐

细心的乒乓球 · 《新唯識論》述記· 11 月前 ·

慷慨的奔马 · 大型的泰迪狗是什么品种？_百度知道· 2 年前 ·

成熟的匕首 · 孙子女/外孙子女是否法定继承人以及对 ...· 2 年前 ·

文质彬彬的拐杖 · 居延汉简是什么时期的？ - 知乎· 2 年前 ·

越狱的排球 · 今天，“爱国者治港”原则有了制度性保障· 2 年前 ·

こんにちは！　21卒エンジニアの原田です。皆さんには ”こっそり隠しているもの” ってありますか？
テストの結果や成績表、うっかり壊しちゃったもの、過去の黒歴史などなど…。実家の押し入れに封印しているものもきっとありますよね(´・ω・)

今回は押し入れには隠せない、 ASP.NETの要素の隠し方 についてお話しします！

2. 要素を非表示にする方法にはどんなものがあるのか

”要素を非表示にする” と言っても複数の実現方法があります。今回はその中でもよく使う ”コメントアウト”　””　”” の３つをご紹介します。
それぞれ ”記述の仕方” と ”サイトでどんな風に消えているか” を見ていきましょう(*’▽’)

まずはコメントアウトです。一番メジャーな方法かもしれません。
言語によってやり方は様々ですが、今回は <!- -　- -> と <%- -　- -%> の2つを試してみます。

<!- -　- ->
Webサイトを作る時のコメントアウトと言えばこれですよね。
私もちょっとしたコメントを書くのによく使います。

<div class="content-wrapper">
<h1><%: Title %></h1>
～見せたいもの　(*'▽')～
～隠したいもの　(/ω＼)～
～見せたいもの　(*'▽')～
書き方はこんな感じです。消したい要素の前後を囲む感じですね。
開発者ツールから見えるのは<!- -　- ->やと変わりません。

ただ、今までと違って真ん中にスペースが空いていますね。

は非表示にはなりますが、要素は同じ場所に残っているようです。

また、親要素がでも、子要素にvisibility:visibleを指定することで、一部の子要素だけを表示出来るようです。
さて今回は”要素を非表示にする方法”を3つお届けしました。

他にもC#を使ってIF文で書いたり、JavaScriptで制御するなどたくさん方法はあると思うので、興味があれば是非調べてみてください(*^^*)

最後にそれぞれどんな時によく使われるのかを少しまとめてみます。
<!- -　- ->→ちょっとしたコメントを書く時

<%- -　- -%>→開発者ツールからも消したい(サーバ側で処理して欲しくない)時

→レスポンシブデザインを作る(画面の幅によって表示する要素を変える)時

→要素は表示したくないが、その部分を詰めたくない(デザインを崩したくない)時
いかがだったでしょうか？

自分でWebサイトを作る時の参考になれば幸いです。

では良いASP.NETライフを！！
※実はこのページにもやコメントアウトで顔文字を埋め込んでみました。

時間がある人は開発者ツールで”( ﾟДﾟ)”の顔文字を検索してみてください
(￣ー￣)ﾆﾔﾘ