いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。
今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません><
ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。
さて、本題に。
いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。
今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません><
ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。
さて、本題に。
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。
カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう!】の全記事一覧です。
新規セットのは、ちょっと遊び心で動画とか使ってるんで、実際の動きがちょこっとでも感じられるので、観てもらうとグッと興味が出るかも!?
シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。
まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。
ページを見ても、あんまり意味が無いっすね。えぇ。
いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。
んでは、続きにて中身の説明なんぞをしていきます。
気付けば、Vol.10!
ずいぶん長編になってまいりました。
何気に、既に去年1年分のエントリー数を超えてるだなんて!
今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。
・・・はい、後者です。
さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます!
ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。
ここまで来ればだいぶSassを使いこなしてる様な気がしますよ!たぶん。
や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ`)フーン 程度なんでしょうけど!
前回のエントリーで、無事に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知識はそのまま使うことが出来ます。
少々紹介が遅くなってしまいましたが、この度9月27日に発売した「できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)」を書かせて頂きました。
今回も共著で、WWW WATCHの中の人と書いてます。
書籍の内容としては、一言で言ってしまうと Tips集 と言う感じでしょうか。
初心者~中級者あたりの人がコーディングしてる時に、『アレってどうやったら解決出来るっけ?コレは何だ?』みたいな時に使える感じの書籍です。
パラパラめくって適当に読んでも新しい発見とかも有るかもです。
時代が時代なので、HTML5とかCSS3に関してもいくつか載ってます。
あと、スマートフォンに関してもちょこちょこと。
その他書籍の内容に関しては、新著 「逆引き HTML+CSS デザイン事典」 が9月27日発売 | WWW WATCH でも紹介されてます。
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 使ったりと好きにやらせてもらえたので嬉しかったです。
実績掲載も問題無いみたいなのでこうやってブログにも書ける訳ですね。
ホント、ありがとうございます。