KICKS Web

In My Circle

せんがんが、よしなしごとをつづります。

デザインの学校 これからはじめるHTML&CSSの本


本を書きました！
『デザインの学校 これからはじめるHTML&CSSの本』（技術評論社）です。
この本は、まったくの入門者（パソコンの操作も初心者に近い）方向けの書籍です。見開きごとに5、6手順でテンポよく操作が解説されていて、そのとおりに進めていくと最後にはこんなページが完成します。

本を書くのはまだまだ慣れないのでいつも周囲に迷惑をかけてしまうのですが、今回もまたとんでもなく時間がかかっちゃいました…。というのも、担当編集者さんや監修のロクナナさんを巻き込んで「ああでもない、こうでもない」とディスカッションしつつ、かなり丁寧に進めたからなのですね。

いかに分かりやすく説明するか。
応用がきかないTips集ではなく、基礎をしっかり学んでもらえる内容にするにはどうすればいいか。
自分なりに知恵をしぼった一冊です。

このブログを読んでくださっている方は中級者以上が多いので参考にならないかもしれませんが、新人さんの教育に使ったり、Web制作に興味があるお友達などに薦めていただけたらうれしいです。

なお、教育関係のお仕事に就いている方、教科書採用をご検討いただく可能性があれば献本いたします。
問合せフォームからご連絡くださいませ！

目次

Webページについて知ろう

  • Webサイトの構成について知ろう
  • Webページを作成するために必要なもの
  • Webサイト制作の流れを知ろう
  • Webページを表示するソフトを知ろう

HTMLの基本を理解しよう

  • 実際に書いてみよう
  • ページタイトルを決めよう
  • お約束を入力しよう
  • HTMLファイルを保存しよう
  • テキストを追加しよう
  • Webブラウザで確認しよう

Webページを作ろう

  • 見出しを設定しよう
  • 段落を設定しよう
  • 文章を改行して読みやすくしよう
  • 箇条書きを設定しよう
  • 画像を埋め込もう

サブページを作ろう

  • ページを複製しよう
  • 表を作成しよう
  • ページ同士を連携しよう
  • 外部サイトへのリンクを設定しよう
  • メール送信用のリンクを設定しよう

CSSの基本を理解しよう

  • CSSの基本
  • セレクタを理解しよう
  • ページの背景色を設定しよう
  • テキストの大きさと色を設定しよう
  • CSSファイルを保存しよう
  • HTMLにCSSを読み込もう

CSSでレイアウトしよう

  • HTMLをグループ化しよう
  • 幅と高さを設定しよう
  • 左右に配置しよう

ページをデザインしよう

  • 背景画像を設定しよう
  • テキストや画像の周りに余白を付けよう
  • リンク画像に付いた枠線を消そう
  • 箇条書きの見た目を変更しよう
  • 箇条書きの余白をなくそう
  • 枠線を付けよう

CSSでテキストをデザインしよう

  • リンクテキストのスタイルを変更しよう
  • テキストと背景のバランスを調整しよう
  • テキストを画像の横に回り込ませよう
  • テキストを中央に寄せよう

Webページを公開しよう

  • Webサーバを準備しよう
  • FTPクライアントソフトを設定しよう
  • ファイルをアップロードしよう
  • ブラウザで確認しよう

付録

  • 本書で作成したWebページ
  • メモ帳の設定
  • テキストエディットの設定
  • ファイルの拡張子を表示する
  • よく使うタグ一覧
  • 練習問題解答

カテゴリ：In My Circle, 告知, 書いた Posted by 千貫りこ on 2012年5月4日

Web Designingに寄稿しました

『Web Desiging』2月号の特集「HTML5を始めよう−今年こそ脱4.01！ これからのHTML＋CSSの書き方、考え方−」に寄稿しました。

「HTML5」は、最初に複数のブラウザがサポートした仕様が「canvas要素」だったために動的なコンテンツ実現のための仕様として注目されましたが、実際には従来のHTMLコーディングのマークアップ記法をすべて刷新するものであり、今後のマークアップの基本となるものです。この特集では、やがて来るHTML5が当たり前の時代に備えて、HTML5の「本思想」「基本仕様」「マークアップ」などについて解説していきます。

  • INTRODUCTION（総論）＿HTML5が制作環境に与える影響
  • 01＿HTML5からのページ記述の基本記法
  • 02＿HTML5のマークアップはアウトラインの理解から
  • 03＿これだけは押さえたいHTML5の新要素、HTML4との違い
  • 04＿CSS3の7つの主要な機能を理解する
  • 05＿動的コンテンツを実現するHTML5
  • Column＿HTML5とWebアクセシビリティ

