画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会 - Gallery

カテゴリ

カテゴリ・モジュールの選択

チェックボックスにチェックを入れるとデザインに使用したモジュールを絞れます。

部門
要素や属性
※ 未選択の状態では、部門別で要素や属性が絞られてない状態のものが表示されます。
表示件数

画像を一切使用しない部門

83.Aozora-CSS_Style

サムネイル

参加者名
kenta
Webサイト
Aozora-CSS
要素・属性
  • div
  • id
  • class

頑張ったところなど

最後まで投げ出さずにファイルを提出出来た事。

82.marron

サムネイル

参加者名
hana
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

シンプルなデザインが好きなので、シンプルかつ寂しくなり過ぎないように、色使いと文字の読みやすさに気を使いました。IE, Firefox, Opera　で同じ様に表示されるように頑張りました。

81.non-pic-css

サムネイル

参加者名
ＳＡＮＰＡＫＵ
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

ＨＴＭＬにはいっさい手を加えずやってみました。
読みやすさ重視です。

80.crystal-clear-black

サムネイル

参加者名
板垣博亮
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

Mozilla系列は先行実装の角丸を使い、ブラウザ間で全く違った見栄えを演出しています。
全体的に黒を基調としたオーソドックスな作りです。
可変は元々得意ではないので、あえて可変レイアウトにチャレンジしました。
IE6でもfixedもどきが実装してあります。

78.カプチーノ

サムネイル

参加者名
tak
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

文字サイズやウィンドウ幅の変更に対応できるよう、フレキシブルなレイアウトを目指しました。色調も、単調にならないように注意しながらまとめてみました。

77.風変りな

サムネイル

参加者名
vana
Webサイト
mirror garden
要素・属性
  • div
  • id
  • class

頑張ったところなど

美味しいソース、ごちそぉさま
section dl dd dtはいいデザインが思い浮かばず勉強の意を込め、他サイトに掲載されていた方法を参考にして雰囲気に合わせました。
参考・・・http://3ping.org/2005/08/24/0948

76.Healthy Paper

サムネイル

参加者名
peas
Webサイト
Raspberry Jam
要素・属性
  • div
  • id
  • class

頑張ったところなど

h2とh3を横に並べるのに苦労しました。文字が回り込んでしまったり、はみ出してしまったり、試行錯誤しながら作りました。幅があきすぎてしまったので、水平線（hr）のマージンをマイナスにしてみたり、いろいろと見苦しくなってしまいました。

75.スタイル

サムネイル

参加者名
NAO
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

コメントなし

74.monochrome

サムネイル

参加者名
hisa
Webサイト
Black-Block
要素・属性
  • div
  • id
  • class

頑張ったところなど

なるべくシンプルなデザインになるよう色数を抑え、h要素の違いがはっきりするようにこころがけました。

73.Weblog-monochrome

サムネイル

参加者名
フレブ
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

一般的なブログ風のデザインにしたつもりです。
普段は絶対に使用しないposition:absoluteをつかって無理やりレイアウトしました…
IE以外では表示が崩れる可能性大です。(未確認)

72.Gloomy

サムネイル

参加者名
真冬
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

なるべく目が疲れないような色遣いや、色覚異常でも重要な部分は見分けられる事に気を付けたつもりです。それ以外は、h2の色の変化に拘りました。クロスブラウザは挫折しました。

71.style

サムネイル

参加者名
Takazudo
Webサイト
Takazudo Clipping*
要素・属性
  • div
  • id
  • class

頑張ったところなど

殆どのブラウザで対応していないCSS2.1のセレクタやプロパティを使用してデザインの制御をしています。現状ではFirefox2でしか表示されません。

70.POP STYLE

サムネイル

参加者名
bug_gami
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

POPで明るいイメージになるようにしました。

69.css

サムネイル

参加者名
わをん
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

