三男パパのHP更新奮闘記

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:-- | EDIT | TOP

「今日のひとこと」コーナー新設

entryimage_441.png

おはようございます!
日々着々とリニューアルされていく自社サイトに、ワクワクが止まらない@knob_papaです。
もちろん、リニューアル作業をしているのは私自身ですがwww

マインズ千間台校のページに「今日のひとこと」コーナーを新設してみました。
「その日の印象深い出来事を37文字以内*1で綴る」というコーナーです。

他のスタッフの賛同が得られなかった*2ので、千間台校だけ独断専行でスタートしてみました。面白い企画だと思うんですけどね…。確かに「ほぼ毎日」ってのは大変かもしれませんが、たった37文字ですので*3!w

どちらかと言えば、在校生とその保護者向けのサービスですが、気が向いたらぜひ覗きに来てみてください。お待ちしています。

*1 :
なぜ37文字か?メイリオ&Verdanaでの表示とスクロールバーの幅を考慮して「1行」で収めようとするとこれが限界だからです。
*2 :
廃案になったわけではありませんので、賛同してくれる“熱い”スタッフがいれば、他の教室でも近々スタートするかもしれません。越谷校あたりは、きっと来週中にはアップされていることでしょうw
*3 :
37文字以内で収めるって方がむしろ難しいんですけど…(^_^;)

スポンサーサイト
03:11 | Trackback : 0 | Comment : 1 | EDIT | TOP

Twitterプロフィールウィジェットのカスタマイズ

エントリイメージ438

ブログエントリのトップイメージを如何にすべきなのか、いろいろと試行錯誤している三男パパ(@knob_papa)です。
とりあえず今回は、エントリの題材に合わせて、実際にカスタマイズしたウィジェットを設置したホームページをキャプチャしてみました。

さてさて、なかなか便利なTwitterプロフィールウィジェットですが、サイトデザイン・ブログデザインによっては、そのままではしっくりこないことも多々あることでしょう。
そこで今回はTwitterプロフィールウィジェットのカスタマイズ方法に関して、詳細に解説していきたいと思います。

Twitterウィジェットのダウンロード

まずは公式サイトからプロフィールウィジェットをダウンロードしましょう。
下記リンクから、「自分のサイト」→「プロフィールウィジェット」の順にクリック。
あとは好きなようにカスタマイズ!(どうせあとから自由にいじれますw)

色と幅のみ調整したウィジェット

右は、設置するサイトのメインカラーと設置場所に合わせて、色と横幅のみ調整したウィジェットです。まあ、ほぼデフォルト状態ってことですね。

まあ、この時点で自分のサイトイメージにしっくりくるなら、何の問題もありません。さっさとコードを貼り付けて終了です。
…… と上手くいけばよかったのですが、今回は個人的にどうしても納得のいかない点がいくつかあり、カスタマイズしてみました。

不満点(あくまで個人の感想ですw)
  • とにかく目立ちすぎwww たぶんページ内でいちばん目立つ。これが最大の問題点。
  • 外枠はまだしも、内枠の角丸がめっちゃダサい。ここを丸くするセンスを疑う。
  • サイト全体のフォントはメイリオ+Verdanaなのに、ウィジェットはMS Pゴシック+Tahomaになっている。
  • 全ツイートの冒頭に表示される自分のプロフィール名が不要。くどい。
  • 最下部(投稿日時・reply・retweet・favoriteが表示される部分)って右寄せの方が良くね?

ということで、これらの大問題を解決すべく、カスタマイズしていきますよ。

コードを貼り付ける

公式サイトで手に入れたコードを、HTMLのウィジェットを表示したい部分(ブログならサイドプラグイン)に貼り付けます。このとき、あとでCSSをいじるときに便利なので、コード全体を<div>で囲んで、任意のid名をつけておきます。私はまんま"twitter_widget"というid名にしましたw

