月別アーカイブ: 2016年7月

CSS positionプロパティの性質と使い方1

CSS positionプロパティの性質と使い方1

今回の記事から数回に分けて、positionプロパティの性質と使い方について解説します。今回の記事は、positionに指定できる値についてです。

要素の配置方法を指定するpositionプロパティ

positionは、floatでは出来ない垂直方向の移動をする際や、要素を重ねるとき、要素をスクロールしても同じ位置に表示したいときなどに使われます。以下に、positionプロパティに指定できる値をまとめました。

なお、positionプロパティは要素の配置方法を指定するもので、実際にどこに動かすかは top , bottom , left , right などのプロパティで指定します。

positionプロパティの値
説明
 static 配置方法を指定しない。デフォルト値
 relative 相対位置の配置。デフォルトの表示位置が基準になる。
 absolute 絶対位置の配置。ブラウザの画面が基準になる。親要素にpositionのstatic以外が指定されている場合は、親要素が基準になります。
 fixed スクロールしても同じ位置に表示される配置方法。位置指定はabsoluteと同じ。

HTML5のコンテンツ・モデルについて

コンテンツ・モデルについて

HTML5では、要素の入れ子ルールのことをコンテンツ・モデルと呼びます。その要素にどんな要素を入れることがきるのかは、正しいマークアップをするために非常に重要です。入れ子ルールが分からない要素があったら、リファレンスサイトなどで調べるようにしてください。

コンテンツ・モデルは、HTNL5の要素の分類(カテゴリ)で表されるので、そのカテゴリがどんな要素を指すのかを、表にしておきます。全てのカテゴリを覚える必要はありませんが、「フロー・コンテンツ」と「フレージング・コンテンツ」はコンテンツ・モデルで非常によく出てくるカテゴリなので、この二つの意味は覚えることをお勧めします

HTML5の7つのカテゴリ
カテゴリ 意味 該当する要素の例
フロー・コンテンツ ほとんどすべての要素がこのカテゴリに属します。HTML4の分類で、ブロック要素とインライン要素だったものは、全てこのカテゴリに属すると考えてほぼ差し支えありません。 a , div , h1 , img , p , section , span , strong , ul などなど
フレージング・コンテンツ 段落の一部に意味を持たせる際に使う要素です。HTML4の分類で、インライン要素だったものはこのカテゴリに属すると考えてほぼ差し支えありません。 a , br , em , img , small , span ,  strong など
セクショニング・コンテンツ セクション(文書の一区切り)をマークアップするための要素のカテゴリ。 article , aside , nav , section
ヘディング・コンテンツ 見出しを表す要素のカテゴリ。 h1 , h2 , h3 , h4 , h5 , h6
エンベディット・コンテンツ 画像や動画、音声などを表示する要素のカテゴリ。 audio , img , video など
インタラクティブ・コンテンツ ブラウザ上で操作できる要素のカテゴリ audio(controls属性ありの場合) , button , input(tipe属性の値がhiddenでない場合) , textarea , video(controls属性ありの場合) など
メタデータ・コンテンツ ページに関する情報(メタデータ)を記述するための要素や、CSS、JavaScriptを読み込むための要素のカテゴリ link , meta , script , style , title など

CSS 要素を上下中央に配置する方法 ~ブロック要素の場合~

前回の記事でインライン要素の上下縦横揃えの方法を紹介しました。今回はブロック要素の上下縦横揃えの方法です。中央配置したい要素の高さが分かっている場合と分からない場合とで方法が変わります。

ブロック要素を上下中央に配置する方法

要素の高さが決まっている場合

中央配置したい要素にheightの指定がある場合は、positionと縦方向のmarginにautoを指定して上下中央に揃えることができます。このとき、親要素の高さは決まっていなくても大丈夫です。具体的指定方法は、配置位置をtopもbottomも同じ値に指定した上で、上下のmarginをautoにします。topもbottomが同じ値になっていると、縦方向のmarginがautoで上下均等に割り振られるようになり、中央に表示されます。