とにかく、かんたんなものを、と取り組みました。
なるべく白黒、なるべく枠線を少なく、です。
文字の大きさと配置は、こまかく整えました。
フォントには Tahoma を指定 (重要)。きれいなフォントなので、Windows では効果的です。
環境は、Mac 版 IE 以外の最新ブラウザなら、概ね大丈夫なようです。

68.ShowTheFlag

サムネイル

参加者名
みるく
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

ポップカードをテーマに作成しました。ポップになりすぎると文章が読みにくくなるので、何よりも情報を解りやすく伝えられるようにデザインしようとがんばってみました。

67.Bitter Milk

サムネイル

参加者名
ruku
Webサイト
voix
要素・属性
  • div
  • id
  • class

頑張ったところなど

IE6で横スクロールバーが出てしまうのを押さえるやり方がわからずに苦労しました。解決はしたものの、何故コレで収まるのか本人はわかっていません。

66.Simple Brown

サムネイル

参加者名
meg
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

比較的シンプルで、見やすいデザインにしてみました。（難しいのは出来ないともいう/笑）
できる限り、FirefoxとIE6（win）で同じ表示になるように努力しましたが、そのために多くの時間を費やしました。
試行錯誤を繰り返した結果、（一段組みとはいえ）FirefoxとIEでの差がほぼないような形で初めて整えることができました（嬉）。

65.gungnir

サムネイル

参加者名
JACO-BASS
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

・スペーシング（ビジュアル）
・原案の再現とブラウザの調節（CSS）
・レンダリング的にはFirefox > Opera Safari > IE7 IE6 といった感じです。

64.blitz

サムネイル

参加者名
blitz
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

ブリッツをイメージしました。
主にsafari対象です、ニッチです。
汎用性は激しく無くなりました。むずかしー。

63.css

サムネイル

参加者名
kz115
Webサイト
115+blog
要素・属性
  • div
  • id
  • class

頑張ったところなど

あんまり自サイト以外でcssとちゃんと向き合う機会がなかったので、試行錯誤しながら頑張ってみました。とりあえず色目に気をつけてます。

61.nekohige style

サムネイル

参加者名
ネコヒゲ
Webサイト
nekohige.org
要素・属性
  • div
  • id
  • class

頑張ったところなど

色専用CSSを用意して色々とやってみましたが地味になり過ぎてしまいました。
見出し周りが特に難しかったです。

59.import

サムネイル

参加者名
OK computer
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

クロスブラウザ対応。
IE7, firefox2, Opera9, Safari2に対応させました。

58.若菜色を基調に

サムネイル

参加者名
COLD
Webサイト
CEFA::Blog
要素・属性
  • div,class,idなし

頑張ったところなど

目が疲れないように。

57.comp-2

サムネイル

参加者名
"j"
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

h3の扱いかな。

56.青い

サムネイル

参加者名
jklryo
Webサイト
Digital Junk
要素・属性
  • div
  • id
  • class

頑張ったところなど

デザインってむづかしー

55.とりあえずやってから考えるスタイル

サムネイル

参加者名
gecha
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

うる覚えですが、前にグレーに白文字が読みやすいとか目にやさしいとかと聞いたのでとりあえず、それをベースに文字だけですので読みやすいように心がけました。

54.bzbell style

サムネイル

参加者名
bzbell
Webサイト
MovableType備忘録
要素・属性
  • div
  • id
  • class

頑張ったところなど

シンプルで読みやすい表現・・・を考えてたら、まとまらなかったので普通に作成してしまいました。(ちょとフォントが小さ気味かな)
WIN／IE6.0、IE7、Firefox2.0、Opera9.2で確認済みです。

53.akiyouryo

サムネイル

参加者名
キナコ
Webサイト
空き容量429MB
要素・属性
  • div
  • id
  • class

頑張ったところなど

コメントなし

52.first first-letter

サムネイル

参加者名
masuP
Webサイト
僕がペンをにぎれば
要素・属性
  • div
  • id
  • class

頑張ったところなど

