私は大学のウェブサイトをもうすぐ完成させます (実際には、多少の微調整を除いてほとんど完成しています)。助けてくれた何人かのブロガーとスタック オーバーフロー コミュニティに感謝の意を表したいと思います。大きな助け。現在、この方法で非表示になっているテキスト セクションがあります。
<font style="font-size:0px"> - text </font>
でも、もっといい方法がありそうな気がします。ある?
これはスペースを保持しますが、何も表示しません。
opacity: 0.0;
これにより、オブジェクトが完全に非表示になり、その (予約された) スペースも非表示になります。
display: none;
<div style="display:none;">CREDITS_HERE</div>
css プロパティを使用して非表示にすることができます style="display:none;"
<div style="display:none;">CREDITS_HERE</div>
CMS によって除外されるため、HTML コメントを使用できないとおっしゃいました。したがって、あなたは本当にこのコンテンツを非表示にしたいので、表示する必要はないと思います。
その場合、プレゼンテーション レベルでのみ再生し、コンテンツ レベルには影響しないため、CSS (のみ) を使用しないでください。CSS を無視するユーザー エージェント (テキスト ブラウザー、フィード リーダー、スクリーン リーダー、ボットなどを使用するユーザー) に対しても、コンテンツを非表示にする必要があります。
HTML5 にはグローバルhidden
属性があります:
要素で指定された場合、その要素がまだページの現在の状態に直接関連していないか、もはや関連していないこと、またはページの他の部分で再利用されるコンテンツを宣言するために使用されていることを示します。ユーザーが直接アクセスします。
hidden
ユーザー エージェントは、指定された属性を持つ要素をレンダリングすべきではありません。
例(「属性」であるため、ここでsmall
要素を使用):
<small hidden>Thanks to John Doe for this idea.</small>
フォールバックとして (属性を知らないユーザー エージェント用hidden
)、CSS で指定できます。
[hidden] {display:none;}
プレーン テキストの一般的な要素は、「データ ブロック」として使用されるscript
要素です。
<script type="text/plain" hidden>
Thanks to John Doe for this idea.
</script>
data-*
または、既存の要素に属性を使用することもできます (div
属性のためにいくつかの要素をグループ化したい場合は、新しい要素に対応します)。
<p data-attribution="Thanks to John Doe for this idea!">This is some visible example content …</p>
これを達成するための 2 つの方法を次に示します。
何も表示しないか、不透明度をなしにすることができます...しかし、不透明度をクロスブラウザー互換にしたい場合は、これをcssに追加する必要があります
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
css プロパティを使用するstyle="display:none"
か、style=visibility:hidden"
CSS プロパティvisibility
を使用して、 に設定しhidden
ます。
詳細はこちらでご覧いただけます。