CSS Cheat Sheet<style type="text/css"> selector {property: value;} </style>
チープカ - はてなダイアリーのデザインを作るうえでのtips
CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
はてなブログ | 無料ブログを作成しよう
家のなかを森にしたい、という欲望 今年はなんだか観葉植物の観察が楽しい。本日は植物についての記事ですが、土や根っこなどの画像もあるので苦手な方は避けてくださいね。 フィカス・ウンベラータ うちのメイン的存在はフィカス・ウンベラータ。ウンベ殿が我が家にやってきたのは2020年5月。コロナ禍初…
CSSコーディング・スタイル
「こういうスタイルがCSSを記述する時に便利だよ！ コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ
はてなダイアリーデザイン管理機能リリース - はてなダイアリー日記
はてなダイアリーで、自分のヘッダ、フッタ、スタイルシートで記述した内容を保存し、また公開することで他のユーザーと共有することができる「デザイン管理」機能をリリースしました。デザイン管理機能へは、「管理ツール」の「デザイン」メニューからアクセスしてください。またこれに伴い「かんたんデザイン」と「詳細デザイン」の切り替えを画面左上のタブで行うようにしました。 今回の機能追加の内容をわかりやすい動画でご覧いただけます。以下のプレーヤーから再生してください。 以下、詳細な説明です。 デザイン管理機能 デザイン管理画面では、すでに現在利用中のデザインセット( 「ユーザー名さんのデザイン」 )が保存されています。変更したいデザインを選択し、「デザインを適用する」をクリックすることで複数のデザインを使い分けていただくことができます。 現在のデザインを編集するには アイコンを、新しくデザインを作成するには
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」
Tab menu with images 画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」。 次のようなタブ式インタフェースを簡単に作れるようです。 作成する際のHTMLは説明にも書いてある通り、クリーンなものになります。 メニュー部分のＨＴＭＬは次のような感じでクリーン。 タブをマウスオーバーすると下位層のメニューが現れますが、そのメニューも次のHTMLコードに含まれています。 <!-- メインメニュー--> <div id="mainMenu"> <a>Products<img src="images/tabmenu_right.gif"></a> <a>Support<img src="images/tabmenu_right.gif"></a> </div> <!-- サブメニュー--> <div id="submenu"> <!-- Th
汎用CSS - tikeda's blog
先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画
いろいろな多くのRSS用ボタンを1つにまとめる「FeedButton」 - GIGAZINE
ウェブサービスタイプの各種RSSリーダー用のボタンをいくつもブログのサイドバーに貼るのではなく、それらをすべて1つのボタンにまとめることができるという無料サービスです。 タイプは2種類で、2列に渡るタイプと、1列で縦に長く伸びるタイプ。好きな方を選択できます。 利用は以下から。 FeedButton Beta. Uncluttering Blogs & simplifying RSS Feeds. 作り方は簡単、右下の「Create My Feed Button」の空欄にRSSのアドレスを入力し、「Make My Feed Button」をクリックするだけ。あとは出てきたコードをコピペして貼れば完了です。デフォルトでは「Normal」が選ばれていますが、これを「Long (110 px wide. 1 column)」にすれば縦長版にチェンジします。 なお、各RSSリーダー用はここから個別
第7回 ページ構造を確認する方法
XHTML+CSSでは、ページ構造を意識して制作することが大切。Firefoxの拡張ツール「Web Developer Toolbar」を利用して、テーブルレイアウトの構造、フルCSSのページ構造、見出し構造、非推奨要素を確認する方法を説明しよう。 Firefoxの拡張ツール「Web Developer Toolbar」 Firefoxでは「Web Developer Toolbar」（以下、WDT）という高機能な拡張ツールが利用できる。名前のとおり、Web開発者向けのツールバーであり、CSSやJavaScriptの無効化、画像表示の無効化、ソースのバリデーションなどをツールバーから直接実行することができる。 まず、インフォアクシアで公開されているWDT日本語版をインストールしよう（http://www.infoaxia.com/tools/webdeveloper/）。Firefox（ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
decaf, decaf.