CSSに関するネタを中心に色々書いてます。
シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。
まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。
ページを見ても、あんまり意味が無いっすね。えぇ。
いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。
んでは、続きにて中身の説明なんぞをしていきます。
前回の更新日が見たくない程に時が流れている今日この頃・・・。
ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。
こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。
なので、これからはちょろっとでもネタが有れば更新していきたいなーと。
何をモチベーションに更新するかはまだ見つかってないけど＞＜
さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。
WebKit系のブラウザならそのまま確認できます。その際、ウィンドウサイズを変更して横幅を小さくするとポートレート用の表示になります。
スマートフォンから見たい場合は、
http://bit.ly/new_sp_v1
からでも見れます。
ついでにQRも用意しました。
ちょうどCSS Nite LP16 も有りますし。LP聞いて、テンションが上がったところでコレを使ってもらおうと言う算段ですね。分かります。
では、中身のご説明などを続きにて。
MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。
MT underHat テーマ 002 - カンバス | MT underHat
今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。
何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。
入門用というか。
実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。
なので、触れやすい感じを目指してみました。
HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。
今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。
社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・
それはさておき、中身のご説明などを続きにて。
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。
中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。
新しいdigiper staff blogが始まりました。
タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。
何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。
さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。
Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。
むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。
えっと、ダウンロードは以下よりお願いします。
ちなみにダウンロードしたファイルのindex.htmlを開くと以下のようになってます。
GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。
これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。
「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？
さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。
なので、複数ページが詰まったサンプルを作ってみました。
yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。
そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。
2カラムなサンプルです。
海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。
どんなもんか見たい方・欲しい方は以下よりどうぞ。
この辺で知りました↓
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？
08年6月4日追記：
コレの新しいの作りました。
11月7日追記：
contens.cssの56行と60行目の#contents部分でスペルミスしておました。
ごめんなさい...
現在は修正版になっております。
修正後のcontents.css
---
SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。
さて、一行駄文はお終い。本題です。
毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。
んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。
以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。
どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう可能性が大きいです。はい。
コレはかなり社内向けというか、仕事で最初に使うのに使えそうな感じにしているので、incとかあったりもしますが、SSIとか使わない場合は不要です。
まぁ何はともあれ、以下よりDL出来ます。