CSSグループCSS作成コンテスト RSSフィード
 

リスト表示 | ツリー表示
ツリー全部最新の50件

1DocSeriDocSeri   CSSグループCSS作成コンテスト

前任管理者のid:kamioka氏が退会されるにあたりこれまでのスタイルがクリアされましたので、新たにCSSグループのスタイルを作成したいと思います。

作成にあたっては、できれば管理人が用意するという形ではなくグループ参加者が作り上げて行く形をとりたいと考え、コンテストの開催を提案致します。

コンテスト概要は以下の通りです。

以上、宜しくお願いします。

返信2005/08/15 12:28:02

2treduetredue   グループページの参考資料

 キーワードグループページの構造とソースを作ったので、CSS作成コンテスト

参考資料になれば幸いです。

構造に関して表示される形は f:id:tredue:20050902113742:image このようになります。

こちらのページで紹介されているソフトで構造の視覚化を試みています。

kamioka 氏のようにリスト構造を取り入れようと考えましたが、この

ソフトが容易に再現してくれるので、そちらを活用しました。

グループページの構造のキーワードではまだスタイルが適用されていないので、

下記のスタイルを付け加えていただければ、キーワードの内容を修正し表示できると思います。

今後の設定で不都合があれば、修正、削除は厭いません。

もし、追記していただける場合、管理人さんの手を煩わせてすみません。


構造サンプル画像 f:id:tredue:20050902113742:image

構造表示ソフト KOMEKAMI http://www.geocities.jp/ajiyoshi_blog/komekami/


設定追記部分


