00:06
神経質やせ男です。ブラウザ拡張機能の学習ログの続きです。 前回はボタンを押すと、こんにちはと表示されるだけのシンプルなポップアップを作りました。
今回はそのポップアップの見た目を少しだけカッコよくしてみました。 使ったのはCSSです。
CSSというのは、ウェブページやアプリの見た目を整えるための仕組みです。 文字の大きさを変えたり、背景色を変えたり、
余白を調整したりとデザインに関する設定を担当します。 今回のサンプルでは背景を濃い色にして文字を白色に変更しました。
さらに余白をつけたり文字サイズを調整したりして、少し見やすい画面にしています。 ここで初心者の頃の私が疑問に思ったのが、
CSSを追加したらマニフェストJSONも変更するのでは? ということでした。 実際に試してみるとマニフェストJSONは前回のままで問題ありませんでした。
なぜかというと、CSSはHTMLの見た目を変えているだけだからです。 拡張機能としてどの画面を表示するかはマニフェストJSONが担当していますが、
その画面のデザインについてはHTMLとCSSの世界で完結しています。 つまり役割が違うんですね。
またCSSはHTMLファイルの中に直接書くこともできますし、別ファイルとして分けることもできます。
どちらの方法を選んでも今回のようなケースではマニフェストJSONを書き換える必要はありません。
そして今回学習していて気になったのがポップアップの表示位置です。 今は拡張機能のアイコンを押すとそのすぐ下にポップアップが表示されます。
でもウェブサイトでよく見るような画面中央に大きく表示されるポップアップとは少し違います。
これを実現するにはJavaScriptの知識が必要になります。 ということで次の学習テーマはJavaScriptです。
ここから少し難易度が上がりますが、実際に動くものを作りながら少しずつ理解していこうと思います。
今日はブラウザ拡張機能にCSSを追加して見た目を整えたお話でした。 最後までお聞きいただきありがとうございました。
本日の内容は以上となります。 最後までお聞きいただきありがとうございました。
最後にAmazon Kindleで発売中の電子書籍のお知らせです。
キレイごとゼロの別居介護をリアルに環状ではなくシステムとExcelで立ち向かった瞬間、
手取り23万円のエンジニアがExcel一枚で実家の破綻を防いだ話、
そして実家の保守運用を行なすための時間を圧倒的にひねり出す技術を書いた
会社公認爆速仕事術 PC 魔改造、この2冊が現在Amazon Kindleにて絶賛発売中です。
どちらもKindle Unlimited読み放題の対象となっていますので、
会員の方は追加料金なしですぐにお読みいただけます。
音声を聞いた後にスマホの画面の下にある概要欄のリンクからぜひチェックしてみてください。
03:04
それではまた次回の配信でお会いしましょう。