なお、後述するCSSは外部CSSファイルとして保存してサーバーにアップします。そのリンクをコードの直後(下記CSSの31行目)に記述します。
<div id="twitter_widget"> <!-- id名を指定 -->
<p><a href="https://twitter.com/mains_info" target="_blank">@mains_info on Twitter</a></p>
	<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
	<script>
	new TWTR.Widget({
		version: 2,
		type: 'profile',
		rpp: 1, // ウィジェットに表示するツイート数
		interval: 30000,
		width: 276, // ウィジェットの横幅
		height: 100, // ウィジェットの高さ(自動調整される/minimum heightか!?)
		theme: {
			shell: { // ヘッダ・フッタ・外枠の背景色・文字色/transparent=透明
				background: 'transparent',
				color: '#ffffff'
			},
			tweets: { // ツイート表示部分の背景色・文字色/transparent=透明
				background: 'transparent',
				color: '#333333',
				links: '#999999'
			}
		},
		features: {
			scrollbar: false,
			loop: false,
			live: false,
			behavior: 'all'
		}
	}).render().setUser('mains_info').start();
	</script>
	<link rel="stylesheet" type="text/css" href="twitter_widget.css">
</div>
上記の横幅・高さ・背景色・文字色は最終的に完成したウィジェットのものです。自分のサイト・ブログに合わせて変更してください。
また、2行目の<p>タグは、ヘッダ・フッタを非表示にしたあとに、新たにプロフィール名を表示するために付け加えたものです。

<h3><h4>タグのCSSをリセット

きっと最初にはまるのがこれです。
最後に示したTwitterウィジェットのHTML構造をご覧になっていただければお分かりになるかと思いますが、実はヘッダ部分のプロフィール名(mains_info)の表示に<h4>タグが、ユーザー名(マインズ)の表示に<h3>タグが使われています。

もしサイトやブログのCSSで<h3>や<h4>タグのスタイルが定義されている場合、この部分にも反映されてしまいますので、これをリセットしてあげるCSSを記述しなければなりません。
HTMLやCSSに詳しくない場合、この点に気付かずにはまる可能性があります。私も初心者の頃どつぼにはまりましたw で、結局ウィジェットの設置をあきらめた苦い思い出がありますw

CSSのリセットは、サイトやブログによって異なりますので自力で解決するのがベストだとは思いますが、一応例をあげておきます。ここでさっそく、先ほど設定した<div>のid名が役立ちます。

なお、CSSは必ず外部CSSファイルに記述して、任意の名前をつけて保存しておきましょう。
#twitter_widget h3, #twitter_widget h4 {
	border: none;
	background-image: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: 100%;
	font: inherit;
}
ここで確認のために外部CSSファイルをサーバーにアップし、先ほどのHTMLにリンクを記述します。もちろん "twitter_widget.css" の部分は自分のCSSファイルのURLに変更してください。

CSSでウィジェットをカスタマイズ

最終的には右の形に持っていきます。

まずはウィジェットを囲んでいる<div>タグのCSSから。
前述のscriptコードを見れば分かるとおり、ウィジェット自体の色は背景色透過(transparent)にしてありますので、この<div>タグの枠線・背景色がそのまま反映されるようになっています。
/*----- widget外部ボックス(の部分) -----*/
#twitter_widget {
	border: 2px solid #ddd;
	background-color: #f9f9f9;
	margin: 10px 0;
}
#twitter_widget > p { /*"@mains_info on Twitter"表示部分の修飾*/
	font-weight: bold;
	text-align: center;
	background-color: #ddd;
	padding: 0;
	margin: .5em .5em .2em .5em;
}
#twitter_widget > p a:link, #twitter_widget > p a:visited, #twitter_widget > p a:active {  /*"@mains_info on Twitter"表示部分のリンク色*/
	color: #333 !important;
}
#twitter_widget > p a:hover { /*"@mains_info on Twitter"部分のhover色*/
	color: #e00 !important;
}

