CSS3のボタンやリボンをデザインできるサイト「Live Tools」

CSS3では、ボタンなどの色々な装飾を画像を使わずに作れますが、コードが長くなって書くのは大変ですよね。そんなときに便利なのが各種CSSのジェネレータです。WEB上に沢山あるジェネレータでは、デザインを確認しながらの簡単な編集で、CSS3のコードを作ってくれるので時間短縮になります。

このブログのCSSの参考サイトリンクページにもグラデーションジェネレータをいくつか紹介していますが、今回はグラデーションやボーダー、シャドウなどを含めたボタンやリボンのデザインが出来るLive Toolsというサイトを紹介します。

Live Tools編集画面

Live Toolsでは、設定項目が書かれたボックスをクリックしてカラーピッカーで色を変えたり、スライダーを動かして大きさやボーダーの太さを簡単に変えることが出来ます。ボタンやリボンのデザインが決まったら、「Generate HTML」「Generate CSS」をクリックすることでHTMLとCSSが生成されます。

検索サイトで調べ物をするときは検索されやすいワードで。

選ぶキーワードによって検索結果が変わる

分からないことがあって調べ物をする機会は沢山あると思います。とくにWEBサイト制作をしているときは、「あのソフトのあの機能はどう使うんだっけ?」とか、「プロパティの名前が分からない」とか、「やりたいことがあるけど、やり方が分からない」など、いろいろなケースがあるでしょう。

よく、検索したいけどどんなキーワードにすればいいかが分からないという意見を耳にします。調べたいことが漠然としている場合は、確かにどう検索すればいいか迷うと思います。近くに知っていそうな人がいれば、聞いた方が早いかもしれません。ただ、実務で分からないことがあったときには、いつでも上司や同僚に聞けるとは限りません。できる限り自分で調べる必要があります。

検索サイトでキーワードに何を入力するか迷った時には、同じことを調べようとした人がどんなワードを使うか想像して、多くの人が使いそうなワードを使ってください。どんな調べ物でも言えるのが、「簡単な単語で検索する人が多い」ということです。例えばクッキーの作り方を検索するとき、「クッキー 調理法」よりも「クッキー レシピ」の方が多くヒットします(Googleの場合 前者:約 2,110,000 件 後者:約 7,570,000 件)。こんな風に、使うワードを変えるだけで検索結果は変わってきます。普段から色々なワードで検索していると、多くヒットしやすいワードのあたりもつけやすくなるので、意識して検索してみてください

また、調べたいことが漠然としていて検索ワードが決まらないときは、まず関連するキーワードで検索してみてください。検索して出てきたWEBサイトの中に、近い情報が書いてあったら、その情報でまた検索・・・と繰り返していくと目的の情報に近づいていきます。最初は時間がかかるかもしれませんが、検索ワード選びに慣れてくれば、段々目的の情報に早く辿り着けるようになります。ぜひ積極的に調べてみてください。

CSS3 transformは関数の記述順で結果が変わるので注意!

CSS3のアニメーションなどでよく使われるtransformプロパティですが、同時に複数の変形をするとき、記述の順番で結果が変わるのでご注意ください。今回は、CSSのアニメーションと組み合わせたときの動きについて、実際に例を挙げてその違いを見てみます。

transformの書き方

transformの書き方

回転させたり、移動させたり、伸縮させたりといった、変形の種類を指定するものは、transform関数と呼ばれます(rotateやtranslate、scaleなど)。transform関数についてはこちらの記事にまとめてあります。

この関数を書く順番によって結果が変わってくるので、注意が必要です。

アニメーションさせたときの動きの違いの例

たとえば、rotateを先に書いて、translateを後に書くと、先に書いた回転の動きがベースになります。アニメーションにすると、要素が回転の軸から螺旋状に離れていく動きになります。このとき回転の中心は移動しません

translateを先に書いて、rotateを後に書いた場合は、先に書いた移動の動きがベースになります。アニメーションにすると、要素が回転しながら真っすぐ移動します。こちらは回転の中心が移動します

DEMO

css_transform

クライアントサイドとサーバーサイドの意味 ~サーバーサイド~

前回の記事でクライアントサイドという言葉について解説しました。今回はサーバーサイドについてです。

サーバーサイドとは

「サーバーサイド」はそのまま、サーバー側ということで、「サーバーサイドのプログラミング言語」というのは「サーバー上で実行されるプログラミング言語」という意味です。

サーバー上で動くプログラムには、PHPやPerl(CGI)などがあります。ブラウザからサーバーへの要求に応じて、これらのプログラムがサーバーで実行され、実行結果のHTMLが出力されます。それをブラウザに送信してWEBページを表示するという仕組みです。

