aqua+Css このページをアンテナに追加 RSSフィード

2005-07-21 Up Dateウナギの寝床Style

[]ウナギの寝床Style 00:05 ウナギの寝床Style - aqua+Css を含むブックマーク はてなブックマーク - ウナギの寝床Style - aqua+Css ウナギの寝床Style - aqua+Css のブックマークコメント

0003_unagi

ウナギの寝床Style Headerウナギの寝床Style Header

このスタイルは、上から下に流れてゆく情報の流れを、左から右に置き換えたものです。ウナギの寝床Style Footerウナギの寝床Style Footer

ウナギの寝床画像.zip

IEとFireFoxで透過画像を使い分けるために、pngとgifデータが入っています。

ウナギの寝床.css

相性のいいブログスタイルとは?

基本的に横にスクロールした際、次の日記に付けられている見出しイメージ画像を元に、目的の情報を探すとゆう視覚的な検索性の向上を狙って作られたものなので、解りやすい見出しイメージ画像が無ければなりません。

でもって次のようなものが相性がいいっぽい。

観察日記
今日の観察日記と、昨日付けた観察日記を横に並べて変化を見比べることが出来るので、どのような変化をたどっているのかわかりやすい。
料理レシピ
なんとなく相性がよさそう。食材ごとにレシピカテゴリー分けしておけば威力を発揮しそうな気がする?

カスタマイズアイデア

横にスクロールするとゆう、ただでさえ使う人と見る人を選ぶデザインなだけに、もっと見やすさや使い勝手を向上しなければなりません。

そいでもって次のカスタマイズアイデアを作って見たい。

亀の子Style
見た目的には画面内に収まるリキッドデザインで、ふたを開けて見るとウナギの寝床Style。亀の子とゆうよりも、甲羅の中に長い首をしまい込むの所が、四獣の玄武イメージが近いかも?
ベクトルStyle
スクロールバー付近のbackground-imageに矢印画像を設定して、情報の方向性を示す。
トラックバック - http://css.g.hatena.ne.jp/aquatail/20050721

2005-07-12 Up Date(h2) Test Diary

[] (a.sectioncategory) (h3) Test Diary (span.timestamp) (a img.icon) 00:13   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css を含むブックマーク はてなブックマーク -   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css のブックマークコメント

0006_testdiary

(p)CSSの効き具合を見るためのテストダイアリーです。

(p)ちなみに、このテストダイアリーを書くにあたって、(a)はてなダイアリーのヘルプを大変参考にさせていただいております。

(p)文頭に付いている(p)(span.timestamp)等、全角括弧に囲われている部分は、class/id名や対応要素になります。

(p)チェックする際の参考にしてください。

(h4)この記事のおすすめの使い方

(p)この記事でCSSテストする際は、FireFoxブラウザの拡張機能でEditCSSとゆうのがあるので、それを使うと便利かと思います。

(ul)(li)(a)

(p)EditCSSとは対象のHTMLCSSだけをブラウザサイドバーに抜き出す拡張機能で、抜き出されたCSSをそのまま書き換えればそのプロパティリアルタイムHTMLに反映されるとゆうものです。

(p)うん、便利だ。

(h4)リスト関係を連ねてみる

(font)リスト

(ul)(li)

(font)ナンバリングリスト

ol)(li)

  1. アリ
    1. 皆で掘る
  2. オケ
    1. 一人で掘る
  3. ウミガメ
    1. 愛で掘る
  4. 一歩
    1. 二歩
      1. 三歩

(font)データリスト

