hr 要素が未だに廃止予定にないので、たまに記事の中で使ってますが、align, noshade, size, width 属性が廃止予定なのと CSS の border 関係のプロパティと見た目が余りに違うので、統一して使用してます。この記事では、その見た目を同じにする CSS の小技を一つ…

1. hr
2. {
3.   padding: 0em;
4.   border-top: 1px solid #dcdcdc;
5.   border-left: none;
6.   border-bottom: none;
7.   border-right: none;
8.   color: #212121;
9.   background-color: #212121;
10. }

斜体部分の色指定はお好みで…因みにこんなのでもいいです

1. hr
2. {
3.   padding: 0em;
4.   border: none;
5.   border-top: 1px solid #dcdcdc;
6.   color: #212121;
7.   background-color: #212121;
8. }

参照

• hr 要素
• border

Firefox を 2 から 3, 4 へアップグレードしたのはいいが、userChrome.css がほとんど反映されていなかったので、DOM Inspector を使いながら userChrome.css を修正していきました。この記事はそれをまとめたものです ¹

• ブックマークツールバーのアイコンを非表示に
• 検索バーの虫メガネアイコンを非表示に
• 履歴メニューを非表示に
• ステータスバーのリサイズパネルを非表示に
• ブックマークメニューの不要な項目を非表示に
• ブックマークのメニューからタブですべて開くを非表示にする
• HTTPS ページ表示時のロケーションバーバーの背景色を変更
• 現行バージョン (3.6.13) 対応部分

現行バージョン (3.6.13) 対応部分

幾つのバージョンからは不明ですが、ブックマークメニューの余計なセパレーターの非表示にできなかったのが、現行バージョン (3.6.13) で可能となったので、その部分の対応部分です

/* セパレーター (3.6.13) */
#bookmarksMenuPopup > menuitem:first-child + menuitem + menu + menuitem + menuitem + menuseparator + menu + menuseparator,
#bookmarksMenuPopup menuseparator[class="bookmarks-actions-menuseparator"]
{
  display: none !important;
}

ブックマークツールバーのアイコンを非表示に

ブックマークツールバーは通常はアイコンとテキストの両方を表示してますが、私はブックマークツールバーに入れているブックマークアイテムのテキストは 1文字にしていますので、² アイコンの表示は必要ないので、非表示にします

変更前 : ブックマークツールバー

変更後 : ブックマークツールバー

/**
 * ブックマークツールバーフォルダのアイコン非表示
 */
hbox#bookmarksBarContent .toolbarbutton-icon
{
  display: none !important;
}
hbox#bookmarksBarContent toolbarbutton[image*="data:image"] .toolbarbutton-icon
{
  display: none !important;
}
.bookmark-item > .toolbarbutton-icon { /* 4.0 用 */
  display: none !important;
}

検索バーの虫メガネアイコンを非表示に

私にとっては邪魔なだけなので、消えてもらいます

変更前 : 検索バー

変更後 : 検索バー

/*
 * 検索バーの検索ボタン(虫メガネアイコン)を非表示
 */
#searchbar .search-go-button
{
  display: none !important;
}

履歴メニューを非表示に

まったく使わないので消えてもらいます

変更前 : メインメニュー

変更後 : メインメニュー

/*
 * メニューの「履歴」を非表示
 */
#history-menu
{
  display: none !important;
}

ステータスバーのリサイズパネルを非表示に

邪魔なので消えてもらいます

変更前 : ステータスバー

変更後 : ステータスバー

/*
 * ステータスバーのリサイズパネルを非表示
 */
#status-bar .statusbar-resizerpanel
{
  display: none !important;
}

ブックマークメニューの不要な項目を非表示に

まったく使わないので消えてもらいます

変更前 : ブックマークメニュー

変更後 : ブックマークメニュー

/*
 * ブックマークのメニューから以下の項目とその下のセパレーターを非表示にする
 */
/* このページをブックマーク */
#bookmarksMenuPopup menuitem[command="Browser:AddBookmarkAs"],

/* このページを購読... */
#bookmarksMenuPopup #subscribeToPageMenuitem,
#bookmarksMenuPopup #subscribeToPageMenupopup,