div.abox{
<a class="keyword" href="g:css:keyword:padding">padding</a>: 2px 2px 2px 1em;
<a class="keyword" href="g:css:keyword:margin">margin</a> : 2px;
border:1px solid #DDD;
<a class="keyword" href="g:css:keyword:background-color">background-color</a>:white;
}
div.abox div.abox {border:1px solid #AAA;}
div.abox div.abox div.abox {border:1px solid #777;}
div.abox div.abox div.abox div.abox {border:1px solid #444;}
span.expand{ cursor:pointer; }


それから提案ですが、コンテストの参加をCSSグループ参加者以外のはてな

活用されている方も対象に広げられたらどうでしょうか?

CSSグループCSS作成コンテストブックマークを読むとグループ外の方の

意見で参加されたい方もいるようですし。


http://b.hatena.ne.jp/entry/563446

返信2005/09/02 14:23:01

3DocSeriDocSeri   コンテスト用CSSに関する追記

募集するテーマCSSグループデフォルトスタイルとなり、トップページキーワードページ、掲示板カレンダーの他デフォルトでの日記編集ページ、日記設定ページにも適用されますので、それらすべてに対応してデザインされる必要があります。

見栄えの確認については、近く各ソースに対してスタイル適用時のイメージプレビューするCGIを公開する予定ですので、それをご利用下さい。

コンテストへの応募についてはグループ外の方でも問題ないと思います。投票に関してはまた別途考えます。

一応、応募方法がこのスレッドへの記入になっていますので、少なくとも期間中、この掲示板への書き込み権限をグループメンバーのみから全はてなユーザーに変更しました。

仮にはてな外の方から応募がある場合は……はてなユーザーに連絡を取って頂いて、代理応募とするのが適当でしょうか。

KIWI internet を作成しました。スタイルシートを貼り付けて適用対象ページとヘッダ色を選ぶと表示確認が可能です。これで応募作を比較的簡単に確認できるようになります。
取り敢えずは無差別な確認用という事でこの形で公開しますが、今後は応募作をプルダウンで選んで表示を見るような方式にしようかと思います。

返信2005/09/06 19:48:50

4DocSeriDocSeri   一応の締め切りですが

応募がありません。

期間を延長しても良いのですが、参加者が増えないようであればその意味もありません。

もし参加予定の方が居られたら、このエントリに対してトラックバックして下さいBBSに対してトラックバックって有効でしたっけ?できないようなら他の手段を考えないといけません。


主催する手前、私も何か出さねばなりますまい。

とても完成とは言えない状態ですが、取り敢えず投下しておきます。

内容は逐次修正の予定です。


html, body {

margin: 0;

padding: 0;

}

h1 {

z-index: 1;

}

div.hatena-body {

border: 8px solid #000;

position: relative;

background: url(http://www5.kiwi-us.com/%7Earcana/img/pillar.gif) no-repeat bottom left;

z-index: 10;

}

div.hatena-body table {

border-collapse: collapse;

}

div.hatena-body th, div.hatena-body td {

border: 1px dotted #666;

}

div.main {

border-left: 8px solid #000;

margin-left: 240px;

background: url(http://www5.kiwi-us.com/%7Earcana/img/pillar.gif) no-repeat top right;

}

div.day {

padding: 36px;

border-bottom: 8px solid #000;

}

div.sidebar {

position: absolute;

top: 0;

width: 282px;

background: url(http://www5.kiwi-us.com/%7Earcana/img/pillar.gif) no-repeat top left;

}

div.hatena-module {

background: url(http://www5.kiwi-us.com/%7Earcana/img/storage.gif) no-repeat;

padding-top: 60px;

}

div.hatena-moduletitle {

background: url(http://www5.kiwi-us.com/%7Earcana/img/door-B.gif) no-repeat right bottom;

padding: 5px 41px 5px 5px;

height: 38px;

}

div.hatena-modulebody {

margin-left: -8px;

background: url(http://www5.kiwi-us.com/%7Earcana/img/window-A.gif) no-repeat;

padding: 0 41px 0 8px;

}

div.hatena-module form {

background: url(http://www5.kiwi-us.com/%7Earcana/img/kitchen.gif) no-repeat left bottom;

padding-bottom: 48px;

margin: 0;

}

ul,ol {

margin: 0;

padding: 0;

border-top: 1px solid #000;

background: #db9;

}

li {

padding-left: 1em;

border-bottom: 1px solid #000;

border-left: 1px solid #000;

border-right: 1px solid #000;

}

table.calendar {

margin: auto;

margin-bottom: 60px;

}


完成度よりネタ優先の代物ですが。

返信2005/10/01 00:59:59

5aquatailaquatail   4  便乗して投下。

レイアウト段階ですが便乗して投下します。

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

はてなグループCSSヴューアがサイドバー一本仕様だったので、自分とこに設定してます。

でもってOperaレイアウトが崩れます。

.main{width: 100%;}

とすればOperaでも思い通りの表示になるのですが、それやると他のブラウザで崩れます。

『The Owen Hack』『star 7 hack』以外にOperaのHack法って何かあるんかな?


html

{

margin: 0;

padding: 0;

}

body

{

min-width: 650;

margin: 0;

padding: 0 50 100;

letter-spacing: 0;

line-height: 1;

font-size: 100%;

font-family: sans-serif;

_text-align: center;

_word-wrap: break-word;

_word-break: break-all;

}

a

{

text-decoration: none;

}

table

{

width: 480;

margin: 0 0 0 auto;

padding: 300 0 0;

_float: right;

_width: 1;

_margin: 300 0 0 140;

_padding: 0;

}

h1

{

position: absolute;

top: 0;

font-size: 300%;

_left: 50;

}

.hatena-body

{

border: 1px black solid;

_width: 100%;

_text-align: left;

}

.breadcrumbs

{

border-bottom: 1px black solid;

font-size: 80%;

text-align: right;

}

.breadcrumbs a

{

display: block;

}

.calendar

{

border-bottom: 1px black solid;

font-size: 80%;

text-align: right;

}

.calendar a

{

display: block;

}

.main

{

width: 100%;

float: left;

margin: 0 350 0 0;

_width: auto;

}

/*head:first-chil+bodyのついたセレクタはOpera6以下とIE6以下からは見えない。Opera8.5は読み込む。*/

head:first-child+body .main

{

width: auto;

float: left;

margin: 0 350 0 0;

}

.sidebar01

{

float: right;

margin: 0 150 0 -350;

width: 200;

text-align: right;

font-size: 90%;

_margin: 0 0 0 -350;

}

.sidebar02

{

float: right;

margin: 0 0 0 -150;

width: 150;

text-align: left;

font-size: 80%;

}

.footer

{

clear: both;

}

table tr td

{

background-color: transparent;

}

table table

{

font-size: 10%;

_margin: 0;

padding: 0;

}

table table td

{

padding: 0 5;

_padding: 0;

}

input

{

width: 60;

}

.day

{

min-width: 200;

padding: 0 10 0 30;

border-bottom: 1px black solid;

_width: 100%;

}

h2 a span.date

{

display: block;

text-align: right;

font-size: 50%;

}

h2 span.title

{

display: block;

font-size: 200%;

text-align: center;

}

p

{

margin: 15 0 0;

text-indent: 1em;

line-height: 1.2;

}

p img

{

width: 140;

}

.day.section table

{

min-width: 180;

overflow: scroll;

}

pre

{

border: 1px blue solid;

min-width: 138;

overflow: auto;

}

.hatena-module

{

margin: 0 0 100;

}

.hatena-moduletitle

{

font-size: 150%;

}

.hatena-modulebody ul

{

padding: 0;

margin: 0;

}

.hatena-modulebody ul li

{

list-style: none;

list-style-position: outside;

}

.hatena-modulebody ul li a

{

width: 100%;

line-height: 1.2em;

display: block;

overflow: hidden;

}

.sidebar01 .hatena-modulebody ul li a

{

padding: 4 20 4 10;

width: 100%;

}

.sidebar02 .hatena-modulebody ul li a

{

padding: 4 10 4 20;

}

返信2005/09/30 21:50:45
    Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。