dl)(dt)(dd

脂肪
主に脇腹に寄生する。走るとユレル。ちなみに、走り続けると寄生する力が弱くなる。
足の小指
箪笥にぶつけると、とても痛い。柔道で足払いを掛ける際に、まれに骨折する人がいる。ポキッと。小指を鍛えるにはやっぱり箪笥にブチ当てるのが一番。

(h3)name属性指定見出し (h3)name属性指定見出し - aqua+Css を含むブックマーク はてなブックマーク - (h3)name属性指定見出し - aqua+Css (h3)name属性指定見出し - aqua+Css のブックマークコメント

(h4)テーブルを作ってみる

(table)(tr)(th)(td)

合計食費
7/1りんご豆腐納豆256円
7/2煮干マグロ2000円
7/3ビールわかめごま450円
7/4シラス270円
7/5ポテチイチゴ500円
7/7ざくろあけびヤマモモ0円

(h4)引用ブロックを作ってみる

(p)このテストダイアリーの出だしを引用しました。

CSSの効き具合を見るためのテストダイアリーです。

(h4)整形済みテキストブロックを作ってみる

_height: 150;
margin: -1 0 0;
padding: 30 0 0;

preを使ってソースを載せてみる

(pre)
















(h4)引用元サイトを載せてみる

タイトル有り

Flash▲Plantation(フラッシュプランテーション)とは、みんなでFlashをお勉強してセンス・スキルを磨くグループです。Flash▲Plantation

タイトル無し

Flash▲Plantation(フラッシュプランテーション)とは、みんなでFlashをお勉強してセンス・スキルを磨くグループです。*

(h4)短縮記法で書いてみる

いろんなリンク

はてなサービス内のリンク

f:id:aquatail:20030827085750:image

f:id:aquatail:20030827085750:image:small

f:id:aquatail:20030827085750:image:w50

f:id:aquatail:20030827085750:image:w300



aqua+Css - Hatena::Group::CSS

aqua+Css

http://css.g.hatena.ne.jp/aquatail/


http://css.g.hatena.ne.jp/aquatail/


(p)壊れていた時計が修理から帰ってきました。

(p)壊れていたMDプレイヤーは治しました。

(p)乙女座の予定でいきます。魚座に変更になりました。


asin:488337405X

asin:488337405X

スタイルシートサンプルブック

スタイルブック

スタイルシートサンプルブック

jan:9784883374052

ディープ・ブルー スペシャル・エディション [DVD]

Adobe Creative Suite Standard 2.0 日本語版 Macintosh版 アップグレード版 (旧製品)

Adobe Creative Suite Standard 2.0 日本語版 Macintosh版 アップグレード版 (旧製品)

Adobe Creative Suite Standard 2.0 日本語版 Macintosh版 アップグレード版 (旧製品)

ディープ・ブルー スペシャル・エディション [DVD]

ディープ・ブルー スペシャル・エディション [DVD]

id指定ユーザー情報

id:aquatail:about

id指定記事一覧ページ

id:aquatail:archive



人力検索の質問情報を表示する…question記法

question:1096559040

学校じゃ教えてくれないことを教えて下さい。 事実のみ。


はてなダイアリー評議会議題4号 http://d.hatena.ne.jp/keyword/はてなダイアリー評議会議題4号

賛成 137
反対 329
どちらでもよい 141


自動リンクをタグ内で使う

>

タグ内の「href」「cite」「src」属性値に[id: ~][isbn:~]google:~といった記法を利用できるよう変更しました

id:hatenadiary
との事です



数式の表示 x^2 + y^2 = z^2 e^{i\pi} = -1


トラックバック - http://css.g.hatena.ne.jp/aquatail/20050712

2005-07-11 Up DateAbout

[]aqua+Css 18:11 aqua+Css - aqua+Css を含むブックマーク はてなブックマーク - aqua+Css - aqua+Css aqua+Css - aqua+Css のブックマークコメント

0005_profile

書く人→aquatail(アクアティル)

DiaryStyle

一つ一つの記事を、日々書いていく日記ではなく、更新型のコンテンツとして書いています。

ですので、記事ごとに右上に表示されている日付が更新日時になります。

グループアンテナをかき回さないためにも、記事を更新する際は『ちょこっとした更新』にチェックを入れて更新します。

トラックバック - http://css.g.hatena.ne.jp/aquatail/20050711

2005-07-07 Up DateたんぽぽStyle

[]たんぽぽStyle 22:31 たんぽぽStyle - aqua+Css を含むブックマーク はてなブックマーク - たんぽぽStyle - aqua+Css たんぽぽStyle - aqua+Css のブックマークコメント

0004_tanpopo

たんぽぽStyle HeaderたんぽぽStyle Header

はてなテーブルのbackground-imageにたんぽぽの画像を指定してお天道様っぽくしました。

ぱっと見、矢印付いてるけど、この下にブログが続くようには見えないですね…

むむぅ…

たんぽぽStyle MainたんぽぽStyle Main

日記本文の右隣にコメントスペースを配置して、日記本文との絡みを狙いました。

ちなみに、左のサイドバーと右のコメントスペースは200pxの固定幅で、センター日記本文はリキッドになっているので、ブラウザの横幅を変えるたびに日記本文の幅も可変します。

たんぽぽStyle FooterたんぽぽStyle Footer

こっそりフッターを自作して囲いを付けました。

たんぽぽ画像.zip

このデザインを作るのに使った画像です。

出来るだけ軽く作るために1px幅で製作しているものが多いです。

自分で混乱しないように、画像名には配置先のidclass名を付けています。

たんぽぽ.css

相性のいいブログスタイルとは?

このスタイルポイントが一番先頭にサイトイメージ画像が表示されるという事と、コメントの絡みを重視している事なので、その辺を活かすことが出来ればなと…

ただし、他のブログサービスでは一番先頭にサイトイメージ画像が表示されるというのは結構当たり前なので、デフォルトはてなテーブルが一番先頭に表示されるはてなオンリースタイルです。

アーティストブログ
一番先頭にサイトイメージ画像が表示されるので、バンドメンやイラストレーター等の個性を主張するアーティストと相性がいいかも。
コメントが多い日記
コメントが多い日記にとってコメンテーターとはもはやサイトの一部と化している。

相反する要素

一番先頭にサイトイメージ画像を表示する事により、リピーターにとっては日記本文にたどり着くまで、毎回めんどくさいスクロールを強いる。

それと、日記本文とコメントが同じタイミングで表示されるため、先にコメントを見た人にネタバレしてしまうケースがある。

サイトイメージを見た瞬間のインパクトと、日記を読み返した際のコメントとの一体感…

活カスか殺スかやなぁ…

トラックバック - http://css.g.hatena.ne.jp/aquatail/20050707