私が担当したのは01、02、03です。年末のバタバタの中でがんばって書きました。

カテゴリ：In My Circle, 告知, 書いた Posted by 千貫りこ on 2012年1月18日

『a会』スピンオフ勉強会Vol.1

昨年4月、東京近郊に住むWeb業界の人たちで集う会を発足しました。名前は「a（エー）会」。
メンバーは、私の講座に参加してくださった方、さらにそこから広がった人の輪、で構成されてます。昨年は2回開催されたのですが、これがなかなか盛況で。
年齢も立場も仕事へのかかわり方もバラバラなみなさんですが、きっとモチベーションの高い人たちが集結してるから楽しいのでしょう。

まだ2回しか開催してませんが、各回なんと20名前後の参加がありました。これだけ人数がいるとその場ではあんまりゆっくり交流できなかったはずなのですが、本編以外で個人的に会ったりしている人もいるようで。しかも、メンバー間でお仕事も発生しているようで！スバラシイことですね☆
2012年はますます盛り上がっていくといいなーと思ってます。

さて、そんなa会の最年長（うっ）メンバー5名で、1/8に勉強会を開きました。今日はそのレポートを。

テーマは「グループワークにおける問題点の洗い出しとその解決方法」

私以外のメンバーはすべて組織内で仕事をしているため、彼らにとって今もっともホットな内容を第一回目のテーマとしました。
モデレータさんからのメッセージは以下のとおり。

自分一人でサイトを作る場合と違い、複数人が関わる場合には、様々な問題点が出てきます。
皆さんが日ごろ直面する問題や抱えている問題にはどんなものがあるのか、経験談を出し合いましょう。ついでに愚痴っちゃう勢いでもいいと思います。
同じウェブ制作者でも職場や立場などが異なる人の生の声は興味深いと思われます。
出てきた問題点について、あーだこーだ話しあって考えているうちに、何か気付くことがあるかもしれません。
グループワークにおいて気をつけるべきポイントや、解決方法が見つかれば、万々歳。
今回のテーマは、「新しい技術の勉強会」というようなものではなく、日常業務に関わる身近なものなので、積極的に事例や意見を出し合えればいいなと思います。

当日までの宿題

各自、以下について考えをまとめてくることにしました。

【A】グループワークにおいて困った経験談

「○○で困った」「○○なことがあった」「○○がやりにくい」「今○○で悩んでいる」など何でも。

【B】グループワークをしやすくするための、参考事例

例えば「職場で取り組んでいること」「ウェブや本などで見かけた手法」など、参考になりそうなことをピックアップする。

当日の流れ

当日は全員が順番に宿題を発表し、ひとり終わるごとにみんなでディスカッションしました。
おもしろかったのは、メンバーが発表する【A】が大体同じような内容になること。勤め先の業種も、携わっているサイトの規模や種類も、メンバーの雇用形態もまちまちなのですが、多少の違いこそあれ同じような悩みを抱えているものなんですねー。

たとえば…

  • プロジェクトメンバー不在時のフォロー体制が中途半端
  • 制作物の品質が、担当者によってばらつく
  • ソースの記述方法などがルール化されていないため、ちょっとした修正作業などにかかる工数が大きい
  • 責任の所在があいまい
  • それぞれが自分の仕事で忙殺されているため、進捗の共有などがおろそか

【B】については、実際にためした方法や便利なツール、参考になる書籍などを紹介しあいました。最後には「なんだかんだ言って、やっぱり人間同士のコミュニケーションだよねー」という結論に落ち着いてしまいましたが、それでもコミュニケーションを助けるためのヒントはたくさんあった方がいいですもんね。
ちなみに、今回紹介された本はこれ（楽天ブックスにリンク）。

  • HTML＋CSSコーディングベストプラクティス
  • XHTML&CSS超高速コ-ディング術

16時スタートで、終わったのは4時間後の20時。想像していたよりはるかに長時間、白熱の勉強会となりました。


終了後はタイ料理屋さんに移動しておいしい料理とお酒で大盛り上がり！そしてその場で第2回のモデレータも決定。次回は春？夏？楽しみです！

