«Prev || 1 | 2 | 3 | 4 | 5 | 6 || Next»

ナビが綺麗なサイト

これも「なんて綺麗なナビなんだ」と思ったサイトです
カザフスタン文化センター

ナビにグラデーションを使ってて見た目が優しいわりには派手で好き
hoverで上下逆になった時に上の線の色とグラデーションがバッチリ合うのも操作してて楽しい
画像:画面キャプチャ

これはメイン以外のデザイン
ここで気に入ったのは、メインナビの中に含まれる小項目をどうやって表示するか?って事
TOPとサブのデザインががらっと変わるととても見にくい気がして仕方なかった
このサイトはサブのメニューが並ぶ部分をTOPでも色で区分けしているので、サブに飛んでもあまり違和感がなかった
ぜひ使いたいデザインだ
各ページのサブタイトル部分も横にババーンと渡してあって見やすくてナイス
画像:画面キャプチャ

これはBlogのコメント部分のデザイン
こうやって色分けするだけでも見た目が落ち着いて良いと思う
・・・これってnucleus本体にclassいれてCSSで調整してるのかな?
画像:画面キャプチャ

しかし・・どこまで勉強したらこんなキレイなサイトができるんだろう?ちと不安になる、私の頭で大丈夫か??

2009年12月10日:デザイン::zizodo

営業日カレンダーがイイ

画像:画面キャプチャ「営業日カレンダーをこんな感じで表示させたいな」と思ったサイトです
ストラップのワンコール

私の知っているカレンダースクリプトは当月しか表示できません
でもこれは四ヶ月分も載せてるのがイイ!
私の場合は二ヶ月分欲しいのだけど・・
その下にちゃんとテキストで解説してあるのが親切(これはすぐにでも真似したい)

2009年12月10日:デザイン::zizodo

サイト紹介が有効

これは「サイトの紹介文がなんて有効なんだろう」と思ったサイトです
ストラップのワンコール

サイトの上部にデザイン図案を載せてあるので、最初は「何を作ってるんだ?」と分かりにくかったが、その上の説明文を読んで納得
私のサイトもわかりにくいだろうと思うので、このようにハッキリと宣伝文を載せるのって親切だと思う

画像:画面キャプチャ

2009年12月10日:デザイン::zizodo

ナビが綺麗なサイト

通販で有名なSHOPチャンネルのサイトです
ここはナビゲーションが見やすくて目に優しくて「買わせる意識」をあまり感じさせないので好き(買うか買わないか?は別にして)です

画像:画面キャプチャ

各商品の紹介の仕方も画面を三つ割、四つ割と見やすく割ってあって好き
できればこのように並べたい

2009年12月10日:デザイン::zizodo

装飾はaタグで

ulとliを使ったナビゲーションメニューを本を見ながら再現していて「なんでaタグで設定しているんだろう?ulでもliでもいいじゃないか」と何度か思った
とっても疑問だった
だってulやliに設定しても同じ結果がでるんだもん

でも、何個か自作してみてやっと分かって来た
aタグで設定するのが一番効率がいいのだ
けっきょくulやliで設定しても最後にはaタグにな同じ設定を加えないと装飾がおかしくなるのだ
やぁ〜っとわかった・・そういう事だったのか

2009年12月09日:デザイン::zizodo

テキストでも自由な装飾

毎日.jpのナビゲーションバーに驚いた
これ、全部テキストだった・・・

画像:画面キャプチャ

2009年12月09日:デザイン::zizodo

Macのメニュー

Macの画面を見ていて気がつきました
「これもCSSみたい」