・h6まである見出しの目立ち方の調整
・出来るだけ汎用性を持たせるように
・IE(windows)での確認作業…

51.color-chips.net Style

サムネイル

参加者名
まさ
Webサイト
color_chips.net top
要素・属性
  • div
  • id
  • class

頑張ったところなど

文字サイズの変化で崩れないように注意して作りました。
タイトルで少し遊びをｗ

50.ShowTheFlag

サムネイル

参加者名
あるカロ
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

2本目の投稿です。
H2を旗っぽく見せようとしました。旗というより、リボンかもしれません。
角丸をやっている人がいないみたいなので、一番外の枠でやってみました。

49.シンプルなさゆりふりかけスタイル

サムネイル

参加者名
cool_ni_ikou
Webサイト
WEBデザイン　BLOG
要素・属性
  • div
  • id
  • class

頑張ったところなど

これといってがんばった点はありませんが、マークアップの制限があり、見出しなどが統一されてしまい大変むずかしかったです。
安易にキーカラーをパープル（5月は酸っぱさが欲しくなる頃合かと思って）を選択したのがアダとなり、読み易さや長時間の閲覧を考えての配色に時間がかかりすぎました。
明朝のディザをとるために試行錯誤試してみましたが、結局上から色をかぶせる形でしか方法がなかったです。

48.みかん色

サムネイル

参加者名
tai-tan
Webサイト
ギター講座オンライン-Top
要素・属性
  • div
  • id
  • class

頑張ったところなど

CSSの勉強がてらに参加してみました。WinのFirefoxとIE6でしか確認してません。

47.気持ちだけニュースペーパー風

サムネイル

参加者名
tomoya
Webサイト
日々、とんは語る。
要素・属性
  • div
  • id
  • class

頑張ったところなど

・最初は新聞風デザインにしようとしてみたけど、途中で挫折。
・色弱にも優しいモノクロで見やすいつくり（単に色を使うのが面倒なだけ）。
・handheld と tv と print のメディアタイプに対応（一応）。
・レンダリング的にはOpera > Gecko > Safari > IE7 > IE6 といった感じです。

46.空間

サムネイル

参加者名
Pafuxu(ぱふぅ。)
Webサイト
appling 2nd
要素・属性
  • div
  • id
  • class

頑張ったところなど

文字と余白の空間バランスに時間がかかりました。

45.Triplet

サムネイル

参加者名
（・∀・）
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

読みやすいようにがんばりました

44.text-mediawikiスタイル

サムネイル

参加者名
山岸和利
Webサイト
overknee.info
要素・属性
  • div,class,idなし

頑張ったところなど

ときになし。

41.シンプルスタイル

サムネイル

参加者名
夜秋
Webサイト
CHRONOpage
要素・属性
  • div
  • class

頑張ったところなど

あまりゴテゴテに飾らないで、シンプルに。
なるべく目が疲れない配色にしたつもりです。

40.White album gently weeps.

サムネイル

参加者名
id:yuripop
Webサイト
歩きつづける　ゆり　咲きつづける
要素・属性
  • div
  • id
  • class

頑張ったところなど

テキスト用のデザインということで、長時間文章を追っていても飽きたり目が痛くなったりしないよう気を配ったつもりです。あとcssのタイトル。

39.import

サムネイル

参加者名
コバ
Webサイト
WEBデザイン・グラフィックデザインの企画／制作 アイエイトワン
要素・属性
  • div
  • id
  • class

頑張ったところなど

基本的にIEを完全無視してしまいました…。
只、CSS2.1だけで、特に頑張らなくても、これくらい出来ますよ～、ということをMSさんにしっかり理解して欲しいです。。。

38.monoline

サムネイル

参加者名
nu
Webサイト
Digicre
要素・属性
  • div
  • id
  • class

頑張ったところなど

読みやすさを重視してシンプルにしました。
バグの関係上、IE6およびそれ以前のバージョンにおいて一部のデザインを変えています。

