CSS ○○-child擬似クラスに似ているけどちょっと違う○○-of-type擬似クラス

以前の記事で、nth-of-type擬似クラスについて紹介したことがあります。この擬似クラスは、nth-childに似ていますが、「N番目の子要素のE要素」ではなく、「N番目に出てくるE要素」という意味でした。詳しくは記事「CSS nth-childに似ているけどちょっと違うnth-of-type擬似クラス」をご覧ください。

今回の記事では、nth-of-type以外の「-of-type」が付く擬似クラスも紹介します。それぞれ「-child」が付く擬似クラスに意味が似ているのでご注意ください。

「-of-type」と「-child」の違い

「-child」
first-child、last-child、nth-childなどがあります。「ある要素の中で何番目の子要素か」をカウントします。
たとえば「p:first-child」と書いたら、「最初の子要素のp要素」となり、ある親要素の中で最初にあるのがp要素ならスタイルが適用されます。最初の子要素がp要素でない場合はスタイルが適用されません
「-of-type」
first-of-typelast-of-typenth-of-typeなどがあります。「ある要素の中で特定の種類の要素が何番目に出てきたか」をカウントします。
たとえば「p:first-of-type」と書いたら、「ある要素の中で最初に出てきたp要素」となり、ある要素の中で最初に出てきたp要素なら、最初の子要素でなくてもスタイルが適用されます

「-of-type」の付く擬似クラス

first-of-type

「E:first-of-type」の形で「親要素内で最初に出てくるE要素」という意味

last-of-type

「E:last-of-type」の形で「親要素内で最後に出てくるE要素」という意味

nth-of-type

「E:nth-of-type(N)」の形で「親要素内でN番目に出てくるE要素」という意味

記述例

次のようなHTMLのときの例を挙げていきます。

HTML

<div>
  <h2>見出し1</h2>
  <p>本文1</p>
  <h2>見出し2</h2>
  <p>本文2</p>
  <h2>見出し3</h2>
  <p>本文3</p>
</div>

CSS

p:first-of-type { color: blue; } /* 本文1が文字色青になります */
h2:last-of-type { color: red; }  /* 見出し3が文字色赤になります */
h2:nth-of-type(2) { color: green; }  /* 見出し2が文字色緑になります */

DEMO

「-of-type」の付く擬似クラスのサンプル

HTML5のマークアップは要素の意味を基準に

HTML5以降では、ひとつひとつの要素が、文書構造や文章の意味をコンピューターに知らせる役割を持っています。前回の記事で「セマンティックWeb」の考え方について紹介しましたが、HTML5では、意味のあるマークアップが重要視されているので、要素の意味を基準にマークアップしてください。

タグでマークアップをすると、ブラウザのデフォルトのCSSで見た目が変化するものがありますが、これはマークアップの基準にするべきではありません。「太字にしたいからstrong要素を使う」のではなく、「重要な意味だからstrong要素を使う」ようにしてください。

タグの見た目は、CSSで後からいくらでも変えられます。CSSでスタイル指定をする際には、ブラウザのデフォルトのスタイルを知っておくべきです。しかし、HTMLタグを覚えるときは、意味を優先的に覚えて、マークアップも意味を基準にしてください

HTML コンピューターに文書構造や意味を理解させる「セマンティックWeb」の考え方について

HTML5では、文書構造を明確にし、ブラウザや検索エンジンのクローラーが文書の意味を理解できるようにマークアップすることが重要視されています。この、「コンピューターが意味を理解できるようにWebサイトを構築する」考え方を「セマンティックWeb」といいます。

HTML5で文書に意味付けをする作業は、見た目などに分かりやすい変化がないことも多いです。そのため、コンピューターに意味を知らせることは、一見ユーザーには何の利点もないように思えてしまうかもしれません

しかし、将来的には、コンピューターが文書の意味をしっかり理解することで、ユーザーにより細やかなサービスを提供することができるようになるはずです。たとえば、ユーザーが本当に知りたい情報だけ正確にピックアップしてくれるアプリや、今より精度の高い検索エンジンなどができるかもしれません。

今はコンピューターが意味を理解できるWebサイトがまだ少なく、それを利用したサービスもあまりないのでピンと来ないかもしれませんが、セマンティックなWebサイトが増えてくれば文書の構造や意味を利用したサービスが出てくると思います。「コンピューターに意味を理解させる」ことも「ユーザーにより良いサービスを提供するため」なのです。

セマンティックWebの考え方が一般的にならなければ、それを利用したサービスも普及しません。HTMLを書くときは、ぜひ面倒くさがらずに、コンピューターが文書構造と意味を理解できるようなマークアップを心掛けてください。