/* すべてのタブをブックマーク... */
#bookmarksMenuPopup menuitem[command="Browser:BookmarkAllTabs"],

/* ブックマークの管理... */
#bookmarksMenuPopup menuitem[command="Browser:ShowAllBookmarks"],

/* セパレーター */
#bookmarksMenuPopup #organizeBookmarksSeparator,

/* よく見るページ 最近ブックマークしたページ
   最近付けたタグ ブックマークツールバー */
#bookmarksMenuPopup .bookmark-item[label*="よく見るページ"],
#bookmarksMenuPopup .bookmark-item[label*="最近ブックマークしたページ"],
#bookmarksMenuPopup .bookmark-item[label*="最近付けたタグ"],
#bookmarksMenuPopup .bookmark-item[label*="ブックマークツールバー"],

/* セパレーター */
#bookmarksMenuPopup menuseparator[builder="start"]
{
  display: none !important;
}

修正、項目を加えました。凄く…スッキリしました

さらに変更後 : ブックマークメニュー

ブックマークのメニューからタブですべて開くを非表示にする

危険なので消えてもらいます

変更前 : ブックマークメニュー

変更後 : ブックマークメニュー

/*
 * ブックマークのメニューから タブですべて開く とその上のセパレーターを非表示にする
 */
#bookmarksMenuPopup menuitem[label*="タブですべて開く"],
#bookmarksMenuPopup menuseparator[builder="end"]
{
  display: none !important;
}

HTTPS ページ表示時の ロケーションバーの背景色を変更

何故か 3 になってから色が変化しません…なので、背景色を変更します

変更前 : ロケーションバー

変更後 : ロケーションバー

/*
 * ロケーションバーの背景色変更
 */
#urlbar[level="high"][pageproxystate="valid"],
#urlbar[level="low"][pageproxystate="valid"],
#urlbar[level="high"][pageproxystate="valid"] > :not(#identity-box):not(#urlbar-icons),
#urlbar[level="low"][pageproxystate="valid"] > :not(#identity-box):not(#urlbar-icons),
#urlbar[level="high"][pageproxystate="valid"] > :not(#identity-box)>:not(dropmarker):not(progressmeter):not(.progress-bar),
#urlbar[level="low"][pageproxystate="valid"] > :not(#identity-box)>:not(dropmarker):not(progressmeter):not(.progress-bar)
{
  color: #000000 !important;
  background-color: #e0ffff !important;
}

#e0ffff の部分はお好みで変更して使用します。Firefox 2 の時の色は #f5f6be です

ID や class 名称が変更になっているので、DOM Inspector で探し当てるのがめんどくさかった…特にブックマークメニューやセパレーターが ID, class 名が割り振られていないので、CSS Selectors を使用してやや強引にしてあります。取り敢えず、私の環境では無問題なのでコレで良しとします

更新履歴