例:子要素のheightを指定したうえで、親要素のpositionをrelative、子要素のpositionをabsolute、topとbottomを0(0でなくても同じ値ならOK)、上下のmarginをautoに指定すると縦方向中央に揃う

この方法は横方向の中央揃えも可能なので、この記事の最後にあるデモファイルでは、top、bottom、left、right全て0にして上下左右中央に配置しています。

要素の高さが決まっていない場合

中央配置したい要素の高さが分からない場合は、positionとtransformを組み合わせて中央揃えにすることが出来ます。position:relative; で下に50%移動して、transformで-50%上に移動するという方法です。

positionで下に50%移動すると親要素の高さ50%の位置に子要素の上端がきます。transformで-50%上に移動すると、子要素の高さの半分上に移動するので縦方向中央配置になるということです。左右も同じように指定すれば上下左右中央配置もできます。

DEMO

実際に指定したデモファイルです。

DEMO

参考サイト:【CSS】要素を上下左右に中央寄せする色々な方法 – アイデアハッカー

CSS 要素を上下中央に配置する方法 ~インライン要素の場合~

今回と次回の記事では、要素を上下中央に配置する方法を紹介します。横方向の中央揃えは、前回の記事でご紹介しているのでご覧ください。今回の記事は、インライン要素の上下中央揃えの方法をです。中央配置したいものが1行の場合と、複数行の場合とで方法が変わるので、まずは1行の場合を紹介します。

インライン要素を上下中央に配置する方法

1行のみのテキストで親要素の高さが決まっている場合

親要素の高さが決まっている場合は、line-heightに親要素の高さと同じ値を指定することで中央に配置することができます。

例:親要素のheightが200pxのとき、子要素のline-heightを200pxに指定すると、中身のインライン要素(やテキスト)が中央揃えになる

複数行のテキストや、親要素の高さが決まっていない場合

中央配置したい要素の親要素を display: table-cell; でテーブルセルとして表示し、その親要素に vertical-align: middle; を指定すると、子要素が上下中央に揃います。

例:親要素に display: table-cell; と vertical-align: middle; を指定すると、中身のインライン要素が中央揃えになる

DEMO

実際に指定したデモファイルです。

DEMO

参考サイト:【CSS】要素を上下左右に中央寄せする色々な方法 – アイデアハッカー

CSS 要素を左右中央に配置する方法

今回は、CSSのレイアウトで非常によく使う左右中央揃えの方法についてです。中央揃えしたい要素がインラインかブロックかで方法が変わってくるので気を付けてください。

インライン要素を左右中央に揃える

インライン要素を左右中央に揃えるには、中央揃えにしたいインライン要素の親のブロック要素に text-align: center; を指定します。text-alignは、ブロック要素の中に入っているインライン要素の行揃えを指定するプロパティなので、親要素の方に指定します。インライン要素に指定しても、要素の横幅=中身の横幅なので動けるスペースがなく、反映されません。

記述例

クラス名sample01のp要素内のテキストを中央揃えにしたいときの記述例です。

.sample01{ text-align: center; }

ブロック要素を左右中央に揃える

ブロック要素を左右中央に揃えるには、左右の margin を auto に指定します。 このとき必ずwidthも一緒に指定します。左右の margin を auto に指定した場合、余白を左右均等に分けてくれるのですが、widthの指定が無いとブロック要素の横幅は親要素いっぱいに広がってしまい、余白ができないため中央寄せになりません

記述例

クラス名sample02のp要素を中央揃えにしたいときの記述例です。

.sample02{
  width: 100px; /* widthの指定は必須。単位は%などでもOK */
  margin: 0 auto; /* 上下のmarginは0でなくてもOK */
}

DEMO

記述例のデモファイルです。

DEMO

参考サイト:【CSS】要素を上下左右に中央寄せする色々な方法 – アイデアハッカー

CSS marginの相殺について

marginとpadding