37.non_pic

サムネイル

参加者名
skuare
Webサイト
Maneuvers OB・OG
要素・属性
  • div
  • id
  • class

頑張ったところなど

Firefoxでしかちゃんと見られないと思います・・・。今回の参加を期にちゃんとCSSを勉強し直そうと思います。

36.見出しがピンク色スタイル

サムネイル

参加者名
Bill閣下
Webサイト
RP2nd -- ドラクエアイコンとかデータベースとか
要素・属性
  • div,class,idなし

頑張ったところなど

ところどころに黄金比(1.618)を使ってみました。
Hn要素の上マージンと下マージンの比、未訪問リンクの色の彩度と訪問済みリンクの色の彩度の比などです。

35.共通スタイル

サムネイル

参加者名
nnr
Webサイト
文景邂逅
要素・属性
  • div
  • id
  • class

頑張ったところなど

IE6とIE7、Firefoxなんかで、表示が割と違ったりします。わざとというか、力量不足というか。そういう、なんか、です。

34.deepblue

サムネイル

参加者名
takkyun
Webサイト
SimpleBoxes
要素・属性
  • div
  • id
  • class

頑張ったところなど

ボーダーに頼りきりですみません。

33.水墨屋

サムネイル

参加者名
scientre
Webサイト
日々実験中
要素・属性
  • div,class,idなし

頑張ったところなど

大会名長過ぎます＞＜
省略させていただきました。

32.mitimasu

サムネイル

参加者名
mitimasu
Webサイト
画像の使用を極力（略）参加作 - 桝席
要素・属性
  • div
  • id
  • class

頑張ったところなど

実用的でない変態チックな h1 要素のスタイル

31.赤市松

サムネイル

参加者名
みかみ
Webサイト
八月のユスラウメ
要素・属性
  • div
  • id
  • class

頑張ったところなど

両サイドの市松模様の再現をがんばりました。
表示確認はMacのsafariとfirefoxでしかしていませんが…。

30.ごんたスタイル 1

サムネイル

参加者名
ごんた
Webサイト
ごんタイピング =無料でタイピング練習=
要素・属性
  • div
  • id
  • class

頑張ったところなど

「読みやすい・分かりやすい」デザインをテーマに作成しました。
煩雑にならないように、極力横のボーダーをなくし、空間を大胆に使い、配色を工夫しました。
div要素がいっぱいあったので、破線ボーダーを使って、デザインに遊び心を加えてみました。
一応、div,id,classがなくても問題のないように考慮して作成しています。
ブラウザによって見え方が若干異なるので、見比べていただけると嬉しいです。

29.hogeスタイル

サムネイル

参加者名
gitanes
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

当然ですが、画像を使わない事。
画像のありがたさが身にしみました。

28.Elastic Style

サムネイル

参加者名
kaZu
Webサイト
Floating_Space
要素・属性
  • div
  • id
  • class

頑張ったところなど

最近話題の、文字のサイズに応じてページ幅を変化させるエラスティック・レイアウトを採用してみました。
FireFox2、およびIE7で表示確認。

27.Ecological Green

サムネイル

参加者名
ゆう
Webサイト
我的春秋
要素・属性
  • div
  • id
  • class

頑張ったところなど

構造と重要度が視覚的に把握できることや、コントラスト比や行幅といった可読性に特に留意しました。
IE 6 での表示や、elasticlayout の堅牢性に若干 課題が残っていますが、しばらくまとまった時間が取れるか微妙なので、ひとまず提出しておきます。

26.4/1用

サムネイル

参加者名
l-_-l
Webサイト
インターネット帳面
要素・属性
  • id
  • class

頑張ったところなど

つ、次こそはまともなものを作るぞ。

25.MONO

サムネイル

参加者名
taki
Webサイト
pixel
要素・属性
  • div
  • id
  • class

頑張ったところなど

