カテゴリー:初心者向け

リスト表示へ

HTML5を基礎から学べる『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』を執筆しました

2012年10月22日 12:35

『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させて頂きました

前回の『すべての人に知っておいてほしい スタイルシートデザインの基本原則』に引き続き、『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させていただきました。(前回の記事概要はこちら

今回自分は、Chapter7の「Canvasを使って作るインタラクションのあるグラフ」を担当させて頂いただきました。

概要としては、Canvas内に描かれたものに mouseovermouseoutclick などのイベントを設定してインタラクションを持たせるグラフを作る、というものです。
これを通してCanvas内に描かれたものにイベントを付与して、ユーザと対話可能なCanvasの作り方を学んでもらえればと思って執筆しました。

今回はここの箇所だけで多くは書いていませんが、その分、サンプルに力を入れいてるのでぜひサンプルをダウンロードして色々と触ってみてください。

目次

  • ■Chapter 1 マークアップ言語としてのHTML5
  • ■Chapter 2 CSS3時代のWebデザイン
  • ■Chapter 3 CSSアニメーションを極める
  • ■Chapter 4 HTML5&CSS3のテクニック
  • ■Chapter 5 Webアプリの機能を取り入れる
  • ■Chapter 6 Flashライクなデザイン
  • ■Chapter 7 Webデザインの実践

サンプル画像

初心者のためのコピペできるCSSまとめ

2009年6月12日 10:44

とりあえずよく分からないけど、コンテンツを真ん中にしたい! とか、メニューリストを横並びにしたい! という要望を、コピペのみで使えるように HTML と CSS をまとめてみました。n

なので、細かい説明などは今回はしていません。使い方とか質問がありましたら 問い合わせフォーム からご連絡ください。(これを追加して! という要望でも構いません)n

サンプルソース上部にある "view plain" をクリックするとコピペしやすい形でソースが表示されます。書かれている width や height などはサンプルなので適宜お好みのサイズに変更して使用してください。n

/* ※ */の部分は色や幅、高さなので使いたいサイズなどに変更してください。n

また、掲載されている HTML や CSS の ID や class 名は導入したいサイトで使われているものに変更するか、新しく制作する場合は下記のブログの ID 名 や class 名の一覧を参考にしてみてください。nもう、class名やid名で悩まないんだからっ!! | CSS-HappyLife

標準準拠モード・後方互換モードを判定するブックマークレットを作ってみた。

2009年3月26日 15:09

ちょっと色々あって、後方互換モードのせいでハマって 1 時間あまり無駄にしたので、それを無駄にしないためにも記事を書いてみたり。

内容はタイトル通りで、モードで苦戦したので、修正しようとしているサイトがそもそもなんのモードで動いているのかを判定するブックマークレットを作ってみた。下のリンクをブックマーク(お気に入り)に入れて、色んなところで使ってみてください。

ちなみに補足ですが、document.compatModeで取得できる値は、標準準拠モードがCSS1Compat、後方互換モードがBackCompatです。

モード判定のブックマークレット

IE6で背景が表示されない際にチェックすること

2009年2月 4日 23:44

さて、今回はやや趣向を変えて IE6 に絞って話をしたいと思います。
先日、久々に IE6 で自分のブログを見たらなんだか微妙に変な感じに。n

よく見てみたら、各タイトル部分の背景が所々表示されていませんでした。
この「背景が表示されない」というバグ、IE6 では時折見かけます。
以前書いた peek-a-booバグ というのもそのひとつ。n

今まで自分が経験した中で、この背景が表示されない現象を回避したものをいくつか書いてみようと思います。n

clearfix を使う

これは IE6 だけに限った話ではありませんが、float を使用してレイアウトをしていると遭遇する問題です。
子要素がすべて float していると親要素は正常に高さを判別できません。そのため、まるで背景が消失したかのように見えてしまいます。
これの解決には clearfix というハックを用いて対処します。n

なぜ clearfix を使うと背景が表示されるのかについては、初心者が陥りそうなCSSの7の間違い で詳しく説明しています。n

背景が表示されない要素に「zoom: 1;」を指定

zoom は、IE の独自プロパティであり、さらに IE に実装されている hasLayout の値を true にしてくれるプロパティです。
この hasLayout 、該当要素がレイアウト(ボックスモデル?)を持っているかどうか、を判定するもので、これが true になると高さや幅、marginなどの値が適用されるようになります。n

なので、CSSの解釈でFirefoxなどのモダンブラウザと比べてなんか違うな、と思ったらとりあえず指定してみると色々解決するかもしれません。n

背景が表示されない要素に「position: relative;」を指定

IE6の場合、ネガティブマージン(マイナス値の margin)を使うと時々変な挙動をすることがあります。
そのひとつとして背景が表示されない、というものがあります。
これ、まさに自分のブログで起きた現象でした;n

しかも、すべて同じ class の要素なのにもかかわらず、背景が表示されるものと表示されないものがあるのが厄介でした。
よくよく見てみたら、margin-left にマイナスの値を設定していたので、もしや、と思って position: relative を指定してみたところ、正常に背景が表示されました。n

また、これとは別にネガティブマージンを指定した要素内に画像がある場合、本来表示されるべき場所からマイナス方向に移動した分が切れる(本来表示されるべき場所でマスクされた感じ)という現象があります。n

これも同様にして、画像の親要素に対して position: relative を指定することで正常に表示されるようになります。n

CSSだけで作るマウスオーバーでの画像の拡大

2009年1月13日 21:13

今回は「CSS だけで作るシリーズ」です。

タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。

ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。
ということで、デモは以下の通り。

CSSだけで作るマウスオーバーで画像の拡大デモ

余白を設定したdiv内のタイトル要素だけ余白を無視させる

2008年6月19日 18:16

カテゴリごととか、コンテンツごととか、div でひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。

その中で、ひとつの div 内に h1 要素や p 要素、ul 要素などが混在していると思います。
その div に全体の余白を設定するケースもよくあると思います。

しかし、h1 要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。(俺だけかな・・)
まぁサンプルを見るのが一番早いので↓こんな感じ。

サンプルタイトル

サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。

ぱっと見はわかりづらいかもしれませんが、全体を囲う div に padding を設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、その div からタイトル要素だけを外に出して...みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。

で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜか IE では見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスの div の幅が伸びる。
さらに IE の「幅が勝手に伸びる」というバグも手伝って、float しているレイアウトの場合なんかはカラム落ちまでする始末。

なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見!(当たり前かもしれませんが、気づかなかった・・)
なのでメモ的にエントリーを書いてみました。ソースは以下から。

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技

2008年3月11日 16:43

float させてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。n

その際、当然 margin を使ってそれぞれのリストとの余白を空けますが、
すべてが同じ CSS が適用されるため、margin を指定したくない(大概は最後の)要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3 であれば 3 回に 1 回の部分は margin を消す、
なんていうフレキシブルな対応ができますが、CSS3 はまだまだ実装されてきているとは言えません。n

そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。n

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技デモ

CSSの1行でできるIE6対策(ハック)

2008年3月 5日 17:33

Internet Quality さんの所の紹介エントリーにあったサイトで、IE6 だけにうまく CSS を適用しているサイトがあったので、自分のメモとしてもエントリー。n

サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。

なので、IE6 だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。n

合わせて読むと役に立つかもなエントリー

初心者が陥りそうなCSSの7の間違い

2008年3月 1日 17:40

ということで、かなり独断と偏見によってこのエントリーを書いてますがw
Yahoo! 知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い(勘違い)についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを 7 個ほど書き出してみました。

書いていくうちに、すごい長くなってしまいました(;´д`)

CSS講座 - 目で見るボックスレイアウト

2008年1月20日 21:34

CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな? とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓

CSSのボックスレイアウトを家を例えに説明した図

すべてを家に例えるわけです。
まず、widthは "家の幅"、paddingは "庭の範囲"、borderは "家の壁の厚さ"、marginは "隣の家との距離" と。
そう説明した上で、"庭の範囲"(つまりはpadding)は自分の好みが反映される(つまり背景)。そして自分の敷地は壁までの範囲(つまりwidth+padding+border)。そして隣の家との距離はmargin

こう例えると、なんとなくpaddingmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth+padding+borderとなる理由も、上記の説明でなんとなくイメージできるかなと。

そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ!とか、なんでもいいのでコメントもらえたら幸いです。

ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д`)

1  2