ソースコード貼り付け用ボックスの課題
前回の「ソースコードを貼り付けるボックスを作成 (2)」で、ソースコードを張り付けるボックスの作成がほぼできました。
残りは次の2つの項目ですが、ちょっと手間取ってしまいました。両方ともCSSの設定に関するものですが、どのようにデバッグして解決したのかをメモリます。
| NO. | カスタマイズ項目 | 修正部分 |
|---|---|---|
| 4 |
ソースタイプのブロックをソースコードのブロックより少し上に出す (結果的に、出すと別の問題があり出せませんでした) |
|
| 5 | ソースコードのテキスト部分に枠と背景色がつくのを消す |
HTML |
NO.4&5の課題
どのような状態のものを、どのようにしたいか、についてですが、前回までの作成で、ソースコード貼り付け用ボックスは以下のようになりました。
ソースタイプのボックスの上が切れている(ソースコード・ボックスからはみ出た部分が表示されていない)のと、テキストの部分に枠と背景色が付いているのが想定外です。
これをカスタマイズしたいと思います。
課題の内容
早速CSSの設定をいろいろいじって、目標とするカスタマイズを行おうとしましたが、結果として次のような課題がはっきりしました。
NO.4については、以下の課題があります。
- ソースタイプのブロックをソースコードの上に出すには、どの要素のCSSの、どのプロパティを設定すればよいか
- ソースタイプのブロックをソースコードの上に出そうとすると、長いソースコードの行が枠の外まで表示されてしまう
NO.5については、以下の課題があります。
デバッグの仕方
どのCSSのルールで上記の課題が発生しているのか、ブラウザーのWeb開発ツールを使って調べました。
通常使用しているブラウザーはWindowsのFirefoxなので、PF12キーまたは Ctrl+Shift+I で開発ツールを開くことができます。
FirefoxのWeb開発ツールの説明は、ヘルプ(Document)を開くと以下のページが開きます。
ページを表示している状態で開発ツールを開くと、以下のような感じになります。
開発ツールのウィンドウを、画面の下半分以上に表示させています。開発ツールの中で、主に左端のインスペクター(ページインスペクター)を使用します。
デバッグと課題の解決方法
それぞれの課題について、どの様にデバッグして、解決方法をどのようにしたかを記述します。
NO.4の解決
ソースタイプのボックスを、ソースコード貼り付け用ボックスからはみ出して表示するようにします。
overflowプロパティ
まず、ソースコード貼り付け用ボックスの上にソースタイプのボックスをはみ出させるためのCSSのプロパティを考えます。
考えられるのは、overflowプロパティです。
overflowプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。
そこで、overflowプロパティがどうなっているかを調べます。
HTML要素の選択
ここで開発ツールを使用します。
ソースコード貼り付け用ボックスの要素まで、インスペクターのHTMLツリーに表示されているHTMLのノードを展開していきます。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。因みに、Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。
展開の仕方は、各ノードの上にカーソルを置くと、該当のWebページの部分に色が付くので、ソースコード貼り付け用ボックスの部分に色が付いたノードを展開していきます。はてなブログでは、かなり階層が深くなってますので、対象のタグ要素が出てくるまでひたすら展開していきます。ソースコード貼り付け用ボックスのpreタグまで行きつくと、次のようになります。
CSSルールの確認
ここで、真ん中のCSSルールビューで設定を確認します。CSSルールビュー では、選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べられています。
今回の対象のCSS設定である「pre.source」ルールでは、特にoverflowプロパティを指定していません。
ところが、下にスクロールしていくと「pre」ルールのところで、「overflow: auto;」を設定しています。
試しに、カーソルを「overflow: auto;」のところに持っていくとチェック・ボックスが出現するので、クリックしてチェックを外してみます。すると、下のようにソースタイプのボックスがソースコード貼り付け用ボックスの上にはみ出しました。
overflowプロパティの課題
overflowプロパティによって、ボックスをはみ出して表示させることができることが判りました。ところが、困ったことが起こりました。
「pre」タグのCSSルールで「overflow: auto;」を指定してあるので、ソースコード貼り付け用ボックスの「pre class="source"」タグのCSSルールで「overflow: visible;」を指定することにしました。すると、ソースコードの長い行が、次のようにボックスの枠を超えて表示されるようになってしまいました。
overflowプロパティには、overflow-xプロパティとoverflow-yプロパティがあり、はみ出た要素の左右と上下の表示方法を別々に指定することができるようなのですが、指定しても元に戻る(ソースタイプ・ボックスが切れる、ソース行はスクロール・バーが出る)だけで、結果的にソースコード貼り付け用ボックスからはみ出さないようになるだけでした。
結果として
残念ながら、ソースタイプのボックスをソースコード貼り付け用ボックスからはみ出させることは、当面諦めました。
取り敢えず、ソースコード貼り付け用ボックスの「pre class="source"」タグのCSSルールは「overflow: auto;」を指定することにし、ソースタイプのボックスのmarginを調整して、「margin-top: -30px;」でソースコード貼り付け用ボックス内に収めることにします。
ソースタイプのボックスをはみ出させる事は、今後の課題としたいと思います。
NO.5の解決
勝手についたテキスト部分の枠と背景色を消します。
HTML要素の選択
NO.4の課題と同じように、HTMLツリーの中でノードを展開してHTML要素を探します。
テキストの部分は、codeタグの要素になっています。
CSSルールの確認
ところが、真ん中のCSSルールビューで設定を確認したところ、具体性が高いルールとして「.entry-content code」が一番最初に出てきています。このルールは、はてなブログの方で設定されています。
この中で、borderプロパティとbackground-colorプロパティを設定しているために、テキスト部分に枠と背景色が付いていました。試しに、borderプロパティとbackground-colorプロパティのチェックを外してみると、消えることが確認できます。
対応方法
一番具体性が高いルールとして「.entry-content code」が選ばれているので、それよりも具体性が高いCSSルールを設定することにします。
以下のように、codeタグにクラス名「source-code」をつけて、CSSルールを設定することにしました。それにより、テキスト部分の枠と背景色を消すことができました。
以上で、ソースコード貼り付け用ボックス自体の作成は終わりました。