参考サイト

ハガキの郵便番号枠を自分で描く際の注意点

今、郵便番号枠をスタンプや手書きで作成したハガキで、ルールに沿わないものがあり、問題となっているそうです。ハガキの郵便番号枠は、ルールに従って作成されていないと、機械で郵便番号を読み取ることができず、郵便局員の方の手間が増えてしまいます。

DMなどを作成する際に、ハガキ表面のデザインも行う場合があると思いますが、その際は郵便番号枠をルールに則って描くように注意してください。

郵便番号枠の仕様

郵便番号枠の仕様は、下記郵便局のページで確認することができます。枠の大きさや余白など細かく定められています。

枠の大きさ

  • 1文字の枠のサイズ:タテ 8.0mm / ヨコ 5.7mm
  • 7ケタすべて合わせたサイズ:タテ 8.0mm / ヨコ 47.7mm

ハイフンの位置

  • 3ケタ目と4ケタ目の間
  • 枠の上から4.0mmの位置

余白のサイズ

枠同士の余白

  • 1ケタ目から3ケタ目まで:1.3mm
  • 3ケタ目と4ケタ目の間:1.9mm
  • 4ケタから7ケタ目まで:1.1mm

ハガキの端からの余白

  • ハガキの上辺から:12.0mm±1.5mmまで)
  • ハガキの右辺から:8.0mm±1.5mmまで)

線の太さと色

  • 上3ケタの枠およびハイフンの線幅:0.4 ~ 0.6mm1.134 ~ 1.7pt
  • 下4ケタの枠の線幅:0.2 ~ 0.4mm0.567 ~ 1.134pt
  • 線の色:M[ マゼンタ ] と Y[ イエロー ] のみでC[ シアン ] と K[ 黒 ] は使わない

このように、かなり細かく決まっていますので、できる限り仕様に沿って作成してみてください。郵便番号枠だけ元から印刷されている用紙を使うのもいいかもしれません。

無料のテクスチャ写真素材サイト4選

今回は、印刷物やWEBサイトに使う画像の作成に役立つテクスチャ素材を無料で配布している素材サイトを5つ紹介します。今回紹介するサイトは、「素材サイト」ページにもリンクを張っています。

パブリックドメインの素材を配布しているサイトを選んでいますが、素材のライセンスについては各サイトで必ず確認してから使ってください

今回紹介しているのはパターン素材ではなく、テクスチャ写真素材です。背景として用いたり、写真やオブジェクトに質感を追加したいときに便利です。シームレスパターン素材を探している場合は、「素材サイト」ページでいくつか素材サイトを紹介しています。

テクスチャ素材サイト

Lost and Taken – Free Texture Stock Photos

Lost  and Taken

グランジ、紙、水彩など、様々なテクスチャ写真素材が配布されています。カテゴリごとに分かれていて見やすいです。

Free Stock Textures

Free  Stock Textures

木や壁、植物、水滴からウォールペインティングのような変わり種まで、沢山のテクスチャ写真素材があります。キーワード検索が主になっていますが、トップページ下部にカテゴリもあります。

フリー画像素材 – BEIZ Graphics(ベイツ・グラフィックス)

BEIZ Graphics

日本の写真素材サイトです。テクスチャではない写真素材も沢山あるのですが、和紙、水彩、木目、岩などの高品質なテクスチャが配布されているので、テクスチャ素材サイトとして紹介させていただきました。

Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト

Paper-co

紙のテクスチャ専門の素材サイト。ノートや方眼用紙、段ボール、木、ラベルやタグなどの素材があります。

ブラウザ対応確認に便利なサイト「Can I use…」の使い方

今回は、HTMLやCSSなどの各種機能にブラウザが対応しているかどうか確認する際に便利な「Can I use…」というサイトを紹介します。いろいろなところでこのサイトのスクリーンショットが使われていて、とても有名なサイトです。ご存知の方も多いと思いますが、使ったことがない方向けに記事にしておきます。

Can I use…」の使い方

使い方はとてもシンプルで、一番上のテキスト入力フォームに調べたいものを入力するだけです。たとえば「srcset」と入力すると、以下のような画面になります。※srcsetはHTML5.1の属性です

Can I use の画面

ブラウザの名前と、数字の書かれた赤や緑の四角が並んでいます。四角の中の数字はブラウザのバージョンで、四角の色で対応しているかどうかを確認することができます。緑が対応しているという意味で、赤が非対応という意味です。黄緑色の場合は、部分的に対応している場合や、条件付きで対応していることを表します。

Usage relativeタブ

