2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました
インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう！で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか？」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ？本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに＞＜ 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。 書き始めたら
【Sassを覚えよう！Vol.1】はじめに
謹賀新年。 更新率が落ちて久しい当ブログですが、細々とまだ書いていければと思っていますので、本年もよろしくお願いします。 さて、Sass とか LESS って聞いたこと有ります？ なんか、CSSをクールに書けるとかすげーって叫んでる人がいる感じのアレです。 ボクも、2010年の終わり頃に@hamashun さんにご協力頂いてRubyのインストールをしたりして、Sassをちょこっと試してました。 なのにその直後くらいにPCがお亡くなりになったりしたのも有り、復旧に必死だったり仕事が忙しくなり（言い訳）そのまま特に音沙汰無く過ごしていたのですが、最近になってやっと覚えてきたので、CSSビギナー向けエントリーみたいなノリでこれから始める人向けに書ければと思ってます。 Sassに関しては 日本初の Sass エヴァンジェリストである @kotarok さんが随分前からオススメしてたり、最近ではLe
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
IEが有るから助かってるって思えるかもしれないお話
何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる？」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
今よりちょっとだけクオリティを上げるために。
執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か
Vista（64bitも）で動く、IETesterを入れてみた
待ってました。心底待ってました。 本気で待ってました！ Vistaの64bitでもIE6とかがチェック出来ちゃう素敵なアプリを！ IETesterのサイト これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。 インストール方法もとても簡単で、Download IETester v0.2 を押してダウンロードして実行。 後は、OK押して進んでいけば完了！ 基本的なレンダリングチェックには問題ないっぽいですが、まだアルファ版なので、ちょこちょこバグがあるっぽいです。 リサイズした時に内容が消えてしまう時がある ( 次バーションで修正予定 ) Previous/Next のボタンが動作しない Focus が動作しない まぁすぐに修正されるんじゃないでしょうか。 続きは、IETesterの使ってみての簡単な感想と、雑記です。 IETesterを使ってみて とりあ
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの
2008年4月10日に追記 最新バージョンは、0.1.6です。以前落とした方はお使いのプラグインのバージョンを確認してもらえると幸いです。 修正箇所 管理画面の「このブログにユーザーを追加」や「権限の付与」をクリックするとlightboxのような動きで表示される、画面が正常に表示されていなかったバグを修正しました。 CSS Nite x (r)evolution Shift to 2008でMT4がくるー！みたいな発言があってちょっと嬉しかったなぁ～。 MTはボクがデジパに入社した時から、CMSツールとして提供していたりしたので。 そうそう、忘年会ではヨモツネットの中の人にご挨拶が出来たのです！ウヒヒ！！ さてさて、主題に。 MT4専用でございますが、MTデフォルトだと、boldやitalicなどがボタンを押すとタグでちょいちょいっと囲ってくれるわけですが、ちょっと物足りないのです。 特に
Re:ユーザーの動き。
ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック＝トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近
ブロックレベル要素の高さを揃える
1日に2エントリーもするなんて、、、 [CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。 サンプルページ ダウンロード この方法のポイントになっている部分が、#mainとかカラムの親要素にoverflow: hidden;を指定して、各カラムには、以下のようにpadding-bottomプロパティとmargin-bottomプロパティを指定してる。 padding-bottom: 32768px; margin-bottom: -32768px; padding-bottomプロパティでおもいっきり下まで下げてから、同じ値のマイナス値をmargin-bottomプロパティで指定して、overflowプロパティで切り取ってる？ 値の「32768px」ってのは、軽く調べた限りIEの限界っぽい。 ぷろぐらむ の関係なん
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
PhotoBlogっぽいMTテンプレ
半年以上も前に、雑記にて書いた、「PhotoBlogを作ってみた」をちゃんと使えるようにしたバージョンを作成したので、取りあえず公開。 雑記っぽい内容がだらだら続くので、テンプレートを使いたい人は追記へどうぞ。 正直ちゃんと作り直す気なんて無かったんだけど、使いたいってメッセージが来てしまったので、何だかテンション上がって作り直しちゃいました。 写真を掲載するだけなら、色んなサービスがごろごろしてる訳でコレを使う理由って特にあるわけでもないんだけど、しいて言うならば、昔なつかしの手作り感溢れるサイトが好き。 あの時代にしょっぼいサイト作ってきた自分としては、既存のサービスを使わず自分で頑張って作ったぞ！っていう自己満足が忘れられないんす。 その延長線上に今のお仕事があると言っても過言ではなく、XHTML+CSSでのコーディングを頑張ってるのもきっとそんな理由。 そういえば、書こうと思ってて
タイトルと日付（リスト）が一行なサンプル
どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ul要素のサンプル Sample 03まではul要素でやってみました。 XHTMLは↓こんな感じ。span要素無くてもいけそうな気もしたけど、めんどｒｙ <ul class="sample01"> <li> <a href="#">タイトル</a> <span>1983年03月24日</span> </li> </ul> Sample 01 positionプロパティ使って色々やってる感じです。 ul.sample01 { width: 500px; margin-bottom: 30px; padding: 10px; border: 1px solid #999; } ul
2カラムサンプル13種
2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。 細かく作っていけば限りなく出来
角丸 背景を文字数に関わらず表示させる。｜CSS HappyLife
CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。 個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。 ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だったりします。 無駄なdivとか減らせますしね。 まぁユーザビリティ関係の本を読んでれば、可変レイアウトの方が良いと書かれておりますが、ソコは今回は気にしない方向で行くとして、取りあえずサンプル。 サンプル：http://css-happylife.com/template/05/ ダウンロード：http://css-happylife.com/template/05/05.zip サンプルを見ていただいたトコロで実際の方法をば。 今回のサンプルは、角丸＋文字数が少ない場合でも一定の高さの背景は表示させるって方法と併
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