ポジションプロパティとボーダーで作った陰影。
目に優しい地味な配色とシンプルな見出しなど、見やすさを重視。
あと、 出来る事ならタイトルは英字にしてほしかった。

24.WWW WATCH style

サムネイル

参加者名
yoshi
Webサイト
WWW WATCH
要素・属性
  • div
  • id
  • class

頑張ったところなど

・初めてのエラスティック・レイアウトにしてみました。
・デザインは本職ではないのでコーディングしながら考えました。
・CSS2.1対応ブラウザでの見た目が本来の姿です。
・IEでもそれなりの見た目にするにプチ妥協しました。。

23.インデントスタイル

サムネイル

参加者名
sug
Webサイト
Harukiya Archives
要素・属性
  • div
  • id
  • class

頑張ったところなど

シバリがあるならとことん思いっきり、ということで border も封印してみました。

22.dpop

サムネイル

参加者名
kuina
Webサイト
やんばるくいな
要素・属性
  • div
  • id
  • class

頑張ったところなど

ダークでポップな感じに仕上げたかったのですが粗が目立ちますね＞ｗ＜
codeタグを無駄に頑張りました＾＾

21.mskstyle

サムネイル

参加者名
MS-K
Webサイト
MID [Serendipity Weblog]
要素・属性
  • div
  • id
  • class

頑張ったところなど

画像を使わないというのが根本的に難しかったです。
基本的にFirefoxでの表示確認、次にI.E6で行っており、I.E7は未検証です。
I.EについてはそのCSS対応仕様上、妥協設定となります。
気を使ったのは見出し要素の見やすさと、うるさくない程度のメリハリづけです。
CSSの構造については割といい加減なので汚いかも。

19.E.F.F.

サムネイル

参加者名
甲斐範宣
Webサイト
K.M.S.
要素・属性
  • div,class,idなし

頑張ったところなど

なるべく汎用的なスタイルを目指して頑張りました。
blockquoteとinsとdelに力を入れました。
h3からh6は少し力をぬいてしまいました。

18.csscontest

サムネイル

参加者名
かず
Webサイト
「画像の使用を（略）CSS大会」への応募作品について
要素・属性
  • div
  • id

頑張ったところなど

コメントなし

17.Olive-Line

サムネイル

参加者名
芹沢文書
Webサイト
妄想科學日報
要素・属性
  • div
  • id
  • class

頑張ったところなど

表を使わない表組み。配色はhttp://d.hatena.ne.jp/tanemori/から頂きました。IE6非対応、IE7では一部枠線が出ません。

16.rtk-j 蒼穹改

サムネイル

参加者名
tad
Webサイト
ただ、抽斗４
要素・属性
  • div
  • id
  • class

頑張ったところなど

特別な技法は使はず、シンプルで見やすいスタイルを目指しました。もとはISO-HTMLを想定して作ったスタイルですが、セレクタのみdivに合はせました。下位の見出しはあまり使ったことがないので新たに定義しましたが、どうやって見出しレベルに差を付けようかと悩みました。せっかくなのでhandheldなメディアにも対応してゐます。

15.ta6b

サムネイル

参加者名
tarobee
Webサイト
ta6b.net
要素・属性
  • div
  • id
  • class

頑張ったところなど

テキストを主体としたデザイン、というコンセプトを熟考し、とにかく文章を「読ませる」ことを考え、デザイン要素をいかに削れるか、というのをコンセプトとしました。
一行の文字数や見出しとのスペースなどに気をつかったつもりです。また、CSSの技術としていわゆる高度な（複雑な）ものを使用していないところもポイントです。

14.赤影

サムネイル

参加者名
あるカロ
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

陰影とH4のツートンカラーと「最後に」の三角を画像を使わず表現したところをがんばりました。
でも、のんびりしていたら既に陰影のアイデアの作品が発表されてしまっていて、あわてて提出する次第です。

13.W3C的標準

サムネイル

参加者名
オオカミ
Webサイト
Der Wolf im Schafspelz
要素・属性
  • div
  • id
  • class

