Sassの教科書で一番読んで欲しいところ。
いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。 さて、本題に。 一番読んで欲しいのは5章なんです Sassは、インストールが面倒そうとかって部分やイマイチSassを使うメリットが見えてこないって人も多く、他のツールとかに比べると導入のハードルが高いと思うので、1章と2章ではその辺りをしっかりフォローした内容になっています。 1章に関しては、サポートサイトでお試し用のPDFが読めます。 本書の試し読み | Web制作者のためのSassの教科書 - 公式サポートサイト 次に、3～4章はSassの機能
ソースなんて誰も見ないよ。
ボクたちみたいな、Web業界の人間やそういうのに興味ある人でも無ければ、訪れたサイトのソースなんて誰も見ないよね。 そんな感じだから、蔑ろにされやすいし、扱いも低かったりする。 そりゃそーだ。 ボクだって、今の仕事してなかったらサイトのソースなんて見る事無いし。 テーブルレイアウトだろうが、どんな方法で組まれていようが普通に閲覧できれば関係ないよね。 でもさ、エラー出まくりのHTMLなんて、体内がずたぼろの人と同じじゃんね。 見た目健康そうでキレイに着飾ってても、体内ずたぼろじゃあやっぱりダメじゃないですか。 人様の体内を覗く事なんて普通に考えたら無いし。 普通に歩いているように見えれば、見分けなんて付かない。 だけど、時が経つにつれ徐々に身体がおかしい事に気付いていく。 そんなんイヤだよ。 HTMLだって、昔作ったサイトはInternet Explorerでしか見れなかったりして。 その
今よりコーディングのスピードを上げるには
「今よりコーディングのスピードを上げる17の方法」とかってタイトルにしたら、いかにもそれっぽい感じがするなぁ（笑） さて、仕事をする上でもっとも重要な要素の一つに、作業スピードって有ると思うけど、正直最近の自分が以前に比べて早くなっている気がしない今日この頃。 一応、現状の作業スピードでも期間内に納品は出来てるから最低限の作業スピードは確保されてると思うんだけど、コレが1.5倍くらい早くなったら、空いた時間に勉強したり、もっとガンガン組んでいけるから、速さを極める事はとても重要だよなーと。 なので、自分がやろーとしてる思いついた方法をメモ。 コーディングのスピードが上がりそうな事 無理やり出した感も有るけど、取り合えず思いついた方法を。 1）基本的なタイピング速度を上げる。 タイピングソフトとかを活用して、基本となるタイピング速度を上げれば少しはコーディングのスピードも速くなるかもって思っ
テーブルのボーダーに余白がある場合のサンプル
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。 試行錯誤した結果、背景でやってみることにしたらうまく行きました。 ただ、背景でやるにしてもその切り方がちょっとだけ、工夫？する必要があります。 該当画像は、後ほど。 CSSは、こんな感じになってます。 #main table { border-coll
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
デザインを見てて「？」が浮かぶこと。
最近思う、デザインに関する「なんで？」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。 この「なんで？」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。 フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。 ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。 トップページとトップ以外のページの関係性 ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。 グローバルナビゲーションの位置が変わる 横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像（フラッシュ）が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。 よく聞くのは、「トップだけ他のページ
ちょこっとだけ効率が良くなるかも知れないこと
404 が表示された時って皆はどんな気分になるんだろう... さて、一行駄文はおしまい。 本題です。 同じデザインを組むにも、人が違えばそれだけ組み方も様々だとは思うのですが、こうした方がちょこっとだけ効率が良くなるかもね！っていう事をちょこっと書いてみるだす。 サンプルページ サンプルダウンロード メインのCSSファイル とりあえずこんな感じのサイトがあったとして、どう組むかっていう辺りが今回の主題なんです。はい。 あ、サンプルページを別ウィンドウで表示しながらお読みいただくとスムーズに事が運ぶ予感です。 では、詳細に。 メイン部分の「見出しっぽいの」辺り このサイトの見出しもそうなんですが、見出し以外は10px程度のpaddingが指定されていて、見出しはぴったりくっついているような場合って有るかと。 この場合の一つの組み方として、 <div id="main"> <h2>見出しっぽい
3カラムサンプル18種
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S
CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！
と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。 もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
