コンテンツ/カレンダー
コンテンツ一覧 カレンダー コンテンツ一覧 adiaryにはコンテンツ一覧を自動的に生成しサイドバー（等）に階層表示する機能があります。階層は任意で３階層まで指定できます。 <div class="hatena-module side-contents-list"> <div class="hatena-moduletitle">コンテンツ</div>...
View Articleコンテンツバー
コンテンツ一覧をサイドバーではなくプルダウンメニューしとて表示するため機能があります。これをコンテンツバーと言います。 かなり高度であるため触らない方が無難です。テーマとしての対応は任意です（必須ではない）。 コンテンツバーの詳細...
View Article特殊なクラス
より凝った（複雑な？）テーマ作成を支援する、条件によって変わる特殊なクラス出力を解説します。 wiki関連クラス出力 body.wikiクラスwikiコンテンツを単一記事表示しているときに出力されます。 div.wikiクラス該当記事がwikiコンテンツのとき出力されます（詳細）。 システム関連クラス出力 この項目の div.* は div.adiary-body...
View Articleテーマ作成講座
テーマ開発に必要なCSSの知識について解説します。 前提知識としてとほほのスタイルシート入門（基礎知識）を一度読んでおいてください。とほほには記述の古い部分もありますが、だいたいの基礎は書かれています。
View Articleinline要素とblock要素
CSSとは、同名のHTML開始タグと終了タグで囲われた部分を要素とみなし、その要素に対するレンダリング（表示方法）を指示するものです。 <div>タイトル<span>作成講座</span></div> この例では、<div>...
View ArticleClik here to view.
paddingとmargin相殺
CSSを理解する上で欠かせない要素がマージンとパディングです。 padding と margin marginの相殺 ブロックのwidthとIEのバグ padding と margin 各要素は、マージンとパディング、そしてwidthというプロパティを持ちます。これは要素の配置に関連するプロパティです。まずは図をみてください。...
View Articleabsolute位置指定
デザイン上、ある要素を「この場所に表示したい」と決めうちすることも少なくありません。このときに必要になるのが absolute による位置指定です。 absoluteの使い方 先に例を示してみましょう。 <div style="position: relative; height: 60px;"> <div style="margin-left:...
View Articleカスケーディング
CSSには複数のプロパティ指定が重複した場合、どちらが優先するかを決める厳密なルールがあります。カスケーディングというのですが、これについて簡単に説明します。*1 カスケーディングの例 優先度のルール IDの指定 クラスによる指定 親子関係による指定 クラス同時指定 順序 *1 : 必ずしも正確ではない用語を使っていますが、分かりやすさを優先させているためです。ご了承ください。...
View Article小技集
IEでのみ解釈される属性値 divなどの配置を確認する IEでのみ解釈される属性値 どのブラウザでもバクや非対応のプロパティは付き物ですが、IEの非対応プロパティの多さとバグの多さは他の追従を許さず抜きんでています。IEにはアンダースコアハックと言い、IEでのみ有効になるプロパティの指定方法があります。 span.test { color: blue; _color: red; }...
View ArticleClik here to view.
画像で枠を作る方法
テーマを作成していると、画像で枠を作りたいと思うことが多々あります。このような時に使用するテクニックを紹介します。 目標 HTMLのソース（詳細はこちら）。両サイドバー表示の左側です。 <div class="side-a"> <div class="side-a-top"></div><div class="side-a2"> サイドバーの中身...
View Article