次にウィジェット本体のカスタマイズです。まずは、センスのない角丸を無効にし、ヘッダとフッタを非表示にします。
/*----- widget内部カスタマイズ -----*/
.twtr-doc { /*外枠角丸を解除*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0
}
.twtr-timeline { /*内枠角丸を解除*/
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.twtr-hd {
	display: none; /*ヘッダーを非表示に*/
}
.twtr-ft{
	display: none; /*フッターを非表示に*/
}

次に、ツイートを複数表示する場合のツイート間の区切り線のCSSを変更します。結局私は、ツイートを1つしか表示しないようにしましたので、最終的にはこのCSSは使いませんでした。
なお、デフォルトCSSに優先させるために、"!important"をつける必要のあるプロパティもあります。デフォルトCSS(エントリ最下部に記載)と比べながら作業していくことになりますが、面倒な場合は、全部つけちゃうのが手っ取り早いですw
.twtr-tweet{
	border-bottom: 2px solid #ddd !important; /*ツイート間の区切り線*/
	border-top: none !important; /*border-topは消去*/
}
#tweet-id-1 {
	border-bottom: none !important; /*最下段ツイートの区切り線消去*/
}

最後に、フォントの変更、ツイート冒頭のプロフィール名の消去、hover色変更、最下部(投稿日時・reply・retweet・favoriteが表示される部分)のカスタマイズです。
.twtr-tweet-text, .twtr-hd, .twtr-ft { /*フォント変更*/
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
}
a.twtr-user {
	display: none !important; /*プロフィール名を消去*/
}
#twitter_widget a:hover {
	color: #ee0000 !important; /*hoverフォント色*/
	text-decoration: none !important; /*下線を消去*/
	border: none !important;
}
em { /*最下部のカスタマイズ*/
	text-align: right !important;
	padding-top: .3em !important;
	padding-right: .2em !important;
	margin-top: .8em !important;
	border-top: 1px dotted #ddd;
}
これで完成です!
もちろん最後に外部CSSファイルをサーバーにアップロードするのを忘れないでください。

まとめ

今回のまとめです。
  • ホームページにTwitterプロフィールウィジェットを設置する場合、ツイート数は1つにした方が、告知板のように使えてすっきりする気がする。
  • <h3><h4>タグのCSSリセットに気づいた自分に、成長を感じたw
  • Chromeのデベロッパーツール(F12キー)はかなり便利

おまけ - TwitterプロフィールウィジェットのHTML構造とデフォルトCSS

自分の好きなようにカスタマイズする場合、HTML構造とデフォルトCSSがわかっていると非常に楽ですので、参考までに以下に示しておきます。カスタマイズ好きな人にとっては、これがあるとないとでは大違いですよね。

HTMLは、Chromeの場合、ウィジェットを貼り付けたサイトでデベロッパーツールを起動して(F12キー押下)HTML階層を降りていけば見つかります。なお、下記のHTMLはこちらのツイートを1つのみウィジェットに表示している場合の構造です。

CSSはこちらのものをProCCSorで整形しました。

それにしてもHTML構造の深いことといったら!w
<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">
    <div class="twtr-doc" style="width: 276px;">
        <div class="twtr-hd">
            <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info" class="twtr-profile-img-anchor">
            <img alt="profile" class="twtr-profile-img" src="http://a0.twimg.com/profile_images/1041776946/mains_logo_02_normal.png">
            </a>
            <h3>マインズ</h3>
            <h4>
                <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info">mains_info</a>
            </h4>
        </div>
        <div class="twtr-bd">
            <div class="twtr-timeline" style="height: auto;">
                <div class="twtr-tweets">
                    <div class="twtr-reference-tweet"></div>
                    <div id="tweet-id-1" class="twtr-tweet">
                        <div class="twtr-tweet-wrap">
                            <div class="twtr-avatar">
                                <div class="twtr-img">
                                    <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info">
                                    <img alt="mains_info profile" src="http://a0.twimg.com/profile_images/1041776946/mains_logo_02_normal.png">
                                    </a>
                                </div>
                            </div>
                            <div class="twtr-tweet-text">
                                <p>
                                    <a target="_blank" href="https://twitter.com/intent/user?screen_name=mains_info" class="twtr-user">mains_info</a>マインズスタディルーム(<a href="http://t.co/Vcs3uupf" target="_blank" urlentities="[object Object]" rel="nofollow">goo.gl/Zuy0P</a>)では、来週月曜日(23日)から始まる夏期講習受講生を募集しています。当日申し込みも受け付けておりますので、ご遠慮なくお問い合わせください。
                                    <a href="http://twitter.com/search?q=%23塾" title="#塾" class="tweet-url hashtag" target="_blank">#塾</a>
                                    <a href="http://twitter.com/search?q=%23個別指導" title="#個別指導" class="tweet-url hashtag" target="_blank">#個別指導</a>
                                    <a href="http://twitter.com/search?q=%23越谷" title="#越谷" class="tweet-url hashtag" target="_blank">#越谷</a>
                                    <a href="http://twitter.com/search?q=%23草加" title="#草加" class="tweet-url hashtag" target="_blank">#草加</a>
                                    <a href="http://twitter.com/search?q=%23東川口" title="#東川口" class="tweet-url hashtag" target="_blank">#東川口</a>
                                    <a href="http://twitter.com/search?q=%23せんげん台" title="#せんげん台" class="tweet-url hashtag" target="_blank">#せんげん台</a>
                                        <em>
                                            <a target="_blank" class="twtr-timestamp" time="Sat Jul 21 12:51:14 +0000 2012" href="https://twitter.com/mains_info/status/226660606961414144">yesterday</a>&#183;
                                            <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=226660606961414144">reply</a>&#183;
                                            <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=226660606961414144">retweet</a>&#183;
                                            <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=226660606961414144">favorite</a>
                                        </em>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- tweets show here -->
                </div>
            </div>
        </div>
        <div class="twtr-ft">
            <div>
                <a target="_blank" href="https://twitter.com"><img alt="" src="http://widgets.twimg.com/i/widget-bird.png"></a>
                <span>
                    <a target="_blank" class="twtr-join-conv" style="color:#ffffff" href="https://twitter.com/mains_info">Join the conversation</a>
                </span>
            </div>
        </div>
    </div>