CSSで指定できる余白には、ボックスの内側の余白paddingと、ボックスの外側の余白marginがあります。paddingは使い方によってボックス同士の間の余白に見せることもできるので、paddingだけでコーディングすることも不可能ではありません。ただ、marginも使った方がHTMLの構造がシンプルになるので、適材適所で両方を使っていくことをお勧めします。

今回の記事では、marginを使う際に理解しておかないといけない、marginの相殺について解説します。

marginの相殺とは

margin相殺図解

marginの相殺とは、上下に並んだボックスのmarginが接するとき、それぞれのボックスのmarginが重なり、大きいほうの値しか反映されないことを言います。たとえば20pxと30pxの余白だったら、50pxにはならずに20px重なって表示され、全体が30pxの余白になります。なお、相殺が起こるのはmarginが縦に接する場合のみで、横方向の接触では相殺を起こしません

margin相殺が起こる条件

marginの相殺はいつでも起こるわけではなく、いくつか条件があるので下記にまとめます。

縦方向に接したボックス(兄弟関係のボックス)でmargin相殺がおこる条件

下の2つの条件をどちらも満たしている場合縦方向に接したボックスで相殺が起こります。

  • 上のボックスのmargin-bottomと、下のボックスのmargin-top両方が指定されている
  • 上のボックス、下のボックス両方とも正の値のmargin、もしくは両方とも負の値のmargin(ネガティブマージン)である

相殺が起こった場合は、ふたつのmarginが重なって表示され、値の大きい方だけが反映されます。ふたつのmarginの値が同じだった場合はmarginひとつ分の余白が空きます。なお、正の値のmarginと負の値のmarginでは相殺が起こりません。

親子関係のボックス(親要素と最初の子要素)でmargin相殺が起こる条件

上下に並んだ兄弟関係のボックスではなく、親子関係のボックスで相殺が起こることもあります。親子関係のボックスで相殺が起こると、子要素のmargin-topが親要素の外側にはみ出てしまいます

下の2つの条件をどちらも満たしている場合親子関係のボックスで相殺が起こります。

  • 子要素にmargin(正の値)の指定がある
  • 親要素にpaddingとborderのいずれも指定されていない

DEMO

margin相殺のデモファイルです。相殺が起こらないケースも入れておきました。ブラウザで検証してmarginが重なっていることを確認してみてください。

margin相殺デモファイル

HTML/CSS 相対パスの記述例

以前の記事で相対パスの書き方を解説しましたが、相対パスの書き方は慣れないうちはややこしいと思います。今回は色々な記述例を挙げますので、参考にしてください。

記述例

今回は、以下のファイル構造のときの例を挙げます。

ディレクトリ構造

index.htmlにflower.jpgを表示するときのimg要素

<img src="image/photo/flower.jpg" alt="花の写真">

works.htmlにindex.htmlのリンクを張るときのa要素

<a href="../index.html">TOP</a>

style.cssでbt01.jpgを背景として指定するときのbackgroundプロパティ

background: url(../image/ui/bt01.jpg);

works.htmlにstyle.cssを読み込むときのlink要素

<link rel="stylesheet" href="../css/style.css">

HTML5 セクションを表すsection要素とh1~h6の関係

HTML5 セクションを表すsection要素とh1~h6の関係

HTML5ではsection要素やarticle要素を使ってセクションをマークアップすることで、WEBページの構造(アウトライン)を明確にすることが重要視されています。セクションとは、文書の一区切りのことで、小説にたとえると章や節などのことです。セクションの構造でWEBページのアウトラインが表されます。

セクションを表すうえで重要なのがsectionとh1~h6までの見出し要素です。見出し要素だけでもセクションを表すことは可能ですが、より明確にセクションを表すためにsection要素やarticle要素を使うことが推奨されています。section要素の中にはh1~h6までの見出しが必ず1こ以上入っていなければいけないので気を付けてください。

見出しで表されるセクション

