ウェブページのスタイルシート(CSS)をコピーする方法:要素の検証

静的ブログのテーマは、主流が海外製のテンプレートで、調整や修正を行うことが多く、中国語コンテンツのレイアウトにはあまり考慮されない。

本文

半月ほど前、ブログのスタイルシートを調整しました。長年バックエンドサービスの開発をしているのですが、フロントエンドは純粋な初心者です。前後とも半日かけて苦戦した結果、デザインがなかなか良くありませんでした。突然閃いて、よく読む技術ブログ(infoq、开源中国など)のデザインが良いなと思い、参考にしてみようと思いました。ソースコードを拝見し、関連する要素を特定しようとしましたが、霧だらけでした。

フロントエンドの友人がこの部分を見ると笑ってしまうかもしれません。指定された要素を特定することも理解できません。理解する必要はありません。週末は時間があるから、立ち止まって考えればいいのです。以前、python で爬虫(ウェブスクレイピング)を書いたときには、似たようなものを使っていたように思います。

要素検査

そうです、ブラウザに標準搭載されている要素検査ツールを使って、スタイルシートをコピーしたり、指定した要素の位置を特定したりするのは、あっという間です。selector で要素を特定したり、hugouser define css を新規作成したりすることも可能です。

  • 元素のコピー
  • outerHTML のコピー
  • セレクタのコピー
  • JS パスのコピー
  • スタイルのコピー
  • XPath のコピー
  • 完整的 XPath のコピー
金融ITプログラマーのいじくり回しと日常のつぶやき
Hugo で構築されています。
テーマ StackJimmy によって設計されています。