CSSテンプレート

各プロパティの値を初期値にする、initial_value.css

前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。(確認しているのはVer8)
一時的に、宣言を取れば普通に選択できます。

さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。
使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。
他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。

とっても使えるoverflowプロパティ。その使い方色々。

光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。
まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。

さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。

あんまoverflowプロパティを使った事が無い方は、ビックリですよ!
これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど

サンプルとかは以下よりどうぞ。

ページ送りのサンプル4種+2

ページ送りず、随分間が空いてしまった・・・何て言う現実。
気付けば冬間近ですね。

久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。
ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。

地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。

ちょっとした組み方の違い

DQ9ではじめてマルチプレイやりました!
新しい楽しみ方だと思うなー。

ちなみにやったのは、この人たち。

collamoの中の人。
CSS Sprites作成ツール「Tonttu」を作ったみたいで、試しに使ってみましたがPSとかでチマチマ作るより全然使いやすかったっす。
興味ある方どうぞ。
これからゆっくり考Lの中の人。
ブログの内容はよく分かりませんが、「JavaScript超初心者によるJavaScript入門講座」ってサイトではてブ50目指して頑張ってるみたいです。
音声解説やってるのでお姉さまが優しく語りかけてくれます。

確認せず晒したんで本人に怒られたら困っちゃう。
さてさて、本題の組み方の違いです。

フッターとかの区切り『|』のサンプル1種

ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。

コレに限らず、昔のエントリーを見てると、自分で無いな~使えねー!って突っ込みたくなるエントリーが多いっす・・・うぅ。
念じたら全部最近の書き方になおらないかな。

・・・

残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。

何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。
というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。

a要素が2行になった場合に背景下にテキストが来ないように。

目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。
そういえば、web creatorsの5月号(たぶん)に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか!?読んでないーorz
あと、7月号(Vol.91)にちょろっと記事書いてるので良ければ買ってくだしあ。

サンプルのキャプチャ
タイトルがa要素になってますが、インライン要素でもいいです。
背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。

タイトルって難しいですねorz

さて、時間もあまりないので本題に。

関連ページとかのリンクに使えそうなサンプル

ブログを書こうと思ったきっかけが今回もTwitterっていう。
この一言が発端だとか。

@hira いつもブログ見てます///

更新してないときは心に刺さる一言ですね。
でも、こんなブログでも見てくれてる人が居るってのを実感するとモチベーションが上がるっす。

さて、主題の関連ページとかのリンクに使えそうなサンプルですが、以前エントリーした「タグクラウドみたいなのの単語の折り返しに関して」と同じだったりするんですが、自分の中では結構使い道があったのにビミョーな感じだったので、見せ方の問題が大きいような気がしてちょっとリベンジです。

サンプルは以下より。

新規でサイトを作るのに使えそうなの一式。Ver 3

随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。

中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。

clearfixを使わないでやるには。

2008年11月11日お昼頃
overflow部分を一部加筆しました。

ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。

さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ~なんて思ったのです。

なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。

あ、clearfixを知らない方は、clearfix|CSS HappyLife辺りか適当にぐぐってくださいませ。

アイコンやサムネイルの横にタイトルと概要文があるような時。

とりあえず、暑いっす。えぇ。
ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。

あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。
ベトナムに架ける橋

ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。

サンプルページに移動しますさて、そろそろ本題に。

こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。

今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。

このページの上部へ

↑上に行くよ