</div>
.twtr-widget {
    position: relative;
    font-size: 12px!important;
    font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
    zoom: 1;
}
.twtr-fullscreen { font-size: 220%!important }
.twtr-fullscreen .twtr-new-results { _display: none!important }
.twtr-inactive { display: none }
.twtr-widget a img { border: 0!important }
.twtr-doc {
    overflow: hidden;
    width: 100%;
    text-align: left;
    font-weight: normal;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.twtr-bd { padding: 0 1px }
.twtr-widget .twtr-tweet-wrap {
    padding: 6px 8px;
    overflow: hidden;
    zoom: 1;
}
.twtr-fullscreen .twtr-tweet-wrap { padding: 20px }
.twtr-widget .twtr-tweet {
    border-bottom: 1px dotted #ddd;
    overflow: hidden;
    zoom: 1;
}
.twtr-widget-profile img.twtr-profile-img {
    display: block;
    float: left;
    width: 31px;
    height: 31px;
    border: 0!important;
}
.twtr-widget h3,
.twtr-widget h4,
.twtr-widget p {
    margin: 0!important;
    padding: 0!important;
    line-height: 1.2!important;
    width: auto!important;
}
.twtr-widget-profile h3,
.twtr-widget-profile h4 { margin: 0 0 0 40px!important }
.twtr-widget h3 {
    font-size: 11px!important;
    font-weight: normal!important;
}
.twtr-widget h4 { font-size: 16px!important }
.twtr-widget em,
.twtr-widget .twtr-new-results {
    font-size: 9px;
    font-style: normal;
    display: block;
    margin-top: 2px;
    zoom: 1;
}
.twtr-widget .twtr-new-results {
    text-align: center;
    padding: 3px;
    margin: 0 auto -10px auto!important;
    display: block;
    position: relative;
    bottom: 5px;
    line-height: .9;
}
.twtr-results-inner {
    line-height: 1;
    font-size: 100%;
    padding: 4px 0;
    position: relative;
    bottom: -2px;
    width: 40%;
    margin: 0 auto;
    z-index: 2;
    text-align: center;
}
.twtr-results-hr {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 1px;
    border-bottom: 1px dotted #ddd;
    bottom: 7px;
    background: none;
    overflow: hidden;
}
.twtr-new-results span {
    position: relative;
    z-index: 3;
    top: -14px;
    display: block;
    font-size: 9px!important;
}
.twtr-fullscreen .twtr-new-results span { font-size: 24px!important }
.twtr-hd {
    padding: 10px;
    position: relative;
    zoom: 1;
    overflow: hidden;
}
.twtr-fullscreen .twtr-hd {
    height: 0;
    padding: 0;
}
.twtr-timeline {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    height: 225px;
}
.twtr-scroll .twtr-timeline {
    overflow-x: hidden;
    overflow-y: auto;
}
.twtr-widget .twtr-tweet:last-child { border-bottom-width: 0 }
.twtr-ft { position: relative }
.twtr-ft div {
    overflow: hidden;
    padding: 10px;
    zoom: 1;
}
.twtr-ft span {
    float: right;
    text-align: right;
}
.twtr-ft a {
    float: left;
    display: block;
}
.twtr-ft span a { float: none }
.twtr-avatar {
    width: 40px;
    height: 40px;
    float: left;
    overflow: hidden;
    display: block;
}
.twtr-fullscreen .twtr-avatar {
    width: 80px;
    height: 80px;
}
.twtr-img {
    height: 25px;
    width: 25px;
}
.twtr-img img {
    width: 30px;
    height: 30px;
}
.twtr-fullscreen .twtr-img img {
    width: 72px;
    height: 72px;
}
.twtr-fullscreen a.twtr-join-conv { display: none }
.twtr-tweet-text { margin-left: 40px }
.twtr-fullscreen .twtr-tweet-text { margin-left: 90px }
.twtr-doc a { text-decoration: none!important }
.twtr-doc a:hover { text-decoration: underline!important }

参考エントリ

多謝。

08:08 | Trackback : 0 | Comment : 0 | EDIT | TOP

FC2ブログにおけるSyntaxHighlighter3.0.83導入に関する備忘録



SyntaxHighlighter3.0.83の美しさとカスタマイズ性の高さに惚れ惚れしている三男パパ(@knob_papa)です。

@cazukiさんのアドバイスでSyntaxHighlighter3.0.83を導入してから早数時間。忘れないうちに導入に関する備忘録を記しておきます。

今回は文字通り単なる「備忘録」で、間違っても手取り足取り説明しているエントリではありませんので、検索エンジンに誘われてこのエントリにいらっしゃった方には、Google先生に再相談されることを強くおすすめいたします。

SyntaxHighlighterの導入

ダウンロードサイト

右上「download」から。ジャンプ先のページで、最新版だけでなく以前のバージョン(2.0/2.1)もダウンロード出来ます。表示や使い勝手がバージョンによって異なるようで、旧バージョンもかなり人気があるらしいです。コードのコピーがしやすいという理由から、私は最新の3.0.83を導入しました。

参照ブログエントリ

他にもいろいろと参考にしましたが、最もわかりやすかったエントリはこちら。多謝。

アップロードしたファイル

上記参照ブログを含め、SyntaxHighliterの導入を解説しているブログはたくさんありますが、それらを見る限り必須ファイルに関しては諸説あるようです。私がアップロードしたのは以下のファイルです。もちろん、まったく問題なく動いています。
  • 必須JSファイル
    • shCore.js
  • 必須CSSファイル
    • shCoreDefault.css
  • 任意JSファイル
    • shBrushXml.js
    • shBrushCss.js
    • shBrushJScript.js
    • shBrushPhp.js

HTMLテンプレート修正

<head>~</head>内にCSSファイルへのリンクタグを追加。
<link href="http://***/shCoreDefault.css" type="text/css" rel="stylesheet">

以下を</body>タグの直前に追加します。読み込みスピードを重視する場合は、<%topentry_more>の直後に追加する方がいいらしいです。
<script type="text/javascript" src="http://***/shCore.js"></script>
<script type="text/javascript" src="http://***/shBrushXml.js"></script>
<script type="text/javascript" src="http://***/shBrushCss.js"></script>
<script type="text/javascript" src="http://***/shBrushJScript.js"></script>
<script type="text/javascript" src="http://***/shBrushPhp.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

記述方法/CSSカスタマイズ

実際の記述方法

基本的には class="brush: html;" といった形式で、使用言語を小文字で指定すればOK。特定の行をハイライトしたい場合は、class内で言語の指定に続けて "highlight: [行番号,行番号,…];" と記述します(下記【CSSの場合】参照)。
<pre class="brush: html;" title="タイトル">
    <!-- HTMLを記述 -->
</pre>
<pre class="brush: css; highlight: [18,22,23];" title="タイトル">
h1 {
	/* CSSを記述 */
}
</pre>

CSSはおそらく問題ないようですが、HTMLの場合<pre>タグ内では特殊文字が使えないとのことです(未確認)。そんなときは特殊文字を<pre>タグ内で使える実体参照に変換してくれる以下のサイトが便利です。私は最初からここで変換してからペーストしています。

CSSカスタマイズ

私がshCoreDefault.cssをいじった箇所のみをピックアップして記しておきます。shCoreDefault.cssファイル内で検索をかけると見つけやすいかもしれません。今後も大いにいじくる予定ですので、参考にならない可能性の方が高そうですが…。
/*----- Chromeでの縦スクロールバー消去 -----*/
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; /*追加*/
}

