ナビが綺麗なサイト
これも「なんて綺麗なナビなんだ」と思ったサイトです
カザフスタン文化センター
ナビにグラデーションを使ってて見た目が優しいわりには派手で好き
hoverで上下逆になった時に上の線の色とグラデーションがバッチリ合うのも操作してて楽しい
![]()
これはメイン以外のデザイン
ここで気に入ったのは、メインナビの中に含まれる小項目をどうやって表示するか?って事
TOPとサブのデザインががらっと変わるととても見にくい気がして仕方なかった
このサイトはサブのメニューが並ぶ部分をTOPでも色で区分けしているので、サブに飛んでもあまり違和感がなかった
ぜひ使いたいデザインだ
各ページのサブタイトル部分も横にババーンと渡してあって見やすくてナイス
![]()
これはBlogのコメント部分のデザイン
こうやって色分けするだけでも見た目が落ち着いて良いと思う
・・・これってnucleus本体にclassいれてCSSで調整してるのかな?
![]()
しかし・・どこまで勉強したらこんなキレイなサイトができるんだろう?ちと不安になる、私の頭で大丈夫か??
営業日カレンダーがイイ
「営業日カレンダーをこんな感じで表示させたいな」と思ったサイトです
ストラップのワンコール
私の知っているカレンダースクリプトは当月しか表示できません
でもこれは四ヶ月分も載せてるのがイイ!
私の場合は二ヶ月分欲しいのだけど・・
その下にちゃんとテキストで解説してあるのが親切(これはすぐにでも真似したい)
サイト紹介が有効
これは「サイトの紹介文がなんて有効なんだろう」と思ったサイトです
ストラップのワンコール
サイトの上部にデザイン図案を載せてあるので、最初は「何を作ってるんだ?」と分かりにくかったが、その上の説明文を読んで納得
私のサイトもわかりにくいだろうと思うので、このようにハッキリと宣伝文を載せるのって親切だと思う
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時間でした(これでも進歩したもんだ・・ははは)
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の概念もそろそろキッチリと理解して使いこなせるようにしましょう・・自分(滝汗)
