CSS3 引用のソースと出典をマークする方法

疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今日は、CSS3 マークアップ参照のソースと起源を調べる方法を皆さんに紹介します。

新しいテクノロジーの出現は、多くの場合、生産性の新たな向上を意味します。 HTML5 と CSS3 の普及により、以前は非常に複雑なコードで実行されていた問題を、ますます多くの新しい方法でシンプルかつ簡単に解決できるようになりました。たとえば、HTML5 のダウンロードやプレースホルダー、CSS3 の計算機やカウンターなどの機能の登場により、Web 開発者の作業負荷は大幅に軽減されました。これらの機能の登場により、多くの労力が節約されるからです。ここでは、CSS3 の content と attr 技術を使用して、引用の著者や引用元を巧みにマークする方法を紹介します。

記事の中で他の人の言葉を引用したり、本の一節を引用したりする場合は、引用の後にその人の名前または本のタイトルを記載する必要があります。これは礼儀正しさだけでなく、敬意の表れでもあります。通常、引用の右下隅にソースを表示するには float:right を使用します。しかし、CSS3 のコンテンツと属性のテクノロジーにより、これをより巧妙に実現できます。以下は CSS3 によって実現される効果図です。

HTMLコード

三蔵法師が悪魔を洞窟の外に連れ出すと、釈迦如来が近づいて「師匠、出てきてください。弟はどこにいますか？」と尋ねたと伝えられています。

八戒は「あいつには計画がある。必ず師匠を他の誰かに取り替えるだろう」と言った。三蔵は鬼を指差して言った。

あなたの兄貴は彼のお腹の中にいます。 「八戒は笑って言った。「お腹の中で何をしているんだ？出て来い！」

孫悟空は中から叫びました。「口を開けて私が出てくるのを待ってください！」 怪物は本当に口を開けました。ウォーカーの変化

小さな子が喉に詰まって出てきそうでしたが、噛まれるのが怖かったので、鉄の棒を取り出しました。

、妖精の息を吹きかけて叫んだ。「チェンジ！」

blockquote 要素の cite 属性に気づきました。ソースを表示するために別の要素を使用するのではなく、blockquote 自体のプロパティを活用します。これは文法的にはより明確でシンプルであり、意味的にもより意味があります。

CSSコード

次に、cite 属性のコンテンツを適切な場所に表示するために、CSS の小さな部分を使用する必要があります。そのためには、CSS3 の content と attr を使用する必要があります。

ブロック引用[引用]:after {

    背景色: #666666;

    境界線: 1px 実線 #000000;

    色: #EEEEEE;

    コンテンツ: attr(cite);
    表示: ブロック;
    フォントサイズ: 小さい;
    フォントスタイル: 通常;
    パディング: 0 0.2em;
      位置: 絶対;
    右: 0.5em;
    }

実際には、:after 疑似要素を使用してオリジン情報を表示します。追加の Web 要素は追加されません。絶対位置指定を使用して右下隅に配置すると、一定の階層感も示されます。とても美しい。

要件が特に厳しくない限り、引用のソースまたは出典を示すこの方法は非常に効果的です。しかし、本へのリンクを追加する必要があるなど、非現実的な側面もあります。この使用法は、Firefox、Google Chrome、Apple Chrome などの最新のブラウザでサポートされています。IE9 はこの方法を完全にサポートしています。

要約する

CSS3 参照の起源とソースをマークする賢い方法についての記事はこれで終わりです。より関連性の高い CSS3 参照とソース コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。