画像:画面キャプチャ
hoverすると背景色が変わって文字色が白になる
・・・これってCSSで同じ事できますもんねぇ(^^;
真似てみようかな?

2009年12月09日:デザイン::zizodo

css修正

このBlogで利用しているスキンに手を加えてある
場所はサイドバー最上部の”リンク”だ

ソースを見てみると、dlが立て続けに2つ並んでいる
おまけに.sidebardlのクラスが当てられていた(いいんか?)
とはいうものの生成させるリンクを修正できるハズもないので、cssに以下の内容を記載で、修正

dl.sidebardl {padding:0px;margin:0px;}

完全じゃないけど見れるようになりました(冷汗)

2009年12月08日:デザイン::zizodo

CSS学習帳せいさく

CSSの勉強にと「CSS学習帳」を自サイトに作ってみる

参照先:CSS学習帳

画像:画面キャプチャ

これだけのシンプルな画面だけどテンプレート部分で使用したタグは以下の通り

  • *
  • body
  • #wrapper
  • #contents .indexPage
  • #contents
  • h1
  • p
  • #header p.infomation
  • #header ul,#footer ul
  • #header  ul  li,#footer  ul  li
  • #footer address
  • #header hr,#footer hr
  • h2

・・・けっこうありましたネ(^^;
中央部分は編集可能領域にしてあって、ここに毎回思いついたCSSをHeda部分に書き入れて再現するって寸法です

今回はBlogなんかに使えるアイテムのタイトルデザインですが、こんなの普通の人は知ってると思うので割愛します(恥)
いえ・・私はさんざん「タイトルが長くなって2行になった場合は、背景画像は上に伸びるんだ」と思い込んでいたんです
でも、よぉ〜く考えてみてたら、配置で「上・中央・下・数値」って分けられるんですもんねぇ(^^;
それにやっと気がついたのでした
これならBlogにでも応用できそうです(^^)

ちなみに所要時間は2時間でした(これでも進歩したもんだ・・ははは)

2009年12月08日:デザイン::zizodo

style属性

今までなんの気なしに「style」を使っていましたが、こういうことだったってのにやっと気がつきました(汗)

参照元:初心者のためのホームページ作りstyleインラインにおけるスタイルシートの設定

適応要素 :すべての要素(ただしヘッダ内要素には使えません。)

通常スタイルシートは外部に置くか、ヘッダ内に記述しますが、やむを得ずどうしてもインラインで記述しなければならないときにはこの属性を使ってスタイルを設定します。

<サンプル>
<p style="color:#f00"> ~ </p>

img要素にも使えるんですね(って早く気がつけよぉ)
参照元:CSSレイアウト実践講座( CSSの記述方法 - タグに直接記述

一番分かりやすい記載かも
参照元:とほほのスタイルシート入門(スタイルシートの基礎

最も簡単なスタイルシートは次のように指定します。<span> はインライン要素(前後で改行されない)、<div> はブロック要素(前後で改行される)を囲む一般的なタグとして使用されます。

<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>

<span> や <div> に限らず、<h1> や <p> など、ほとんどのタグでも style 属性を指定できます。

<p style="color:red;">あいうえお</p>

すべての <h1> タグにスタイルを指定するのは面倒なので、これをまとめて行うことができます。次の例は、すべての <h1> タグに style="color:red;" を指定したことになります。

<html>
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
H1 { color: red; }
-->
</style>

</head>
<body>
<h1>あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>

スタイルシートに対応していないブラウザのために <!-- 〜 --> でコメントアウトしておきましょう。JavaScript とは異なり、--> の前に // を記述してはなりません。

なんだか全部まるまるコピーです罪悪感あり(汗)
でも、最初からCSSに触れずにBlogとかやりだすとこの概念が理解できません
「本文に記載するものと、headに入れるものと、リンクするものがある」だけしか知らないんですもん、これじゃあ「CSSがわかってきた」なんて言えるもんじゃないです
「あれ?スタイルシートを記述するのに<!--と-->って必要じゃなかったっけ?」ってリンクするのに思い出す始末(違いますよ、上記の内容からheadに直に記載する時の方法ですよ)・・ああ、そこすら理解していないなんてぇ
spanとdivの概念もそろそろキッチリと理解して使いこなせるようにしましょう・・自分(滝汗)

2009年12月08日:デザイン::zizodo

«Prev || 1 | 2 | 3 | 4 | 5 | 6 || Next»

サイトナビゲーション

新着記事
ナビゲーションが美しいサイト(07/20)
カッコいいメニュー(07/12)
ナビゲーションが分かりやすいサイト(07/12)
間隔が美しい(05/24)
画面構成が立体的なサイト(04/20)
Twitter
Fri, 10 Sep 2010 03:06:23 +0000お昼は旦那の食い残し。それも三日前の・・・・・だってもったいないんだも~ん。この物価高の猛暑で、食料が高いのだ、捨ててなるものかっ!!! (9月10日12時06分)

検索

ログイン

リンク

SKITEM DESIGN WORKS