CSSテンプレート

HTML5で組まれたブログのベースに使えそうな一式

MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。

MT underHat テーマ 002 のキャプチャ
MT underHat テーマ 002 - カンバス | MT underHat

今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。

何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。
入門用というか。
実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。
なので、触れやすい感じを目指してみました。

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

HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。

今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。

社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・

それはさておき、中身のご説明などを続きにて。

各プロパティの値を初期値にする、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を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。

背景画像切り替え

ミクコレ的ノリでお好きな背景にして閲覧して頂ければと思います。
デフォルトの背景は、ボクの気分に応じて時々変更したり季節モノになったりするみたいです。

このページの上部へ