「サーバーサイドのプログラム」が「クライアントサイドのプログラム」と違うのは、サーバー上のデータを利用してHTMLを出力したり、サーバーにデータを保存したりすることが出来ることです。例えば、ユーザーがコメントに入力した内容を受け取ってHTMLに書き込んだりする際にこの仕組みが使われます。

なお、「サーバーサイドのプログラム」はサーバー上で実行されて、結果をブラウザに返すので、HTML要素をアニメーションさせるなど、スピードが求められる操作には向いていません。そういった操作をするには、JavaScriptなどの「クライアントサイドのプログラム」を使います。

クライアントサイドとサーバーサイドの意味 ~クライアントサイド~

クライアントサイドとサーバーサイドの意味 ~クライアントサイド~

WEB制作現場では、「クライアントサイドの言語」とか、「サーバーサイドのプログラミング言語」といった言葉を聞くことがあります。今回と次回の記事では、この2つの意味について解説します。

クライアントサイドとは

この場合の「クライアント」というのは、顧客とか依頼者といった意味ではありません。「サーバー」から情報を受け取って閲覧する側のこと、つまりこの記事を読んでいる皆さんのようなWEBの利用者のことです。

「クライアントサイド」とは、利用者側のブラウザやパソコンなどのことを指しますから、「クライアントサイドの言語」というのは、「ブラウザが解釈して実行する言語」というような意味です。

ブラウザ上で動く言語には、HTMLやCSS、JavaScriptなどがあります。ブラウザからサーバーへの要求に応じて、これらのデータがサーバーからブラウザに送信され、ブラウザが解釈してWEBページを表示するという仕組みになっています。

「クライアントサイドの言語」はブラウザ上で実行されているので、サーバー上にあるデータベースを利用することなどは出来ません。例えばJavaScriptではHTMLやCSSの書き換えができますが、サーバーにあるデータを使ってHTMLを出力したり、サーバーのデータベースに情報を保存したりはできず、あくまでも今ブラウザが扱っているHTMLやCSSのみの変更です。

CSS 画像の上に文字を配置する方法

今回は、CSSで画像の上に文字を配置する方法を2種類紹介します。1つの方法は、画像をCSSで背景として指定する方法で、これが一番簡単です。もうひとつの方法は、画像をimg要素、文字をp要素などで表示して、positionプロパティで重ねる方法です。

レスポンシブデザインのサイトで画像の大きさが変化する場合は後者、固定サイズなら前者の方法がお勧めです。

背景画像に指定する方法

HTML

<p>ABCDEFG<br>abcdefg</p>

CSS

.bg{
   display: table-cell;
   width: 640px;
   height: 440px;
   text-align: center;
   vertical-align: middle;
   background: url(photo.jpg);
 }

display: table-cell; と vertical-align: middle; で文字を上下中央に配置しています。

ブラウザ表示例

ブラウザ表示例

img要素の上にp要素などの文字を配置する方法

HTML

<div>
<p><img src="Photo.jpg" width="640" height="440" alt=""></p>
<p class="img">ABCDEFG<br>abcdefg</p>
</div>

CSS

div{
position: relative;
width: 640px;
}
.img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 96px;
margin: auto;
text-align: center;
}

position と margin で文字を上下左右中央に配置しています(この方法について詳しくはこちらの記事をご覧ください)。

ブラウザ表示例

ブラウザ表示例

CSSだけで吹き出しを作る方法

CSSで吹き出しを作る方法

前回の記事で、ボーダーを使った三角形の作り方を紹介しました。今回はその三角形と疑似要素を使ったCSSの吹き出しの作り方の紹介です。

吹き出しのとがった部分を疑似要素で作成します。とがった部分の位置は自由に調整できますが、今回は下部中央にしています。記述例ではp要素をdivで囲っていますが、divが無くても問題なく作れます。

HTML

<div>
  <p>sample</p>
</div>

CSS

p{
 line-height: 50px;
 color: #fff;
 font-size: 18px;
 text-align: center;
}
div{
 position: relative;
 width: 200px;
 height: 50px;
 margin: 30px;
 background-color: #009D78;
 border-radius: 10px;
}
div::after{
 content: "";
 position: absolute;
 bottom: -12px;
 left: 50%; /* 三角形の左端が横方向中央に配置 */
 margin-left: -10px; /* 中心がずれた分左にずらして調整 */
 border-style: solid;
 border-color: #009D78 transparent transparent transparent; /* 上のボーダー以外は透明にして逆三角を作る */
 border-width: 15px 10px 0 10px;
}

DEMO

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

css_fukidashi

CSSで三角形を作る方法

今回は、CSSで三角形を作る方法を紹介します。CSSのみでボタンや吹き出しを作るときの装飾に使えます。

borderで作るCSSの三角形