/*----- タイトル領域のカスタマイズ -----*/
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: 0.3em 0 0.3em 0.5em !important; /*値変更*/
  background-color: #6ce26c !important; /*追加*/
  border-bottom: 5px solid #fff !important; /*追加*/
}

/*----- 偶数行に背景色をつける -----*/
.syntaxhighlighter .line.alt1 {
  background-color: white !important; /*奇数行の場合はこちらを変更*/
}
.syntaxhighlighter .line.alt2 {
  background-color: #f8f8f8 !important;  /*カラー値変更*/
}

09:19 | Trackback : 0 | Comment : 0 | EDIT | TOP

<dl><dt><dd>を使った横並びリストと隣接兄弟セレクタ



アホみたいに暑い日が続きますが、皆さまいかがお過ごしですか。

最近コーディングが楽しくて楽しくてしかたがない三男パパ(@knob_papa)です。
ご無沙汰しています。

さてさて、ここ最近、オムライス部*1仲間のWebクリエイター@woot_radioさん(近影=ビックリマン風シール画像*2)に、Facebookのメッセージを介していろいろとHTMLやらCSSの深いところを教授してもらっています。そこで初めて知った<dl><dt><dd>タグ(深くない?w)を使って簡易的な表を作ろうとしているときに、隣接兄弟セレクタなるものを習得したので、忘れないようにという備忘録的エントリを。