見出しだけでもセクションを表すことができますが、section要素のように明確に区切られたセクションではないので、暗黙的なセクションと呼ばれます。暗黙的なセクションは、見出しレベルによって階層が決まります。見出しレベルが大きい(要素名の数字が小さい)場合は上の階層、見出しレベルが小さい(数字が大きい)場合は下の階層になります。

暗黙的なセクションの例

HTML

<h1>大見出し</h1>
<h2>中見出し1</h2>
<h3>小見出し</h3>
<h2>中見出し2</h2>

アウトライン

1.大見出し
  1.中見出し1
    1.小見出し
  2.中見出し2

section要素で表されるセクション

section要素(もしくはarticle要素)を使うことでより明確にセクションを表すことが可能です。明確に区切られたセクションなので明示的なセクションと呼ばれます。

section要素を使って明示的にセクションを表した場合は、見出し要素の見出しレベルは関係なく、section要素の入れ子構造によってアウトラインが決まります。ただし、同じsection要素内に複数見出しがあった場合は、見出しレベルでアウトラインが表されます。

明示的なセクションの例

HTML

<section>
  <h1>大見出し</h1>
  <section>
    <h2>中見出し1</h2>
    <section>
      <h3>小見出し</h3>
    </section>
  </section>
  <section>
    <h2>中見出し2</h2>
  </section>
</section>

アウトライン

1.大見出し
  1.中見出し1
    1.小見出し
  2.中見出し2

参考サイト: HTML5 のセクショニングとアウトラインアルゴリズムの再確認 &#8211; Foreignkey, Inc.

HTML5 <s>と<del>の使い分け

HTML5 <s>と<del>の使い分け

今回の記事では、使い分けが難しい<s><del>の使い分けに関してです。どちらもブラウザで表示すると打ち消し線がつきますが、見た目ではなく意味でマークアップするようにしてください。

<s>と<del>の使い分け

<s>は今は正確ではない情報や、改訂された情報を表します。情報を置換したり削除した部分に使うのは適切ではありません。

<del>は編集して削除した文章であることを表します。情報が古くなったことを表したいときなどは<s>の方が適しています。

場合によってはどちらにも当てはまるケースがあると思いますが、そういったときはどちらの意味を明示したいかで使う要素を決めてください。どうしても判断がつかない場合には、<span>などを使ってCSSで見た目だけ打ち消し線を引くこともできます。

Photoshop ブラシカスタマイズ3 ~ブラシパネル「散布」の設定~

3回前の記事からブラシカスタマイズについて書いています。前回はブラシパネルの設定項目「散布」について解説しました。今回の記事では、描画中の色を変化させる設定、「カラー」について解説します。

※この記事を書く際に使っているPhotoshopのバージョンはCC 2015です。バージョンによって見た目や設定等異なる場合があります。

カラー

描点ごとに適用

チェックを入れていないときは、1回の描画(1ストローク)ではカラーの変化が起きず、2回3回と描画するたびに色が変化します。チェックが入っているときは、1回の描画の最中に(1ストローク中に)色が変わるようになります。

描画色・背景色のジッター

描画色と背景色の間で色をランダムに変化させたいときに動かす項目です。100%に近いほど変化の度合いが大きくなります。

コントロール

「オフ」がデフォルトで、「フェード」に設定すると、指定した回数ブラシ先端を描画する間に描画色から背景色へ変化します。「フェード」の数値の意味は、ブラシ先端の描画回数です。「描点ごとに適用」にチェックが入っていない場合は「フェード」の設定は反映されません。

色相のジッター

色味をランダムに変化させたいときに動かします。

彩度のジッター

色の鮮やかさをランダムに変化させたいときに動かします。

明るさのジッター

明るさをランダムに変化させたいときに動かします。

HSB

彩度を増減させます。-100%は彩度が全く無い状態、100%は彩度が最も高い状態です。

例:描画色から背景色へのグラデーションになるブラシの設定

描画色から背景色へのグラデーションになるブラシの設定