CSSで三角形を作るには、ボーダーを使います。ボーダーは、直角に交わるときに角が斜めになるので、それを利用しています。

cssで三角形を作るしくみ

 

TOPに戻るボタンを作った例

実際のコードです。before擬似要素で三角形を作っています。透明にするボーダーは、border-color の値を transparent(透明) にします。

HTML

<a href="#">TOP</a>

CSS

a{
  position: relative;
  display: block;
  width: 50px;
  height: 20px;
  padding-top: 30px;
  background: #666;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
a::before{
  content: "";
  position: absolute;
  bottom: 25px;
  left: 50%;
  margin-left: -10px;
  border-bottom: 15px solid #fff; /* 三角形本体 */
  border-right: 10px solid transparent;
  border-right: 10px solid transparent;
}

下は上記のコードを記述したデモファイルです。

css_triangle

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

今回は、nth-childに似た用途のnth-of-type擬似クラスを紹介します。どちらも覚えておくと、かゆい所に手が届くセレクタです。nth-childとnth-of-typeは書き方がほぼ同じなので、以前書いたnth-childの書き方の記事をご覧ください。

nth-childとnth-of-typeの違い

nth-child

まず、nth-childはどんなものだったかというと、ある要素の中の「〇番目の子要素」を指すものでした。例えば p:nth-child(3) というセレクタにした場合、親要素の3番目の子要素のp要素という意味になります。このとき、親要素の3番目の子要素がp要素でなかった場合はスタイルが適用されません

nth-of-type

一方nth-of-typeは、ある要素の中の「〇番目の×要素」を指します。例えば p:nth-of-type(3) というセレクタにした場合、兄弟関係にあるp要素のうち、3番目のp要素という意味になります。このとき、p要素が3番目の子要素である必要はなく、3番目に出てきたp要素が対象になります。

記述例

文章では分かり辛いので実際に試してみます。下記HTMLで p:nth-child(3) と p:nth-of-type(3) をそれぞれ指定した場合どうなるか見てみます。

HTML

<div>
  <h1>最初の子要素</h1>
  <p>最初のp要素、2番目の子要素</p>
  <p>2番目のp要素、3番目の子要素</p>
  <h2>4番目の子要素</h2>
  <p>3番目のp要素、5番目の子要素</p>
</div>

CSS

p:nth-child(3){ color: blue; }
p:nth-of-type(3){ color: red; }

結果

上記HTMLとCSSの適用結果のデモファイルです。「3番目の子要素のp」が青に、「3番目のp要素」が赤になります。

nth-of-type

WEBデザインの色選びで考えること

WEBデザインの色選びで考えること

WEBサイトのイメージを大きく左右する要素に「色」があります。WEBデザインをするうえで重要な色選びは、イメージが固まっているならすぐに決まるかもしれませんが、なかなか決まらないこともあります。そんなときに参考になる考え方や、ポイントをまとめました。

3色を基本に考える

WEBサイトに限らず、色を選ぶ時は3色がまとめやすいです。ひとつは一番広い面積(デザイン全体の7割程度)に使うベースカラー、ひとつはデザインのイメージに合わせて全体の3割程度の面積に使うメインカラー、最後に目立たせたい部分などごく一部に使うアクセントカラーです。ベースカラーやメインカラーで見た目のイメージが大きく変わるので慎重に選びます。

3色だけでなく、もっとカラフルにするときには、色を使う面積の比率に気を付けてください。単純に色を足すだけでは、まとまりのないデザインになりがちです。色を増やす場合は、ベースカラー、メインカラー、アクセントカラーの比率はそのまま、それぞれの色数を増やします。たとえばベースカラーが白で、メインカラーを赤と青に増やす場合、白は全体の7割程度の面積を保ったまま、赤と青が合わせて3割程度の面積になるようにデザインします。

色のイメージ

直感的に色が決まらないときは、色の持つイメージから論理的に考えるのも手です。サイトのターゲットやコンセプトに合ったイメージの色をベースカラーやキーカラーに設定します。たとえばIT系企業のサイトではキーカラーに青がよく使われていますが、これは青色が「先進的」「理性的」「清潔」「信頼感」などのイメージを持っていることが影響していると思われます。

ただし、海外向けにサイトを制作する場合は、国内での色のイメージが通用するとは限りません。日本では「赤」は女性的なイメージがありますが、アメリカでは男性的なイメージを持たれているなど、イメージが違うこともあります。

アクセシビリティ

色分けして理解を促すようなデザインの場合、視覚障害を持つ方でも問題なく利用できるよう、色以外の判断材料も用意しておく必要があります。また、このようなデザインでは、色覚障害を持つ方が見分けやすい色を選ぶことも重要です。

参考サイト