またまたMdNさんの本を執筆させていただきました！
74ページから75ページの見開きです（泣）
う、うれしいい！！！
ピンクの縁取りがしているページなので写真のように、本を横から見るとすぐに発見できます。
是非書店でお買い上げの上、ご覧くださいね！
制作実績
http://www.rasen-d.net/works/
web creators 2010年 03月号
アマゾンのページへ
私はスキャンした本を見たりするのに使っています。
（iPhone情報整理術
最近2.3→2.4にバージョンアップしたのですが、英語のソフトなのでバージョンアップ履歴を見ても「？」となってしまいました（泣）
画面を見ながら英語を「Yahoo!翻訳」にかけて、さらに意訳してみたのが次の文章です。
重要な通知：新しいアプリケーションをインストール、または既存のものを更新した後に、我々はあなたのiPhone/iPodタッチ（電源を切ることで）を再起動することを、強くあなたに提案します。 多くのテクニカルサポート要請は、単に再起動することによって解消されました。
我々は、GoodReaderを改善することに絶えず取り組んでいます。我々の最新版の新着情報は、ここにあります：
バージョン2.4での更新
翻訳前の文章も載せておきますので、気になる方はお気に入りの翻訳ソフトにかけてみてください。
Important notice: After installing a new application or updating an existing one, we strongly suggest you to hard-reboot your iPhone / iPod touch (with powering off). Many technical support requests were solved by simply rebooting.
We're constantly working on improving GoodReader. Here's what's new in our updates:
"new in version 2.4"
まず、自分が書いたところを見たのですが、最終のPDFよりさらに見やすくなっていたので、ギリギリまでDTPの人調整したんだな〜とうるっと来ました。
あと表紙にも螺旋デザイン担当記事のキャプチャーが結構載ってて、大はしゃぎしました。
それだけじゃなくって、「本書の使い方」にも螺旋デザインの記事を使って解説されていたので、さらに大はしゃぎしました。
あと、本が出たばっかりのタイミングでうまいことCSS Niteがありまして、tommmmyさんから「プレゼントにどうですか？」と誘っていただきました。
これは渡りに船だぜ☆とありがたく贈呈させていただくことにしました。
MdNさんから本２冊もらってたので（私とサチコさんの2人で書いたからかと思います）、全然フトコロは痛くありませんでした（笑）
ジャンケン大会で本をあてた人は、制作イベントで良く会う友達の人で半笑いになりました。
CSS Niteのみなさんとジャンケンしていただいたみなさん、ありがとうございます！！
ところで、私の目標は「はじめてのCSS書籍化！！！」なので、これでハッピーエンドではなく俺たちの冒険はこれからだ！！ってことですよ。
本を書く修行はまだまだしたいので、まるまる１冊ではなくてもお声をかけていただけたらうれしいですね。
ではでは〜！
]]>納品するデータは次の通りです。
こちらはあらかじめタイトルには【】で囲むなど、DTPで流し込むときに便利なフォーマットが準備されていました。
このフォーマットを壊さないように書きました。
文字のボリュームは所々文字数制限がありましたが、一番調整が難しそうな説明の項目が「だいたい14項目で」としか制限がなかったので、すいすい書きました。
最終的にページ数のバランスなどで加減調整するような流れですね。
納品しなくてもOK！でも、図が作れる人だったら自分で作った方が納得がいくかも。といった感じでしたので、自分で作りました。
説明用の図は"はじめてのCSS"でモリモリ作っていたので、あまり悩まずに作ることが出来ました。
出来るだけリアルなサイト風、素材集は使用禁止、とのことでした。
実は使ってるのですが、はじめに言われていたのが「写真素材禁止」とのことで、イラスト素材を使っていました。
でも本当はダメ！！他の出版社でも大体ダメだからね！！
結局なんやかんやで使えることになりましたが、今後は使いません！ごめんなさい・・・。
で、それらのデータを納品してちょっと待つとレイアウトされたPDFが届きますので、それを直したりします。
私のテクニカルな文章のベースは"はじめてのCSS"なので、所々はみ出がちな感じなのですが、はみ出ていない知的な文章に加工入ったりして「編集さんすげ〜〜」と思いました。
次は本が出た後の話し（たぶん次で最終回です）をします。
おたのしみに〜！
やっと「XHTML+CSS プロが教える"本当の使い方"」の仕事に繋がったときの話しをします。
それはとあるイベントの懇親会で、またまた"はじめてのCSS"のフライヤーを配りながら初めてお会いした方々に、螺旋デザインとしての営業的なトーク＋出版の夢の話しをしていたところ、とうとう出版社と橋渡しをしてくれる人が現れたのです！！
しつこく続けた甲斐があったZE☆
その方は東京から来られていて、普段はMdNさんのDTPの仕事や、実際に本を書いたこともある人でした。
"はじめてのCSS"のフライヤーを「MdNの編集さんに渡しておきます！」ってやさしいお言葉を言っていただいて、正直ジーンと来ました。
そんなわけで応援してくれる人は本当にありがたいと思います。
しかも、そのフライヤーを見たMdNさんが連絡をしてきてくれたのです！！
これにはビックリしました。
ビックリしすぎて、ドッキリ☆なのでは？と変な妄想をしそうになりました。
MdNさんとの橋渡しをしていただいた恩人の方にお礼メールを出したときに、担当の編集さんの話しなどをして、あの連絡が本物と確信できるような情報だったので「う〜〜〜ん、これはマジやな。」と思いました・・・。
MdNさんはちょうど「XHTML+CSS プロが教える"本当の使い方"」のライターさんを探していたところ、"はじめてのCSS"のフライヤーをもらったそうです。
いや〜〜〜、ラッキーでしたね。
次は原稿を書いていた時の話しをします。
おたのしみに〜！
"はじめてのCSS"の宣伝活動内容
]]>ライティングレベルを上げるための作業
開始時は月１更新だったのですが、途中から週１にしてヒィーヒィー言いながら書いてました。
「月曜更新！」とか自分で宣言して追い詰めると、嫌でも書くので（昔から締め切りを破るのが嫌いなんですよ）いい修行になりました。
書いた後サチコさんに見てもらって直したりとかしていました。
ページものを作るにはIllustratorより、InDesignだ！！という常識はDTPな人ではない私も知っていたので「InDesign実践DTPトレーニング
まだInDesignで本を書く仕事はしてないですが、Webの仕事で時々更新の手引き的なマニュアル（PDF納品）を作ることがありまして、いままでIllustratorのページ分割で作っていたのですがInDesignの方が圧倒的にやりやすいのでWebの人でもInDesignはオススメですよ。
マニュアル以外にも、ヒアリングシート的な内々のデータも片っ端からInDesignで作り直しました。
これは修行目的じゃなくて、このほうが扱いやすいからです。
あ、でも書籍原稿の仕事を実際にした後、感じたのですがInDesignの修行は必須じゃなかったですね。（さきほど書いたとおり、便利なスキルだとは思いますよ）
わたしのWeb業務の担当をそのまま印刷ものにスライドすると、書籍データは全部自分で作るぞ〜〜〜！という感じだったのですが、XHTML+CSS プロが教える"本当の使い方"の仕事はテキストデータと説明図を作って配置はDTPの方が作業してくれたのでした・・・！
微妙に話しがずれてきました（汗）
すみません。
私は行っていませんが、他の方からオススメされた手法も書いておきます。
やっぱり、出版社の編集の方とお知り合いになるのが手っ取り早いらしいです。
その為には東京に活動の拠点を移して制作者イベントに出まくると、編集の方も良くいらっしゃるので、名刺交換をしてその時に書籍の仕事に興味があることを伝えればOK！！って、大阪から引っ越しするのは私のポリシーから外れるのでした。
日本はなんでも東京に集中しすぎなんですよ。時代は地方分権です！！
私はこの先、どんな大物になっても大阪にいますよ。
・・・・・・決して引っ越しが面倒なわけではないです。ホントですって！！！
あとは、なんと出版社に直メールするのもいいらしいです。
これはCSS Nite in OSAKA, Vol.17で本物の現役編集者の角竹輝紀さんが言っていたので、本当です！
ただ、返事が来ないからと言って何度もアピールメールは出さなくていいそうです。
返事が来ない場合は、まぁそう言うことなので、しつこく投げすぎると返って印象が悪くなるみたいですね。
これもやってないのですが、やる前にMdNさんからお仕事をもらえたのですよ（感涙）
なんだかんだで、長くなったので書籍の原稿の仕事をもらったきっかけは次（明日ぐらいにupします）に書きます。
またまた、延びてすみません！
まずはきっかけなのですが・・・。
もともと私はWebの仕事をしていまして、ライター業は行っていませんでした。
でも、業界の次のような実情から、本を書きたいな〜〜〜。と思うようになっていったのです。
・
・
・
Webの制作会社に勤務していたの時の経験と、いろんなイベントでお会いした方々の話を聞いていると、どうもCSSへの熟練度はものすごくスキルのある人と、重度の苦手意識のある人とに極端に分かれていると感じました。
しかし、会社員時代に他の同僚たちにCSSを教えているときに思ったのですが、苦手意識のあった人でもちょっと基本を教えてある程度覚えると、ある瞬間から自動でレベルアップして逆に私に新しいテクなどを教えてくれるようになったりしたのです。
ですが、ネット上にも書籍にも、私が思うような初心者向けの情報は無く（上記の壁を超えた人向けの情報は無限かと思えるほどあります）、困っている人が居ることは知っていたので「無いなら自分で作ってしまえ！！」と思ったのが"はじめてのCSS"をはじめたきっかけです。
WebでCSSの解説をはじめると同時に、本当に初心者の人はどんな文言でググれば答えが出るのかも、分からないですし（私もときどきPHP書くときに同じ症状になって爆発しそうになります）まだまだ、コーダーになりたてでパソコン＆Web中毒にはなっていない人も、パソコンの電源がOFF状態でも勉強できるように「書籍化もしたい！」と思うようになりました。
・・・・・・。
ここまで"はじめてのCSS"をはじめたきっかけなんですが、本当に書籍の原稿の仕事をもらったきっかけは次（明日ぐらいにupします）に書きます。えへ！
おたのしみに〜！
]]>いちばん大変なのがサチコさんのイラストですがね！
メインイメージの切り替わる画像の部分のイラストを描いてもらいました。
枚数多いし、イラストにしにくいコーナーもありましたが、がんばってくれました（泣）
業務日誌系のアイコンなどは私、佐藤とも子が作りました。
デザイン全体は２人で揉みながら決めました。
コーディングもいろいろ何かやりましたが、図解しないと説明できないので省略します（笑）
螺旋デザインTOPページ
http://www.rasen-d.net/
イラストの部分に「イラスト＝螺旋デザイン・サチコ」とクレジットをいれていただいていますので、最近「螺旋デザイン・サチコ」で検索してこられる方が多く、「さすがasahi.com！」とブルブルしています。
いい仕事ができて良かったです。
制作実績
http://www.rasen-d.net/works/
サチコのイラストブログ
Design & illustration
今回のはサイトではなく、書籍なんですよ！！
制作実績
http://www.rasen-d.net/works/
XHTML+CSS プロが教える"本当の使い方"
アマゾンのページへ
PIXTA（写真素材販売サイト）に参加していますので、こちらの螺旋デザインメンバーのアカウントのほうの素材もよろしくお願いします。
また、撮影の依頼時に割引のお知らせも書いているのですが、ぶっちゃけると人物写真だとかなり割引になります。
写真素材になってもOKな方はどんどん、ご依頼くださいね！！
まずは、自分が写真素材になっても見苦しくないように、まじダイエットしてます・・・。
]]>最近RAW撮影とかも始めたのですよ。
色調整をかなり振り切っても階調がちゃんと出るので、jpegを補正するより色の情報が無くならないのが実感できます！！
RAW撮り出来るのが、2台持っている内のペンタックスの方のカメラなのですが、カメラと同梱のRAW現像ソフト（PENTAX PHOTO Laboratory）を使うとランダムノイズも、シャキッとしたままランダムノイズが消えるのですよ。
（Photoshopのフィルタでぼかして何とか誤魔化してみた状態とは比べものにはならないぐらい！）
すんごい処理重いのですがね。
撮影時と同じ処理をしていると書いてあったのですが、よく分かりません。
不思議です。
ペンタックス製以外のRAW現像ソフトは、今アップルのApertureを試してます。
ペンタックスのランダムノイズの除去と同じような機能がなくて悲しいです。
似たような機能はあるのですが、Photoshopのフィルタでぼかして何とか誤魔化してみた状態と仕上がりが似てるんですよ。
色調補正自体はペンタックスのものより、段違いに操作がしやすいのですがね。
30日間試せるので、30日過ぎたら今度はアドビのPhotoshop Lightroomを試してみます（笑）
↓実際に配布したフライヤーです。クリックすると大きな絵が見れます。
前と同じ、絵コンテ：佐藤とも子 作画：サチコ です。
ジャンプっぽい演出を取り入れて、半笑いを全力で誘うように作りました。
実は前の時に一コマだけリアル頭身にと、絵コンテで指示していたところがあったのですが、それを見たサチコさんに「新しいキャラデザせないかんの分かるやろ？ここはいつもの頭身にするから。」とキレられました。
今回は特に頭身指示してなかったのに、全部頭身がリアルタイプに伸びてたので笑けました！
内々の販促物なので、面白かったら何でもアリなんですね～。
さて突然ですが、はじめてのCSSフライヤープレゼントします。
刷り枚数単位と印刷屋さんのおまけ刷り等の関係で余ってるのです。
すごいハイクオリティなので、是非もっと色々な方々に手にとって見ていただきたいです！！（必死）
お問い合わせから以下の項目を、お知らせいただきますと先着数十名さま（適当・・・）にプレゼントいたします。
当選のお知らせは発送にて変えさせていただきます。
名前：発送に使用しますので、本名を入れてください
件名：はじめてのCSSフライヤー希望
本文：郵便番号、住所の記入をお願いします
このプレゼント応募で得た個人情報は当選の方への発送のみに使用し、発送後は破棄いたします。
応募受付が終了したときはこのエントリ内で、お知らせしますので、それまでどんどんご応募くださいね！
]]>3人呼び込んだら、いったん止めてもう一度リッカに話しかけないと駄目みたいと、後の方に気づきました。
初めからキチンとしていたらもっと大入りだったかも・・・と思いました。
こんなキャラでしたよ。
装備、あの後変えたので微妙に違うかもですが・・・。
すれちがっていただいたみなさん、ありがとうございます！
]]>
/* CSS */
body { border: 1px solid #F00; }
/* CSS */
.sample { border: 1px solid #F00; }
/* CSS */
#sample { border: 1px solid #F00; }/* CSS */
* { border: 1px solid #F00; }/* CSS */
ul li { border: 1px solid #F00; }
/* CSS */
.sample p { border: 1px solid #F00; }
/* CSS */
#sample p { border: 1px solid #F00; }
/* CSS */
.sample a:hover { background:#FFF; }
/* CSS */
div.sample { border: 1px solid red }
p.sample { border: 1px solid blue }
/* CSS */
h3.sample:first-letter { color:red; font-size:3em }
p.sample:first-letter { color:blue; font-size:3em }
/* CSS */
p { border: 1px solid #F00; }
.sample { color: #F00; }
/* CSS */
p { border: 1px solid red; }
.sample { border: 1px solid blue; }
/* 記入例 */
div {
_プロパティを記入;
}
/* 記入例 */
* html セレクタ {
プロパティを記入;
}
/* 記入例 */
*+html セレクタ {
プロパティを記入;
}headタグ内に記入。CSS以外にもJavaScript外部ファイルにも使える！！
/* 記入例 */
<!--[if IE 6]>
<link rel="stylesheet" href="読み込みたい外部CSSファイル" type="text/css" />
<![endif]-->
/* 記入例 */
<!--[if lte IE 7]>
<link rel="stylesheet" href="読み込みたい外部CSSファイル" type="text/css" />
<![endif]-->
/* 記入例 */
html:not([lang*=""]) セレクタ {
プロパティを記入;
}
/* 記入例 */
html:not(:only-child:only-child) セレクタ {
プロパティを記入;
}
直前の改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-before:auto;
}
上記のページを印刷プレビューで確認してみてください。
直後の改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-after:auto;
}
上記のページを印刷プレビューで確認してみてください。
要素内での改ページを制御するCSSプロパティ。
/* 記入例 */
div {
page-break-inside:auto;
}
上記のページを印刷プレビューで確認してみてください。
/* media="print" メディア指定をした印刷用CSSに以下の記述をする */
消したい要素 {
display: none;
}
これだけです。
ナビゲーションを削除してIE6でも表示が乱れないようにする。
配置を変更してIE6でも全ての情報が見えるようにする。
zoomプロパティを使用し、全体を縮小する。
| モニター | A4：印刷 背景あり | A4：印刷 背景なし | |
|---|---|---|---|
| IE6 |  |
 |
 |
| IE7 |  |
 |
 |
| Firefox3 win版 |
 |
 |
 |
| safari3 mac版 |
 |
 |
 |
| モニター | A4：印刷 背景あり | A4：印刷 背景なし | |
|---|---|---|---|
| IE6 | |
|
|
| IE7 | |
|
|
| Firefox3 win版 |
|
|
|
| safari3 mac版 |
|
|
|
印刷指定のCSSには分かりやすいように文字色を赤指定しています。
印刷プレビューをしてみると文字色が赤い状態を確認してみてください。
IE6では表示崩れが派手に発生していますので、文字が表示されない状態です。
表示のチェックにはIE6以外のブラウザを使用してください。
<link href="css.css" rel="stylesheet" type="text/css" media="print" />
media="print"で印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください)
上記のHTMLに添付されている印刷用CSSファイル
@media print {
* { color: red; }
}
@media printで印刷用CSSを指定したHTML
@import "print.css" print;
@importで印刷用CSSを指定してみたHTML (※印刷プレビューしてみてください)
@importでメディア指定されているCSSファイル
上記のCSSファイルにインポートされている印刷用CSSファイル| プロパティ | CSSの適用先 |
|---|---|
| all | 全て |
| screen | コンピュータのモニタ |
| プリンタ | |
| projection | プロジェクタ |
| tv | テレビ |
| aural | 音声合成機器 |
| speech | 音声合成機器 |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| handheld | 携帯端末 |
| tty | 固定幅文字の機器 |
詳しい機能の説明はオフィシャルサイトで、機能拡張のダウンロードはFirefox Add-onsからどうぞ。
機能拡張はFirefox Add-onsからダウンロード！
オフィシャルサイトはこちら。サイトは英語だけど作者の人は台湾の方みたいです。
オフィシャルサイトからダウンロード！
Pro版（有料）とBasic版（無料）がありますがBasic版で十分大丈夫ですよ。
このようなボタンがツールバーに追加されます。
オフィシャルサイトはこちら！
ここでは機能の紹介をしているわよ。ダウンロードも出来るけど、なぜかバージョンが古いのよね。
ダウンロードはFirefox Add-onsのFirebugのページからがオススメよ！