「Usage relative」というタブをクリックすると、各ブラウザのバージョンごとのシェアを確認できます。

Data relativeタブ

また、「Data relative」というタブをクリックすると、ブラウザのバージョンごとの対応状況を、時系列が分かりやすい表示で確認できます。

各種機能について、ブラウザがどの程度対応しているか確認したいときに便利なので、活用してみてください。

WEB関連のファイルやフォルダの名前の付け方

午後コースでHTML/CSSの訓練が始まりました。WEB制作をする際、紙ものの制作とは違って注意しなければいけないのがファイル名やフォルダ名です。ファイル名やフォルダ名を全角で付けてしまうと、サーバーにアップした際に文字化けしてしまい、簡単に削除できないなど、色々なトラブルの原因になりますので、十分注意してください。ファイル名やフォルダ名の付け方のルールを以下にまとめます。

WEB関連のファイルやフォルダの名前の付け方

ファイル名の付け方

  • 2バイト文字(全角文字)を使わず、半角英数のみで付ける(半角カタカナもNG)
  • 「_(アンダースコア)」と「-(ハイフン)」以外の記号を使わない(ドットやスペースなどはNG)
  • 先頭に記号を使わない

参考サイト

jQuery 演算子の種類4 ~論理演算子~

3回にわたってJavaScriptの演算子(算術演算子、代入演算子、比較演算子)を紹介してきました。4回目の今回は、論理演算子を紹介します。今までの記事は下記リンクからご覧ください。

論理演算子

論理演算子は、名前から用途が想像しづらいですが、複数の条件を組み合わせたり、真偽値(trueかfalseか)を反転したりするための演算子です。「~かつ~」「~または~」といった意味を持つ演算子があります。比較演算子と同じく、if文の条件指定によく使われます。

論理演算子の種類
演算子 意味 備考
&& AND(かつ) A && B と書いたとき
AとBの両方とも当てはまれば true
AとBのどちらか片方でも当てはまらなければ false
|| OR(または) A || B と書いたとき
AとBのどちらか片方でも当てはまれば true
AとBの両方とも当てはまらなければ false
! NOT(真偽値の反転) !条件 の形で書く
trueがfalseになり、falseがtrueになる

論理演算子の使用例

以下は論理演算子で条件指定したif文の例です。

if(hoge < 5 || hoge > 10){ //hogeが4以下または11以上のとき
  $("p").css("color","red");
} else if(hoge > 5 && hoge < 10){ //hogeが6以上9以下のとき
  $("p").css("color","green");
} else { //それ以外(hogeが5か10)のとき
  $("p").css("color","blue");
}

hogeが4以下または11以上のときにp要素の文字色を赤に、6以上9以下のときに緑に、それ以外のときに青にする命令です。

参考サイト

jQuery 演算子の種類3 ~比較演算子~

前回前々回の記事に引き続き、演算子についてです。今回は比較演算子を紹介します。

比較演算子

比較演算子は、「等しい」とか「~より大きい」など二つの値を比較するための演算子です。比較演算子は、if文の条件指定などによく使われます。前回の記事で「=」だけでは「等しい」という意味にならないと書きましたが、今回紹介する「==」や「===」が「等しい」という意味の演算子です。

比較演算子の種類
演算子 意味 備考
== 等しい 型の違いは比較しません
=== 厳密に等しい 型の違いも厳密に比較します
!= 等しくない 型の違いは比較しません
!== 厳密に等しくない 型の違いも厳密に比較します
> より大きい 3>3 のときはfalse、4>3 ならtrue
< より小さい(未満) 3<3 のときはfalse、2<3 ならtrue
>= より大きいか等しい(以上) 3>=3 も 4>=3 もtrue、2>=3はfalse
<= より小さいか等しい(以下) 3<=3 も 2<=3 もtrue、4<=3はfalse

比較演算子の使用例

以下は比較演算子で条件指定したif文の例です。

if(hoge >= 5){
  $("p").css("color","red");
}

もしも変数 hoge が5以上だったらp要素の文字色を赤にするという命令です。

参考サイト

jQuery 演算子の種類2 ~代入演算子~

前回の記事に引き続き、jQuery(JavaScript)の演算子についてです。今回は代入演算子を紹介します。

代入演算子

代入演算子は、右辺のものを左辺の変数に代入するという意味です。「=」を使いますが、「=」単体で等しいという意味にはなりません

代入演算子の種類
演算子 意味
= 値を変数に代入する
+= 加算(足し算)して代入する
-= 減算(引き算)して代入する
*= 乗算(掛け算)して代入する
/= 除算(割り算)して代入する
%= 剰余(割り算の余り)を代入する

参考サイト