頑張ったところなど

W3C的なCSS2仕様書に記述されているものに従って組み立てています。Mozilla系で閲覧したときのみ制作者の意図がほぼ反映される作りです。Operaではolのリストが不完全、IEではリストに関しての（インデントを含めた）描画が酷くなります。

11.ブログスタイル

サムネイル

参加者名
IF
Webサイト
CSS
要素・属性
  • div
  • id
  • class

頑張ったところなど

今までは２～３行訂正するだけでこれだけまとまったものは初めて作りました。同じ宣言をしたりしてるところがあったり修正箇所の多いCSSとは思いますが(汗；

10.KAZUMiX style

サムネイル

参加者名
KAZUMiX
Webサイト
KAZUMiX memo
要素・属性
  • div
  • id
  • class

頑張ったところなど

やたら長いh1タイトルの扱いに悩みに悩んだ。

9.キリカキ/f1f1f1×1f1f1f

サムネイル

参加者名
阿檀　(adan)
Webサイト
Adan Kadan Blog : 『画像の使用を（略）CSS大会』に参加
要素・属性
  • div
  • class

頑張ったところなど

文月夕氏の労作『読みやすさアンケート 1005件の結果を集計』……ではなく（滝汗）、有効投票総数837件時点の平均値を算出し、結果として出てきた「眩しくない淡灰色の背景色」を生かしたデザインを、と、考えたものです。
expressionは『HarukiyaArchives』を参考にさせていただきました。（IEで閲覧窓サイズを小さくするときは、[更新](f5)を）HTMLを変更しない、という規定のため、じゃっかん無茶をしています（line-height:400%;とか……)

8.レイリオ

サムネイル

参加者名
Doil
Webサイト
なし
要素・属性
  • div,class,idなし

頑張ったところなど

余り「カッコイイ」とは思えない代物ですが、涼しげで快適なスタイルを目指しました。
見出しの区別や、論理要素の区別も、水準以上…に出来たと思います。
元の「Summer Style」が駄目だったので、結構苦労しました。

7.Dark Style 3

サムネイル

参加者名
pi8027
Webサイト
Stricter.org
要素・属性
  • div,class,idなし

頑張ったところなど

h1,h2要素を角丸にしようとしてみました。
結局それらしい物にはなったけど、如何見ても角丸になっていません。

6.付箋紙

サムネイル

参加者名
日月九曜
Webサイト
Kiss The Moon
要素・属性
  • div
  • id

頑張ったところなど

囲いdivが3つもあったので卑怯な利用のしかたをしてみました。

5.ヨークアベリア

サムネイル

参加者名
さかどん
Webサイト
さかどんウヱブ
要素・属性
  • div
  • class

頑張ったところなど

睡魔という悪魔と激しい戦闘

4.froggreen

サムネイル

参加者名
hid3yuki
Webサイト
蛙足軽 - Frog Infantry
要素・属性
  • div
  • id
  • class

頑張ったところなど

2 カラムっぽい雰囲気を出してみようと

3.07年04月12日のスタイル

サムネイル

参加者名
のり
Webサイト
朝顔日記
要素・属性
  • div
  • id
  • class

頑張ったところなど

h1 のスタイルが見どころですが、うまく行っていません。（ぉ

2.Post It

サムネイル

参加者名
dormouse
Webサイト
なし
要素・属性
  • div
  • id
  • class

頑張ったところなど

ノートの書き込みと付箋紙をイメージして作りました．できるだけシンプルに，また要素の再利用を考えて書いたつもりです．
モダンブラウザでしか機能しないものもいくつかありますが，基本的なデザインはどのブラウザでも変わらないようにしました．
htmlを変更できないこともあってサイト全体をCSSでデザインする時にはやはり最初の設計が肝心だというのがよくわかって勉強になりました．

JSNレンタルサーバー

Last-Modified :2010/04/18

jamgraffiti.css@gmail.com

Creative Commons License