1. 記事にする前に某掲示版の某スレッドへ書き込んでいました…('A`)
2. 変わった使い方だって？そうですか…('A`)

この件で検索を行っても CSS を PHP のヒアドキュメントとして、記載する方法が見つからなかったのでメモとして記事にします

CSS を記載する方法としては style 要素の中に記述するか、link 要素の中にスタイルシートの URI を記載して UA に読み込ませると言う 2つの方法がありますが、今回、ここで記載するのは後者の方です。何故この様な事を考えたかと言うと、いい加減此処の超カオス気味のスタイルシートを何とかしたいと思った次第です

PHP の公式マニュアルによると PHP: 基本的な構文 - Manual たいていの場合、PHP は HTML ドキュメントの中に埋め込まれます と記載されています。たいていの場合？ では、別に HTML でなくてもいい訳です。参照先にその具体例が記載されています。そこで、まず行ったのが HTML の head 要素内の link 要素を以下の様に修正

<link rel="stylesheet" type="text/css" href="filename.php" media="all" />

スタイルシートを指定しているファイルのサフィックス部分が php になっている所がポイント。で、実際のスタイルシートファイル(.php) は以下の様に記述します

@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

ブラウザをリロード行っても…真っ白けです。どぎつい配色になるはずなんですが、これはスタイルシートが適用されていないようです。つまり、UA がスタイルシートとして認識しなかったようです。そこで Proxomitron ¹ のログウィンドウを開いて、もう一度リロードを行います。案の定 PHP が HTTP レスポンスヘッダー Content-Type のメディアタイプに text/html として返しています。これが原因の様です。つまり、スタイルシートならばメディアタイプを text/css として返さなければならないのに UA に対して HTML 文書ファイルですよ。と、返してしまっている訳です。これは、PHP の設定 default_mimetype が text/html となっているので正常な動きです。そこで、スタイルシートファイル(.php) を以下の様に修正します

<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

どうってことはありません。header 関数にてデフォルトのヘッダーを置き換えてやっているだけです。ブラウザを再度リロードするとスタイルシートが認識されました。本来ならば、ここで終了なんですが、link 要素のファイル名の指定が php となっているのがどうもかっこよくない。そこで、HTTP サーバーのアクセス制御ファイルを以下の様に記述します ²

<FilesMatch "filename\\.css">
  SetHandler application/x-httpd-php
</FilesMatch>

あとは、HTML の head 要素内の link 要素のファイル名指定部分の php を css に変更。実際のファイル名も css に変更。実際にブラウザをリロードしてアクセス制御ファイルが効いているか確認して終わりです

これには色々と応用が効きます。各 UA に対応させる為に UA のバグを逆用して苦労してスタイルシートの読込みの振り分けなどを行っている様ですが、PHP 変数の $_SERVER["HTTP_USER_AGENT"] で判定を行えばいいのです。³ 他には、色を容易に変更できる様に PHP の変数としておけば、変数の値を変更するだけで配色の変更が可能です。などなど…PHP コードが記述できるので、良いと思います ⁴

1. 私が常用している HTTP フィルタリングソフト。参照: Proxomitron-J
2. Apache HTTP Server の場合
3. $_SERVER["HTTP_USER_AGENT"] は UA によっては偽装できるので完全に振り分けることは不可能です
4. PHP が動かせて、なおかつ、HTTP サーバーアクセス制御ファイルが置けない環境じゃないと意味ありませんが…

CSS 関連の記事はほとんどが IE では意味ないので悪しからず。さて、件の通り CSS の content プロパティの counters を使用した事を書いていきたいと思います。この件で検索すると例を載せた詳しい解説は山の様にあるのですが、親子孫(入れ子構造、ネスト構造とも言う) 関係を考慮した開始番号を指定して自動連番を行うという手法が見当たらなかったので、記事にします

実際、Panels UI Commands reference : 私的マニュアル の記事でこの手法を使っています。この記事の中で使用している ol 要素の CSS に自動連番を行っています。ダラダラと前置きが長くなるので、サッサと本題に入りましょう

1. ol {
2.   counter-reset: item 9;
3. }
4. li ol {
5.   counter-reset: item;
6. }
7. ol li {
8.   display: block;
9. }
10. ol > li::before {
11.   content: counters( item, "." )". ";
12.   counter-increment: item;
13. }

文章は一般的には 章 > 節 > 項 といった親子孫関係と言ったネスト構造となっています。新しい項が開始される際には、項は 1 から始まり、また、同様に新しい節が開始される際には、節は 1 から始まります。章は大元なので一つの章が終了しても、章番号は継続されなければなりません

上記サンプル CSS 1～3行では、カウンターの開始番号を指定しています。章番号は 10 番から開始したいので 9 と指定しています。しかし、このままだと 節、項 の番号も 10 番から開始されてしまうので、4～6 行にて大元の親以外の ol 要素にカウンターのリセットを指定しています。li 要素の中に含まれる全ての ol 要素を対象としているので、大元の ol 要素には適用されません

太字で記述されている部分が、カウンターにする任意の名称です。同一の HTML 文書において一意な名称にする事をお薦めします。斜体文字の部分は開始する番号を指定します。この例ですと 10 番から開始される事になります

item って、同じ名前使ってるじゃん。おかしくならないのか？と、疑問に思われる方もいると思いますが、CSS3 Generated and Replaced Content Module ここの記述からも解るように、ネスト構造の場合は内部的に自動的に新しいカウンターを生成します。プログラミングで言うならば、ローカル変数のスコープ範囲と言った所でしょうか