月別アーカイブ: 2017年3月

CSS floatを使ったレイアウトのポイント

floatを使ったレイアウトで、思ったように表示されない原因として、「要素がバラバラで、親要素で囲まれていない」ということがあります。どういうことか、例を挙げて解説します。

バラバラにfloatをかけるとレイアウトがうまくいかないことがある

次のようなレイアウトを作りたいとき、どの要素にどうやってfloatを指定したらいいでしょうか。

作りたいレイアウト

一見、ボックスAに float: left; 、ボックスBとボックスCに float: right; を指定すればよさそうです。しかし、実際にやってみると下のようになってしまいます。

ボックスそれぞれにfloatを指定

では、どうすればいいのか、下記で解説します。

「ボックスをまとめて動かす」ことを意識するとうまくいく

上記ボックスBとボックスCに対して、それぞれfloatをかけると、回り込める隙間があれば横に回り込んでしまうので、ボックスBの左にボックスCが回り込んでしまいました。このボックスBとボックスCは横並びにする必要はなく、縦に並んでほしいので、個別にfloatをかける必要はありません。

目的のレイアウトにするには、ボックスBとボックスCを1つの親要素で括って、まとめて動かす必要があります。ボックスBとボックスCを1つのかたまりとして動かすイメージです。

親のボックスにまとめてfloatを指定

この、「ボックスをまとめて動かす」ことを意識すると、floatの指定で迷うことが少なくなると思います。ぜひ実践してみてください。

CSS background-sizeをbackgroundでまとめて書く際の注意点

以前の記事でbackground-sizeについて紹介しましたが、このプロパティをショートハンドプロパティのbackgroundでまとめて書く際に注意が必要なので、記事にしておきます。

backgroundプロパティでまとめて書く場合の注意点

background-sizeをbackgroundでまとめて書く際には、以下のような決まりごとがあるので注意してください。

  • background-positionを先に書き、background-sizeを後に書く
  • background-positionとの区切りを「/」にする
  • 数値や%指定の時は横幅と高さを両方書き、省略しない

記述例

 background: url(image/bg.jpg) left center / 100px 200px;
/* 「 横位置 縦位置 / 横幅 高さ 」という形で記述する */

この例では、背景画像をbg.jpgに、background-positionを「左右:左寄せ/上下:中央」に、background-sizeを「横:100px/縦:200px」に指定しています。古いブラウザは、この書き方に対応していない場合もあるので注意してください。

background-sizeだけ別に書く場合のプロパティ記述順

記事タイトルから内容がそれてしまいますが、background-sizeだけ別に書く場合も記述順に注意が必要です。必ずbackgroundを先(上)に、background-sizeを後(下)に書いてください

記述例

 background: url(image/bg.jpg) left center; /* ショートハンド(まとめて書く)プロパティは上 */
 background-size: 100px 200px; /* 個別の指定は下 */

このように、ショートハンドのbackgroundを上に、background-sizeを下に書かないと、background-sizeが反映されません。background-sizeを上に書いてしまうと、下に書いたショートハンドによってbackground-sizeの値がautoに上書きされてしまいます。ショートハンドで省略した値は、指定されないのではなく、デフォルト値で指定されることを覚えておいてください。

参考サイト

HTML ページタイトルのつけ方3つのポイント

title要素に記述するページタイトル、適当につけてしまっていませんか?タイトルのつけ方はとても重要です。タイトルのつけ方次第で、ユーザーにとってわかりやすいページにしたり、検索結果で上位に表示されやすくなります。わかりやすく、検索されやすいタイトルをつけてください。

タイトルのつけ方3つのポイント

  1. ページの内容に沿ったタイトルをつける
  2. 検索されやすいキーワードを入れる
  3. それぞれのページに違うタイトルをつける

1.ページの内容に沿ったタイトルをつける

ページタイトルは、そのページの内容を反映したものをつけてください。トップページの場合はサイト名をタイトルにするのが一般的です。

2.検索されやすいキーワードを入れる

そのサイトを検索で探すとき、ユーザーが使いそうなキーワードを入れておくと、SEO的に効果があります。たとえば、目黒にあるカフェだったら「目黒」「カフェ」「コーヒー」などのキーワードを入れるといった感じです。飲食店などの場合は、最寄り駅などの地名を入れると効果的と言われています(検索されやすいのと、地名で検索結果が絞られるため)。

3.それぞれのページに違うタイトルをつける

同じサイト内でも、まったく同じページタイトルをつけないようにしてください。それぞれのページの内容に合った固有のタイトルをつけることで、検索エンジンがページ内容を認識してくれます。また、どのページを開いてもサイト名がわかるように、ページ固有のタイトルの後にサイト名を表示するのがおすすめです(例「ページの固有名|サイト名」)

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)
  • 先頭に記号を使わない

参考サイト