カテゴリ：In My Circle, 参加した Posted by 千貫りこ on 2012年1月10日

WinとMacでHHK（US配列）を共有する

このたびWindowsマシンを購入しました。
旧マシンはいずれ破棄するので「完全移行」となるわけですが、私の環境がちょっと特殊なせいで基本的な移行作業でかなり苦労しました。次も同じ目にあわないよう、自分用メモ。

機材構成は、Mac（OS X 10.6）＋モニタ、Win（Windows7）＋モニタ、キーボードはHappy Hacking Keyboard Lite2（US配列）。キーボードとマウスはWin機に接続。
やりたいことは

  • Winを「サーバ」、Macを「クライアント」として、「Synergy」でキーボードとマウスを共有する
  • 文字種切替えを含む、いわゆるキーボードショートカット操作はMac方式に統一

の2点。

ちなみに「Synergy」とは、複数のパソコンでキーボードやマウスを共有するためのソフト。さらに、ひとつのパソコンで「コピー」したデータを、別のパソコンに「貼り付け」たり、複数のモニタ間をマウスで自由に行き来できるようにしてくれるスグレモノです。
くわしい情報はマイコミジャーナルさんのページで。

Synergyの設定

今回、Mac用のSynergyは「SynergyKM」というソフトを使いました。
インストール後、「システム環境設定」で簡単に設定できます。Macはクライアントとして機能させたいので、「General」画面で「Connect to a shared keyboard and mouse」にチェックを入れます。
続けて、「Client Configuration」画面の「Server IP or hostname」にはWin機のIPアドレスを入力。
Mac側の設定はこれで終わり。

Win用は本家Synergyを利用します。
「Screens & Link」でそれぞれのマシンの配置を設定。私の場合Macを左、Winを右に配置しているのでこんな感じになります。

続けて、Macでキーボードを利用するときのキーマップ変更の設定。
「Control」キーが「Alt」、「Alt」キーが「Control」として機能するよう設定しておきます。

HHKのスイッチを切り替える

Happy Hacking Keyboard Lite2（以下、HHK）の「Delete」キーを押したときに「バックスペース」として機能させたければ、キーボードの背面についているスイッチ「DIP SW」の3番を「ON」にします。これは箱についてる説明どおり。

また、Macと共有するときには「◇」キーを「Alt」として利用する設定にしておきましょう。「DIP SW」の3番をONにします。
ひとつ前のステップで、Macでキーボードを使用する際には「Control→Alt、Alt→Control」となるよう設定を済ませました。ということは、「◇」キーの機能は「Alt」から「Control」に変換されます。 Macでは「Control」キーが「コマンド」キーとして認識されるので、「◇」キーをたたけば「コマンド」として機能してくれるようになります。

Windowsの設定

US配列のキーボードを使うときは、まずレジストリを書き換えます。

  1. スタートメニューの［アクセサリ］-［コマンドプロンプト］を起動
  2. 「regedit」と入力してレジストリエディタを起動
  3. [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layouts\00000411  ]までたどる
  4. [Layout file] の値を [KBDJPN.DLL] から [KBDUS.DLL] に変更
  5. レジストリエディタを終了

次に「KeySwap」をインストールして、キーマップの変更をレジストリに書き込みます。HHKのスイッチを切り替えたことにより、現在「Alt」として機能している「◇」キーを「Control」として機能するよう変更します。

※レジストリ関連は、まったく理解せずに書いてます。
あちこちのサイトで解説してくれている情報を寄せ集めているだけなので、間違いがあったらご指摘をお願いします！

CmdSpaceを導入

「CmdSpace」は、Winマシンでも「Command」+「スペース」で文字種の変更ができるようにしてくれる、超スグレモノソフトです。XP時代から愛用してますが、Window7でもちゃんと使えるので本当にありがたい。
インストールして設定。

以上の設定を行えば、2台のマシンで1組のキーボード＋マウスを共有したり、2台のモニターを自由に行き来できるようになります。
異なるOSなのに、キー操作もほとんど同じ。すごい！しかも全部無料のソフトです。なんとお礼を申してよいやら。

あ、SynergyはDonateウェアでした。安いけど$10寄付しとこ！

カテゴリ：In My Circle, メモった Posted by 千貫りこ on 2011年10月4日

次の記事