いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。
今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜
ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。
さて、本題に。
「CSS3」と一致するもの
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。
カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。
- 【Sassを覚えよう！Vol.1】はじめに
- 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？
- 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
- 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
- 【Sassを覚えよう！Vol.5】環境構築（黒い画面編）
- 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して
- 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）
- 【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす
- 【Sassを覚えよう！Vol.9】変数と演算で効率的に
- 【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
- 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1
新規セットのは、ちょっと遊び心で動画とか使ってるんで、実際の動きがちょこっとでも感じられるので、観てもらうとグッと興味が出るかも！？
【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1
シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。
まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。
ページを見ても、あんまり意味が無いっすね。えぇ。
いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。
んでは、続きにて中身の説明なんぞをしていきます。
【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
気付けば、Vol.10！
ずいぶん長編になってまいりました。
何気に、既に去年1年分のエントリー数を超えてるだなんて！
今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。
・・・はい、後者です。
さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！
ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。
ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。
や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なんでしょうけど！
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜
記法の前に
Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが）
軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。
ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。
.item {
/zoom: 1;
}
「/」が使えないので、この場合は「*」にすれば問題有りません。
.item {
*zoom: 1;
}
いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。
>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css
英語が出来なくても『style.scss の12行目でエラーが出てる！何か /zoom: 1; がInvalidなCSSっぽい！』って感じで分かるので、変にハマって時間を取られません。
「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、
.item {
width: 350px;
}s
何か、} の後に s が残ってる！！！（きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね）とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。
互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。
本を書きました。「逆引き HTML+CSS デザイン事典」
少々紹介が遅くなってしまいましたが、この度9月27日に発売した「できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)」を書かせて頂きました。
今回も共著で、WWW WATCHの中の人と書いてます。
書籍の内容としては、一言で言ってしまうと Tips集 と言う感じでしょうか。
初心者～中級者あたりの人がコーディングしてる時に、『アレってどうやったら解決出来るっけ？コレは何だ？』みたいな時に使える感じの書籍です。
パラパラめくって適当に読んでも新しい発見とかも有るかもです。
時代が時代なので、HTML5とかCSS3に関してもいくつか載ってます。
あと、スマートフォンに関してもちょこちょこと。
その他書籍の内容に関しては、新著 「逆引き HTML+CSS デザイン事典」 が9月27日発売 | WWW WATCH でも紹介されてます。
textarea のリサイズ機能を止めてみる
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。
なので、止める方法を。
CSS3にそれっぽいプロパティが有るので、1行書くだけです。
textarea {
resize: none;
}
こんな感じですね。
これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。
これだけだと、寂しいのでエントリーっぽくするために。
スマートフォン対応してみた。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。
何かを実験するには自分のサイトが一番手っ取り早くて良いですね。
サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。
ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。
と、それは良いとして、スマートフォン対応したんです。えぇ。
URLのオシリに、i/ を付けていただく感じです。
コーディング前に確認しておきたいこと。
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。
制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。
って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。
なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！
フリーランスになって一年が過ぎました
本人もすっかり忘れていましたが、フリーランスになってから一年が経ちました。
何だかんだと、気付けば一年。取りあえず生きています。
や、むしろ金欠で今月がかなりヤバい・・・うぅ。（余裕を持って計画的にって事ですね。はい。
それはさておき、基本コーディングのみでやってこれたのも、ホント人との繋がりがあってナンボでした。
ありがとうございます。
あ、デザインもやったりしましたよ？
直近では「無料写真素材 輪」をデザイン（ロゴ以外）からやらせてもらったり！
個人の方からの依頼は初めてで、HTML5 + CSS3 使ったりと好きにやらせてもらえたので嬉しかったです。
実績掲載も問題無いみたいなのでこうやってブログにも書ける訳ですね。
ホント、ありがとうございます。
いままでありがと、IE6。をした方が良いかも...な色々。
ホントに長い間王座に君臨し続けた Internet Explorer（以後：IE）6 ですが、制作者の願いとしては大半の人がIE6 の使用を止めて欲しいと願っているかと思います。
ボクもその一人なんで、以前「IE6で閲覧すると。」なんて記事も書いてます。
IE6を使っている人が他のブラウザに移行しない理由の一つとして「移行する必要が無いから」ってのが大きいのかなーと個人的には思います。
IEのバージョンを上げると社内のシステムが～とかは、社内のシステムを閲覧する時用ブラウザとして使えば良くて、別のブラウザを使うことは出来るんじゃないかな。
まぁ大きな会社は、何かインストールするだけでも許可が必要とか色々事情は有るんでしょうけど、それでも乗り換える必要がやっぱり無いんでしょうね。
だって、普通にサイトを見るだけならIE6でそんなに困らないですからね。
ここで言ってる「移行する必要」ってのは、根本的にIE6だとダメぐらいな勢いの状態を指してて、他のモノで時代の流れによって使えなくなったモノなんて幾らでも有るんですよね。
ポータブルプレイヤーなんてまさにそんな感じで、カセット → CD → MD → MP3 みたいな。
IE6はもう9年現役ってどんだけ長いんだろうと。
他のモンで9年も持っているのかどうか。
でも、これらのモノってマジで使えない状態になってしまったからみんな買ってるんだろうけど、IE6はマジで使えない状態じゃないので残ってる気がする。
移行や買い替えの中では、ブラウザなんて無料だし敷居としても決して高くないのに残るわけですから。
と、まぁそんな訳で、IE6から別のブラウザに乗り換えるなり最新バージョンのIEを使ってもらうなりする為の理由付けとか説得材料的なのに使えそうな事を色々拾ってきたりしながら自分なりの意見を書いたりしてみました。
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。
今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。
社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・
それはさておき、中身のご説明などを続きにて。
第二回コーディングコンテストの結果が発表されました。あと個人的な感想とか。
先日、ALPHA LABEL: アルファラベルのふっちーさんからお誘いがあり、Attribute=51のぐりさんとボクの男三人で飲んできました。
ふっちーさんとがっつり話したのも初めてだったのですが、ぐりさんは以前からブログを拝見していたのもあり、会いたい人の一人だったのでお会い出来て良かったです＞＜
思わず二件目行っちゃうくらい楽しい時間を過ごせました。
さて、17日に行われたCSS Nite LP, Disk 9「Coder's Higher」にて第二回コーディングコンテストの結果が発表されました。
入賞された方々、おめでとうございます！
今回、残念ながら最優秀賞は該当者無しと言う結果になってしまいましたが、開催目的である
これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。
は十分達成されたのかなーと思います。
ボクも、コーディングコンテスト用のデザインを実際に組んでみたのですが、思ったより苦戦したりしてかなり勉強になりました。
審査の結果は、CSS Nite LP9 連動 第2回コーディングコンテストを見ていただくとして、ボクは一応今回審査員をしたので審査の流れとかその辺りを書こうと思います。
カスタムフィールドでアップした画像のリサイズに関して
コーディングコンテストが先ほど締め切りになりましたね。
ご参加した皆さま、本当にお疲れさまでした。
きっとすごい時間使ったんだろうなぁ・・・と思います。
こんなブログ書いてるくせに、ボク個人としてはCSS3の使い方とかはそんなに重視して無くて、HTMLがどんだけイケてるかが重要だと思ってます。
さて、そんな中なのにMT関係のエントリーです。
MTで画像のリサイズを色々頑張るためのやり方です。
想定している状況は、あんまリテラシーが高くない人が画像をアップしても、大変な事にならないようにアップした画像サイズに合わせて適切な画像サイズになったらいいよねって感じです。
リサイズ関係では、以下の記事やプラグインも参考になるかなと。
今回ボクがやろうとしているのは、カスタムフィールドで種類を「画像」にして追加したフィールドでのリサイズなので、本文内のリサイズは上記プラグインがイケてる気がします。
第2回コーディングコンテスト 開催決定。
第一回から随分時が流れましたが、第2回コーディングコンテストが開催決定しました。
今回も前回同様、予め用意されたpsdデータを使って参加者が自分のスキルとかを駆使してコーディングをしていくわけですが、第2回目は HTML5+CSS3を利用してコーディングするので現状だと個々でかなり大きな違いが出そうです。
対象ブラウザもかなり絞って、Firefox 3.6、Safari 4 のみになっているので、ホントにバリバリCSS3を使っていく感じですね。
デザインもその辺りをかなり考慮されているっぽく、CSS3を知っているか知らないかで明らかな差が出そうなデザインになっているので、1ページとは言え、前回なんかより難易度はずっと高いと思います。
今回主催はピクセルグリッドさんがやっております。
代表の中村 亨介さんをはじめ、高津戸さん、小山田さんと何だかすげーメンツが揃ってる会社です。
前回一応主催っぽいことしてたのもあり、今回ボクは審査員としてちろっと参加させていただきますので、色々よろしくお願いしますです。
ZERO
ただの宣伝になっちゃうんですけど、CSSに関するアレコレがつまったサイト作りました。
一応、ギリ公開レベルになったので公開です。
まだ未完成コンテンツがすげー多いですが、取り合えず頑張って書いたんで見てやって下さい！
IEオンリーで見られると切ないのでIEメインの人は、ChromeとかFirefoxでも見て頂けると嬉しいです。
この半年間くらい時間見つけたりしながらセコセコ作ってましたけど、ここまで形にするだけでも想像以上にきつかった...プロパティ多過ぎ。
今後は全然埋まって無いコンテンツを充実させたり、CSS3のプロパティを書いていきたいなーと思ってます。
ちなみにこのブログは微妙に方向性など修正するかもしれませんが、引き続き運営していきますのでよろしくお願いします。
HTMLコーダー100の質問に答えてみた
遅くなりましたが、新年一発目。
本年も、CSS HappyLifeとunderHatをよろしくお願い致します。
さて、先日「コーダー飲み会」なるものがあり、一応コーディングやってるって事でボクも参加させていただきました。
仲の良い人も何人かいましたが、人見知りなボクは大半が初めましてでドキドキ。
そんな中、幹事の一人 uzuさんが「HTMLコーダー100の質問」を作ったらしく、うっかり「やります！」と答えてしまったので、答えましたよ！って事でエントリーっす。
IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。
IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。
よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。
毎度のようにサンプルも用意してみました。
自分が使いやすいと思ったJSを混ぜ混ぜしてみる
JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。
んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。
そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。
今回その実験に使わせていただいたJavaScriptたちは以下。
上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。
見てお分かりのとおり、基本的には全部足しただけで別にどーこうってしてません。
主にclass名やらを自分の好みにして、重複しちゃってる機能を消したりという感じです。
こういうのはちょっとライセンス問題が気になるので、間違ってたらご指摘ください。
いちお、MIT LicenseとPublic Domainだったので、勘違いしてないか調べた限りでも、まぜまぜして公開するのはOKだったので公開してます。