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

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 を応援してくれることを願っています。

<<:  純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法

>>:  ウェブサイトアイコンを追加するにはどうすればいいですか?

推薦する

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

Docker ファイルの保存パス、ポート マッピング操作モードの変更

コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ(データが...

MySQL UPDATE ステートメントの「典型的な」落とし穴

目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...

Vueコンポーネントの作成方法と使用方法を説明する記事

目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...

VPSサーバーでよく使われるパフォーマンステストスクリプトの概要

これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...

小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...

Nginxはクロスドメインの問題を解決し、サードパーティのページを埋め込む

目次序文困難クロスドメイン定義nginxの機能リバースプロキシ静的と動的の分離達成しようとする最終結...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...

MySQLのロック構造の詳細な説明

Mysqlは3種類のロック構造をサポートしていますテーブルレベルのロック、低オーバーヘッド、高速ロッ...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

MySQLはmysqldump+binlogを使用して、削除されたデータベースの原理分析を完全に復元します。

1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...

Nginx+Apache の動的および静的分離の導入の詳細な例

Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....