… のつもりだったのですが、書いているうちにノリノリになってきて、めっちゃ長くなっちゃいましたw

HTMLと最終目標形

タグ名を覚えるには、それぞれのタグが何の略語かということを知るのがいちばん手っ取り早いと思っています。今回はそれぞれ、dl=definition list、dt=definition term、dd=definition description です。これでもう絶対に忘れることはありませんw

では、まずはHTMLから。
<dl>
	<dt>アクセス</dt>
	<dd>★</dd>
	<dt>蔵書数</dt>
	<dd>★★★★★</dd>
	<dt>快適さ</dt>
	<dd>★★★</dd>
</dl>
これを素のまま(CSSを適用せずに)表示するとこんな感じになります。
アクセス
蔵書数
★★★★★
快適さ
★★★

こいつを使って、最終的にこんな表を作ってみようというわけです。
アクセス
蔵書数
★★★★★
快適さ
★★★

<dl><dt><dd>とfloatを使った横並びリスト

まずは、"float: left"を使って<dt>の右側に<dd>が回り込むようにします。

このときのポイントは、セレクタdt内に回り込み解除のプロパティ"clear: both"(この場合は"float: left"しか設定していないので"clear: left"でもOK)も記述するという点です。もちろんこれは、自身の回り込みを解除するのではなく、1つ前のセレクタdtの回り込みを解除するという役割を持たせるためです*3

で、最終<dt>の回り込みを解除するために<dl>にもclear属性を設定。<dd>にはデフォルトでmarginが設定されているのでそれを0に。第1段階はこれで完了です。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
}
dd {
	margin: 0;
	padding-left: 7em;
}
ここまででできればこんな具合になります。
アクセス
蔵書数
★★★★★
快適さ
★★★
次は、こいつにborderを設定していきます。

疑似クラス:last-childを使おうとするも…

上に示した最終形を見ればお分かりの通り、最終的には、
  • 周りのborderは2px
  • 行間と列間のborderは1px
