でんでんコンバーターでスタイルを変更する方法3(アルテさんと僕)

その1:でんでんコンバーターでスタイルを変更する方法(アルテさんと僕)
その2:でんでんコンバーターでスタイルを変更する方法2(アルテさんと僕)


「さて、前回のお話は覚えているかしら?」
「アルテさんの寝相がすごく悪い、という所まででしたね」
「どうやら脳がハッキングされているみたいね。はやく電源を落とさないと!」
「ちょっ、それで殴られた重傷じゃすみませんよ」
いったいどこから出てきたのか人の身長ほどある万年筆を振りかぶるアルテさん。「君がしょーもないこと言うからじゃないの」
「ジョークですよ。ジョーク。アイスブレイクとしてのジョーク」
はははっと乾いた笑い声をあげる僕。アルテさんの視線は、空気中の窒素すら凍てつかせる直前だ。
「とにかく本題に戻りましょう。前回紹介したように、スタイルの変更は全体に影響を与えます。でも、特定の部分だけ変えたいときもありますね」
「はい」
「そういう場合には、2つ方法があります。1つは、classかidをあてること。もう1つは、直にスタイルを書くこと」
「……なんか一気に難しそうになりましたね」
「そうでもないんだけど、CSSを知らないと難しく聞こえるかもしれないわね。じゃあ、classとidについては後回しにしましょう。今回は直にスタイルを書く方法に限定するわ」
「それだと簡単なんですか?」
「簡単というか、シンプルね。たとえば一箇所だけ見出しの文字を大きくしたい場所があったとしましょう。でんでんマークダウンだと、次のように書けば三段階目の見出しになるわね」

screenshot

「はい。そうなります」
「これは実際の所、次のように書くHTMLと同値なの」

screenshot

「というか、###で囲った部分がこのように変換されるということね。だから、変換後の形をそのまま書いても問題ないわけ。ここまではOK?」
「なんとか、大丈夫です」
「よろしい。この形で記述すると、タグの中に直接スタイルを書くことができます」
「タグというのは<h3>ですね」
「そう。つまり、こうなります」

screenshot

「こうすると、他の見出しのスタイルはそのままに、この箇所だけ表示を変更できます。この場合だと、文字サイズの変更ね」
「ふむふむ。つまり、CSSファイルの中に書くことを、ここに直接書いちゃうわけですね」
「そうです。そして、CSSファイルに同じ要素に関する指定があっても、直に書いた方が優先されます」
「優先?」
「たとえば、CSSファイルでh3にfont-size:1.1em;のスタイルが設定されていても、直にfont-size:1.3em;と書けば、そうして書いた部分だけは1.3emになる、ということ」
「指定が上書きされる、ということですね」
「まあ、そんなところね」
「でも、CSSファイルだと複数のスタイル指定ができましたよね。直に書く場合はどうなるんですか」
「改行を入れずに、そのまま連続して書けばOK。可読性はあまりよくないけど、ちょっとぐらいの変更なら気にならないと思うわ」

screenshot

「なるほど。把握しました。なんとか、これで細かい変更もできそうです」
「まあ、これはあまりスマートな方法じゃないんだけど、小さい問題ならいけるでしょう。後は、どんなスタイル指定ができるかをマスターするだけね。それは<練習問題>でやってみましょう」
「わかりました」
「じゃあ、今回の講義はこれまでです」
「ありがとうございます」

(でんでんコンバーターでスタイルを変更する方法編 終)

Related Posts with Thumbnails
Send to Kindle
Rashita
物書きをやっております。実用書から小説までなんでもござれのハイブリッド物書きです。 ライフハックや仕事術、知的生産などに興味があります。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です