はてなダイアリーTipsスタイルシートでデザイン編
視覚的に表したものを先日作成したのでよろしかったら参考にしてください。 視覚的、はてなダイアリー文書構造サンプルHTML CSS Tips for はてなダイアリー はてなダイアリーガイド「CSSセレクタ」 はてなダイアリーガイド「CSSセレクタ - 日記１日分」 はてなダイアリーガイド「CSSセレクタ - photoモジュール」 はてなダイアリーガイド「CSSセレクタ - adsenseモジュール」 はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」 はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」 はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」 また、全てのクラス名はこちらでまとめられています。 id:smoking186:20030218#1045504830 はてなダイアリー兼tDiary用cssのテンプレート ht
はてな内の2カラムレイアウト - tikeda's blog
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
スタイルシート CSS リファレンス［カテゴリー一覧］ - TAG index
ページ全般 ページの背景色、背景画像、マージン、スクロールバー、印刷 ... ボックス ボックスの背景色、背景画像、マージン、パディング、境界線、配置 ... テキスト・フォント 文字サイズ、文字色、装飾、行間、インデント、文字間隔、改行の扱い ... リンク リンク文字の色、リンクの下線、ポイント時の装飾 ... リスト マーカーの種類、画像のマーカー、リストの余白、間隔、配置 ... イメージ 画像のサイズ、切り抜き、画像に並ぶテキスト、回り込み ... テーブル 表の大きさ、表の背景、境界線、セル内の位置指定、回り込み ... フレーム インラインフレームのサイズ、境界線、フレーム内の指定 ... フォーム 入力欄の大きさ、背景、境界線、文字サイズ、入力モード ... フィルタ 半透明、グラデーション、影付け、発光、波状、反転、サンプル一覧 ...
スタイルシート活用術 - 素材箱：タイトル・見出し
ここにタイトル 背景あり（自動幅） ソース ここにタイトル 背景あり（幅３００ピクセル） ソース ここにタイトル 背景と枠（自動幅） ソース ここにタイトル 背景と枠（幅３００ピクセル） ソース ここにタイトル 背景と点線枠（自動幅） ソース ここにタイトル 背景と点線枠（幅３００ピクセル） ソース ここにタイトル 左装飾１（自動幅） ソース ここにタイトル 左装飾１（幅３００ピクセル） ソース ここにタイトル 左と下装飾１（自動幅） ソース ここにタイトル 左と下装飾１（幅３００ピクセル） ソース ここにタイトル 左と下装飾２（自動幅） ソース ここにタイトル 左と下装飾２（幅３００ピクセル） ソース ここにタイトル 左と下装飾３（自動幅） ソース ここにタイトル 左と下装飾３（幅３００ピクセル） ソース ここにタイトル 左右装飾１（自動幅） ソース ここにタイトル 左右装飾１（幅３００
シンプルな見出し - スタイルシート・サンプル
H1 { color: #000099; /* 文字の色 */ } H2 { color: #000099; /* 文字の色 */ } H3 { color: #000099; /* 文字の色 */ } H1 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-height: 130%; /* 行の高さ */ } H2 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-height: 130%; /* 行の高さ */ } H3 { color: #ffffff; /* 文字の色 */ background-color: #666699; /* 背景色 */ line-h
全部まるごとスタイルシート －ウェブセーフカラー－
■ ウェブセーフカラー ウェブセーフカラーとは、２５６色の８ビットカラーのうち、WindowsとMacintoshの システムパレットに共通した２１６色で、Internet ExplorerでもNetscapeでもほぼ同じ ように表示される色の事を指します。 これらの色のＲＧＢの各値を１６進数で表現した場合、00、33、66、99、cc、ffの 組み合わせからなります。 ウェブセーフカラーを使用すれば、ユーザーの環境が２５６色表示であっても、 ほぼ問題なく表示されますが、これらの色以外を使用した場合、ブラウザが自動的に 近い色に置き換える(ディザリング処理）ことになり、製作者の意図した色を表現 できない可能性もありますので、ご注意ください。 なお、下のカラーチャートは色をクリックすると、背景色がクリックされた色に変わります。
スタイルシートリファレンス（目的別）
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]