という表にします。

ここで何も考えずに、セレクタdlに"border: 2px solid #ddd;"というプロパティを、セレクタddに"border-bottom: 1px solid #ddd;"というプロパティを追加してみると…
(本題と関係ありませんが、セレクタdtに"border-right: 1px solid #ddd;"も追加しています)
アクセス
蔵書数
★★★★★
快適さ
★★★
こんな表ができあがります。
ですが… 表示がおかしいのがわかりますか?

dlに設定したborderと、最下部のddに設定したborder-bottomとが合わさって、表の最下部だけ3pxのborderになってしまっています。もちろん、dlのborderを各辺ごとに設定すれば解決するのですが(最初はそうしていました)、いまいちスマートじゃないですよね…。

ここで思い出したのが、かの神サイト「ドットインストール」で教わった疑似クラス:last-childでした。「これ使えるんじゃね?」と喜び勇んで書いたCSSがこちら。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	border: 2px solid #ddd; /*追加プロパティ*/
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
	border-right: 1px solid #ddd; /*追加プロパティ*/
}
dd {
	margin: 0;
	padding-left: 7em;
	border-bottom: 1px solid #ddd; /*追加プロパティ*/
}

/*疑似クラスを使って追加したセレクタ*/
dd:last-child {
	border: none;
}
カ・ン・ペ・キでした!

Google ChromeやFirefoxでは…。

敵はIE

な、なんですって!?
IE(Microsoft Internet Explorer)では疑似クラス:last-childが使えないですと!?

話の展開的に大方の予想はついたかと思いますが、またまた「敵はIE」状態です。Windows XPに搭載されているIE8でさえも疑似クラス:last-childが使えないというんですから、これはもう完璧にお手上げ状態です。

困り果ててTwitterでつぶやいたところ、またまた神降臨。これまたしょっちゅうCSSに関するアドバイスをくださる@cazukiさんが、ご自身のブログエントリを紹介してくださったのです*4
How nice of those around me!!

該当エントリをお読みになればわかるかと思いますが、私が入り込んでしまった袋小路から脱出する方法が詳細に載っています。というか、<ul>と<dl>の差違だけで、それ以外はほぼ同じ状態です。「今度こそ解決だ!」と信じて疑わなかったこのときの私を誰も責めることはできないでしょう…。

最後の罠

さて、@cazukiさんのエントリを読んでもうトンネルを脱出した気になっていた私は、意気揚々と<dd>のborder-bottomをborder-topに変更し、CSSの最後に"dd:first-child { border: none; }"と書き加えました。これでバッチリと鼻歌交じりにプレビューしたところ…
アクセス
蔵書数
★★★★★
快適さ
★★★
なぬぅぅぅ???
今度は最上部のborderだけが3pxになっちゃってます。
えっ!? dd:first-childはどこに行っちゃったの!?
(言葉を失いその場に呆然と立ち尽くす四十男子…)

ええ。もちろん調べましたとも。
その前に30分ほど無駄な試行錯誤をしたことは誰にも言えませんがねw
で、ようやく以下の結論に到達。
<dl>内では<dt>と<dd>に区別はなく、両方とも同じ子要素として扱われる。したがって、dt:first-childとdd:last-childは存在するが、dd:first-childとdt:last-childというのはあり得ない。
疑似クラスタさん、いったいどういうことですか?いくら似ているからって、<dt>と<dd>を区別しないなんて…。まるで、一卵性双生児を1年間教え続けたにもかかわらず、結局区別できないまま終わってしまった私みたいじゃないですか!w

困りましたね…。せっかくあと一歩のところまで来たのに、これじゃ結局元の木阿弥です…。

隣接兄弟セレクタ

ここであきらめきれない私は、さらにググること数十分。ついに、発見しました!
隣接兄弟セレクタ
CSSに「A + B { プロパティ: 値; }」と表記することにより、セレクタAの直後にあるセレクタBにのみプロパティを適用することができる
いやー、まったく知りませんでしたよ*5
でも、これで今度こそ本当に解決です。

ということで、最終的なCSSがこちら。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	border: 2px solid #ddd;
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
	border-right: 1px solid #ddd;
}
dd {
	margin: 0;
	padding-left: 7em;
	border-top: 1px solid #ddd; /*border-bottomから変更*/
}

/*追加した隣接兄弟セレクタ*/
dt:first-child + dd {
	border: 0;
}
いやぁ、おかげさまでかなり濃密な時間を過ごせましたよw

まとめ

ということで、今回のまとめ。
  • <dl>中では、<dt>も<dd>も同じ子要素として認識されているので、first-childは<dt>しかあり得なく、last-childは<dd>しかあり得ない
  • floatは相変わらず難しい
  • 隣接兄弟セレクタはぜひ覚えておくべき!
  • IEなんてこの世から消え去ってしまえばいいのに!w
  • みんな!Chromeにしようよ!

なお、今回新たに覚えたテクニックを使ったページはこちらです。ぜひご覧になってみてください。

編集後記

それにしても、コードをブログ内に記述するのは、なかなの手間ですねぇ。もっとスマートな方法があるような気もするのですが…。初めて<pre>というタグを知ったのはなかなかの収穫でした。また、こういう複雑なエントリを書くときは、やはりテキストエディタ*6が便利ですねぇ。つくづく実感しました。

そういえば、「HTML&CSSとの闘い」などとブログサブタイトルで謳っているくせに、HTMLやCSSに関するエントリは初ですなw ひどいwww

興味がない人にとってはちんぷんかんぷんなエントリだとは思いますが、私の大好きな言葉"ペイ・フォワード(Pay it forward)*7"的な役割を果たせるエントリになれば幸いです。

追記:2012.07.18

Facebookで@cazukiさんから「ブログ内でソースコードを書くなら、SyntaxHighlighterを使うのがいいですよ」というアドバイスを頂き、SyntaxHighlighterを導入してみました。これはすごい!ソースコードが格段に見やすくなりましたね!
ちょっとググれば素人でも簡単に導入できるイージーさですので超おすすめです!
@cazukiさん、アドバイスありがとうございました!

*1 :
TwitterやFacebookで知り合ったオムライス好きの人たちが集まって、みんなでオムライスを食べに行くという、類い希なる部活動です。部長はケータイカイガーの@nenzabさん。私は結構な頻度で参加しているのですが、まったくエントリを書いてません!w 食べ終わったら満足しちゃうんですよねwww ま、そのうちに。
*2 :
@woot_radioさんオリジナルのビックリマン風キラキラシールです。かなり本人そっくりですw キラキラしているためスキャンが非常に難しかったです。本物のシールはもっときれいですよ。
*3 :
偉そうに書いていますが、この回り込み解除に関してはすべて@woot_radioさんに教わった内容の受け売りですw
*4 :
そのあとで「あとはieをぶっちするとか…」というWebクリエイターらしからぬリプライをくださったのはナイショってことでw
*5 :
私はHTML・CSSともに完全に独学で勉強したのですが、調べてみたところ、やはり私が使っているCSSハンドブックには載っていませんでした。これはいろんなところで応用できそうなセレクタ指定方法ですね。
*6 :
現在、テキストエディタはNoEditorというフリーソフトを、HTMLエディタはez-HTMLというフリーソフトを使っています。
*7 :
日本語訳は「恩送り」といった感じですかね。「誰かから受けた恩をその人に返すのではなく、別の人に送る」という意味です。とあるJaveScriptのコードに頭を悩ませていた私を助けてくださった@taguchiさんからこの言葉を頂いたときの感動は忘れられません。詳しくはまた別のエントリ(近日執筆予定)で。

05:50 | Trackback : 0 | Comment : 0 | EDIT | TOP
検索フォーム
スポンサーリンク
なかのひと

三男パパ

Author三男パパ

Twitter@knob_papa
FacebookNobuyasu Kamata
Instagramknobpapa
生まれ東京都
住み処埼玉県

独学で自社関連のWebサイトを作っています。こんなサイトとか、あんなサイトとか。お暇ならどうぞ。

on-line:/total:

カテゴリ

openclose

最新記事
メールフォーム
ご意見・ご感想をお寄せください

お名前:

メアド:

件名:

本文:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。