【HTML & CSS】 box-shadowプロパティでボックスに影を付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

border-radiusプロパティで角を丸くする方法に続いて、次はボックスに影を付ける方法です。

ボックスに影を付ける


box-shadow: 横オフセット 縦オフセット [ぼかし幅]  [影の広がり]  [inset];
[]は省略可能です。
[影の広がり]を指定しない場合は影のサイズはボックスのサイズと同じになります。正の値を指定すると全方位に影が拡大されます。反対に負の値を指定すると影は縮小されます。
[inset]を指定すると影はボックスの内側に付きます。

box-shadow: 10px 20px;
横方向に10px、縦方向に20pxにずらした位置に影を付けます。


box-shadow: 10px 20px 5px;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5pxに設定します。


box-shadow: 0 0 0 10px;
影の広がりだけを10pxに設定すると、ボックスサイズより全方位に10px拡大された影が付きます。


box-shadow: 10px 20px 5px #aaaaaa;
横方向に10px、縦方向に20pxにずらした位置に影を付け、影のぼかし幅を5px、影の色をグレーに設定します。


box-shadow: 0 0 16px 5px #aaaaaa inset;
insetを指定してボックスの内側に影を付けます。
insetを指定した場合、影の広がりは正の値で縮小されるようになります。



box-shadowの各ブラウザ対応状況


box-shadowプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
IEIE9よりサポート
ChromeChrome10.0よりサポート
FirefoxFirefox4.0よりサポート
SafariSafari5.1よりサポート
iOsiOS5.0よりサポート
AndroidAndroid4.0よりサポート
Android4.0以前、iOs5.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点ではスマートフォン向けにwebkitを使用する方がよさそうです。

というわけで、box-shadowの指定の仕方は下記のようになります。(※2014年7月時点)
.box{
 -webkit-box-shadow: 10px 20px 5px #aaaaaa;
 box-shadow: 10px 20px 5px #aaaaaa;
}


box-shadowの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、box-shadowの設定が簡単に作成・確認できます。

【HTML & CSS】 border-radiusプロパティで角を丸くする

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

まずはボックスの角を丸くする方法です。
今までは画像を使って角丸を実現してきましたが、CSS3からはスタイルシートを使って簡単に角丸を実現できるようになりました。

時間が無かったり、めんどくさかったりで、ただ罫線で囲んだだけの味気ないボックスを
ほんの少し角を丸くするだけで、すこしはマシなデザインになるかも?です。

ボックスの4隅の角を丸くする

まずは、ボックスの4隅の角をまとめて丸くする方法です。
border-radius: 20px;


4隅の角をそれぞれ指定するには、border-radius: 左上 右上 右下 左下; と指定します。
border-radius: 20px 30px 40px 50ox;


4隅の角の指定を100%にすると、円も表現できます。



他にも指定方法は色々あります。
複雑な事はしないので、基本的な設定方法だけまとめてみました。


border-radiusの各ブラウザ対応状況


border-radiusプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要がありますが、
border-radiusのサポート状況からベンダープレフィックスは必要なさそうです。
IEIE9よりサポート
ChromeChrome5.0よりサポート
FirefoxFirefox4.0よりサポート
SafariSafari5.0よりサポート
iOsiOS4.0よりサポート
AndroidAndroid2.2よりサポート


border-radiusの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、border-radiusの設定が簡単に作成・確認できます。

【HTML & CSS】marginが重なると相殺し合う

私はプログラマーです。普段CSSを触る事は滅多にありません。
それでもCSSを触らないといけない事も、時々あります。
そんな時によく遭遇するのが「marginが効かないっ!!」です。

すこ~し前にmarginが重なると、一方のmarginが効かなくなるようなことは、ネットで検索して知っていました。
「ふ~ん」って感じで読み流しちゃって、ちゃんと理解していませんでした。
今回はしっかり理解したいと思います(`・ω・´)キリッ


marginが相殺し合うパターン

CSSでは「上下のマージンは重ねて表示する」というルールがあります。

同階層の要素の場合


下記の画像はdivTopにmargin-bottom: 40pxを指定しています。


次にdvBottomにmargin-top: 20pxを指定します。
divTopの下マージン + divBottomの上マージンで、divTopとdivBottomの間隔は60pxになると思ってました。
でも結果は先ほどと変わりません。


CSSでは「上下のマージンは重ねて表示する」というルールがあります。
上記の例でいうとdivTopのmargin-bottomとdivBottomのmargin-topが重なり、marginが大きいdivTopのmargin-bottomだけの間隔があきます。


例えばdivBottomのmargin-topを60pxに設定すると、divTopのmargin-bottomより大きいので、divBottomのmargin-topだけの間隔があきます。


親子要素の場合


下記の画像は水色が親のdiv、赤色が子のdivです。
<div class="divParent">
 <div class="divChild">divChiled</div>
</div>

.divParent{
 width: 100px;
 height: 100px;
 background-color: #7ef1e0;
}

.divChild{
 background-color: #f17e7e;
 width: 70px;
 height: 40px;
}


それでは親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定してみます。
私の希望する結果は下記の画像のように、親要素が10px下がって、子要素は親要素から30px下がっている状態です。


結果は親要素も子要素も30px下がってます。

親要素のmargin-topと子要素のmargin-topが相殺され、大きい方の子要素のmargin-topが適用されています。


marginが相殺されないケースがある

相殺されるなら必ずされる。相殺されないならすべての条件で相殺されない。とハッキリしてくれていたらいいのに
ある一定の条件下で相殺されないケースがあります。

同階層の要素の場合
  • 要素にfloatが指定されているとき

親子要素の場合
  • 親要素にborderが指定されているとき
  • 親要素にpaddingが指定されているとき
  • 親要素が空でないとき
  • ・・・etc

今の私には相殺されないケースすべてを理解することは無理なので、親子要素の3つのケースについて試してみました。

親子階層でmarginが相殺されている状態です。
親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定しているので
子要素のmargin-top: 30pxが適用されている状態です。


親要素にborderを指定してみます。marginは相殺されていません。


次は親要素にpaddingを指定してみます。こちらもmarginは相殺されていません。


最後に親要素に文字を入れてみます。こちらもmarginは相殺されていません。
<div class="divParent">divParent
 <:div class="divChild">divChiled</div>
</div>




今回理解したことは「マージンには気をつけろ」( ´▽` )ノ

【HTML & CSS】CSS3のbox-sizingプロパティ

私はプログラマーなので、普段はCSSはほぼ触りません。
でも今日はCSS3で導入されたbox-sizingプロパティを使って驚きました!
box-sizingが便利~っ!    ・・・てことに驚いたんじゃありません。
borderやpaddingでボックスサイズが変わる事を初めて知りました!
box-sizingの機能が標準だと思ってました(;・∀・)
いやぁ無知って恐ろしいですなぁ

ボックスの標準の動きのおさらい


width:100px; height:100px; を指定したdivです。



標準のdivに罫線10pxを指定したdivです。
罫線の分が増えたので、高さ:120px、幅:120pxです。



さらにpadding: 10pxを指定します。
paddingの分が増えたので、高さ:140px、幅:140pxです。



罫線とpaddingを含め標準のサイズ(高さ:100px、幅:100px)で表示したければ、罫線とpaddingの分を引いて width:60px height:60px を指定することになります。
pxで指定されていればよいですが、width:40% で border: 5px の場合などは計算するの面倒ですね…


box-sizingを設定する


width:100px; height:100px; を指定したdivです。



罫線を10px、padding:10pxを指定したdivに「box-sizing: border-box」を指定します。



「box-sizing: border-box」を指定するとwidthとheightで指定した幅に、罫線とpaddingを含めてくれます。


box-sizingの各ブラウザ対応状況


box-sizingプロパティはCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。
IEIE8よりサポート
ChromeChrome10よりサポート
FirefoxVersion29よりサポート
SafariSafari5.1よりサポート
iOsiOS5.0よりサポート
AndroidAndroid4.0よりサポート
Android4.0以前に対応するためにはベンダーブレフィックス「-webkit-」を使用します。
2014年時点でAndroid4.0以前のシェアも約半数あるので、指定しておく方がよいかもしれません。

FireFoxのVersion29は2014/04/29にリリースされました。
もうしばらくの間、ベンダープレフィックス「-moz-」を指定しておく方がよいかもしれません。

というわけで、box-sizingの指定の仕方は下記のようになります。(※2014年7月時点)
.box{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

box-sizingを使う使わないはサイト全体で統一していた方が良いと思いますので、ユニバーサルセレクタで指定する方がよいかもしれません。
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

【HTML & CSS】 サイト全体のフォントを指定する 2014年度 

サイト全体で使用するフォントをスタイルシートに設定します。
cssにfont-familyで指定するんですが、「css font-family」で検索すると
色々な人が「こんな指定がいいぞ~」と説明してくださっています。
プロ(Webデザイナー)はフォント一つにもそれぞれコダワリがあるんだなぁと思いました。

デザインを重視しないWebアプリの場合、社内用であったり、関連会社との企業間システムであったりするので
ブラウザも限定されてきます。
そんな古いIEまで対応しなくても良いし、正直な所フォントは読みやすければだいたいでいいです。

こちらのサイトが説明がシンプルでわかりやすかったです。
6666666(セブンシックス) CSSのfont-family指定に関する考察 2014年版

こちらの説明も細かく参考になりました。
DTP Transit CSSでのフォント指定について考える(2014年)

スタイルシートでサイト全体のフォントを指定する

※以下のフォントは、あくまでも「フォントはだいたいでいいよ~」って人の為のフォントです。

font-familyの基本形

body {
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

font-familyには優先順位の高いフォントから記載していきます。
日本語フォントやスペースが含まれるものは"(ダブルクォテーション)か’(シングルクォテーション)で囲みます。
「Mac用欧文フォント,win用欧文フォント,Mac用和文フォント,Win用和文フォント,適用できるフォントがなかった場合に表示するゴシック系フォントsans-serif」の順で設定するようです。
これはMacにofficeをインストールしているとWin用フォントが入っている可能性が高いので、先にMac用フォントを記載することで適用フォントを優先させるそうです。

上記の例では欧文フォントと和文フォントを分ける必要がないので、Mac用フォントとwin用フォントとsans-serifを指定しています。
mac用フォントもいらないかもと思ったのですが、iosやipadのフォントも「Hiragino Kaku Gothic ProN」で表示させるようなので残しておきます。


font-familyに游ゴシック体が追加する

OS X Mavericks (10.9)とWindows 8.1に游ゴシック体が追加されました。
将来的にこちらのフォントの追加がデフォルトになってくるかと思うので、游ゴシック体を追加したバージョンです。
body {
    font-family: "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}


font-familyでandroid端末にも対応する

android端末はsans-serifにお任せでもいいと思うのですが、対応するならこちら。
body {
    font-family: Roboto, "Droid Sans", "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
android4以降用にRobotoを指定、android4以前用にDroid Sansを指定します。

【HTML & CSS】 CSSの文字コード指定

スタイルシートはたま~に変更することはあっても、一から作る事ってまずありません(;^ω^)
普段はあまり気にしていなかったのですが、そういえばファイルの先頭に文字コードの指定がありました。

スタイルシートの文字コードを指定する

utf-8で文字コードを宣言します。
@charset "utf-8";
ファイルの先頭で宣言すること。
HTMLの文字コードと一致させること。
エディタを保存する際にutf-8で保存すること。(※普段の設定がsjisなのでよく変更し忘れる)


スタイルシート内はすべて半角英数で書くので文字コードを指定しなくても大丈夫じゃないの?と思ったのですが
スタイルシートで日本語の書体を指定する時に文字化けして、スタイルシートが適用されないということが発生するようです。

じゃ、日本語フォントを書いていなければ文字コードを指定しなくても大丈夫じゃないの?と思ったのですが
どうも日本語で書いたコメントが文字化けして、スタイルシートが適用されないということが発生するようです。

HTMLで指定した文字コードとスタイルシートで指定した文字コードが異なっていても
文字化けが発生して、スタイルシートが適用されないということが発生するようです。


ちなみにASP.NETが生成するHTMLはデフォルトでutf-8です。
なのでASP.NETで使用するスタイルシートもutf-8で作成しないと、スタイルシートが適用されないということが発生します。

【HTML & CSS】 HTML5の最小構成

デザイン系は苦手です(◎o◎)

何で苦手かといいますと、感性なんて人それぞれであって
何が美しいと感じるか、何が使いやすいと感じるかなんて、結局は人それぞれで「答え」がないところが苦手です。

例えば
「上の人」からデザイン考えてと言われて、自分なりに美しく使いやすい画面を作ったとしてます。
感性の違う「上の人」がナンカチガウンダヨネ~とか言われちゃったら、もう何も言えないじゃないですか。
そして何度も何度も作り直して、やっぱり「最初のにしよう♪」とか言われちゃったら殺意感じませんか?

でも「デザイン苦手なのでやりません!」とも言ってられません。
個人向けシステムだったらデザイナーさんが入ってくれるんですが、
企業向けシステムだったら、ほぼデザイナーさん入りません。
見た目はあまり重視されないんですね。
だからホントに酷いものがあります。(※もちろん例外もあります)
プログラムだけでイッパイイッパイの疲れ切ったプログラマたちが作る、
美的センスの欠片も感じさせない、divもtableレイアウトもなくスペースだけを武器にレイアウト調整されたページ Σ(@д@;ノ)ノ ヒィィィ~...
同情すら感じます。
でもそんな時は「見ない。聞かない。言わない。」
もし見ちゃうと自分の心が砕けます。
もし聞いたり言ったりしちゃうと、自分の作業が増えます。しかもタダで。

あぁそういえば遠い過去に、黒と黄色と紫で画面を構成したプログラマがいました。
衝撃でした。

お客様も今まで使用していたwindowsアプリをWebアプリにするだけなので
デザインはタダ、料金もほぼwindowsアプリと同じだと思っている節があります。
営業もwebアプリだからといって金額を割り増しできないようです。
Webシステムは赤字になりがちだなぁと思います

まぁそんなわけでプログラマでもHTML&CSSで「ある程度」のデザインは組めないといけませんね。

HTML5での最少構成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
</body>
</html>
metaタグとlinkタグは終了タグを書きません。
詳しくはコチラ
【HTML & CSS】 HTML5で終了タグを書かないタグ

【HTML & CSS】 HTML5で終了タグを書かないタグ

HTML5で終了タグを書かないタグ
br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

XHTMLとの互換を保つため、終了タグを記述することもできます。

HTML5
 <meta charset="utf-8" >

XHTML
 <meta charset="utf-8" />

個人的には終了タグを書きたくてウズウズします。
「自分で開いたものは、必ず閉じる!」これプログラマの常識です。

【Apache】 ローカル環境で仮想ホストを作成する。

PHPファイルを作成しローカル環境で実行する場合
Apacheをインストールしたフォルダ配下のhtdocsフォルダにファイルを作成し、http://localhost/XXXX.phpとブラウザで確認します。

例えば「%APACHE_HOME%\htdocs\test.php」というPHPファイルは「http://localhost/test.php」でブラウザで確認します。

複数のWebサイトを管理する場合、htdocsフォルダ配下にサイトごとにフォルダを作成すればよいのかと思ったのですが
これだとルートディレクトリは「%APACHE_HOME%\htdocs」なので外部ファイルを読み込む際のパスなど、なにかと問題が発生します。

例えば「website_a」と「website_b」という二つのサイトがあり、それぞれに「test.php」がある場合
以下のようなPHPファイルは
「%APACHE_HOME%\htdocs\website_a\test.php」
「%APACHE_HOME%\htdocs\website_b\test.php」
ブラウザでは以下のように確認することになります。
「http://localhost/website_a/test.php」
「http://localhost/website_b/test.php」

外部ファイルを絶対パスなどで読み込む際にwebsite_aもwebsite_bもルートディレクトリが「%APACHE_HOME%\htdocs」になるので
「website_a」配下のファイルにアクセスするのに困ってしまいます。

「website_a」のルートディレクトリは「%APACHE_HOME%\htdocs\website_a」
「website_b」のルートディレクトリは「%APACHE_HOME%\htdocs\website_b」
と設定したいと思います。

Apacheにバーチャルホスト(仮想ホスト)を設定する

仮想ホストとは、Webブラウザーで指定されるURLとサーバー上の実際のフォルダとを結びつける役割をします。
つまり好きな場所に配置したフォルダ内のファイルを、こんなURLでアクセスするからちゃんと表示してねと設定してあげるんですね。

今回は「D:\website_a」フォルダを作成し、「http://local.website_a」でアクセスできるように設定してみます。

%APACHE_HOME%\conf\httpd.confの編集


1.アクセス権限の変更
以下のような記載箇所を検索し
赤字の「Deny from all」を「Allow from all」に変更します。
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>
これですべてのフォルダに対してアクセス権限を与えることができます。
もし個別のフォルダに対してアクセス権限を与えるのであれば、以下のようにパスを指定します。
<Directory "D:\website_a"/>
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Allow from all
</Directory>

2.仮想ホストの設定ファイルを読み込めるようにする
以下のような記載箇所を検索し
赤字の「#」を削除します。
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
これで仮想ホストの設定ファイル「conf/extra/httpd-vhosts.conf」を読み込むようになります。

%APACHE_HOME%\conf\extra\httpd-vhosts.confの編集


コメントは省いて、以下のような記載があると思います。
NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.localhost
    DocumentRoot "C:/Program Files2/Apache2.2/docs/dummy-host.localhost"
    ServerName dummy-host.localhost
    ServerAlias www.dummy-host.localhost
    ErrorLog "logs/dummy-host.localhost-error.log"
    CustomLog "logs/dummy-host.localhost-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.localhost
    DocumentRoot "C:/Program Files2/Apache2.2/docs/dummy-host2.localhost"
    ServerName dummy-host2.localhost
    ErrorLog "logs/dummy-host2.localhost-error.log"
    CustomLog "logs/dummy-host2.localhost-access.log" common
</VirtualHost>
以下のように変更します。
NameVirtualHost *:80

#=======================
#localhost
#=======================
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "C:/Program Files/Apache2.2/htdocs"
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>

#=======================
#website_a
#=======================
<VirtualHost *:80>
    ServerAdmin webmaster@dumy.co.jp
    DocumentRoot "D:/website_a"
    ServerName local.website_a
    ErrorLog "logs/local.website_a-error.log"
    CustomLog "logs/local.website_a-access.log" common
</VirtualHost>
ServerAdmin・・・管理者のメールアドレス
DocumentRoot・・・サイトのファイルのあるフォルダ
ServerName・・・サイトにアクセスするための名前
ErrorLog・・・エラーログ
CustomLog・・・アクセスログ common・・・httpd.confファイル内で定義されているcommonフォーマットを利用する

一つ目の仮想ホストの設定は
今まで通り「%APACHE_HOME%\htdocs」フォルダ配下のファイルを「http://loalhost」でアクセスできるようにするためのものです。
二つ目の仮想ホストの設定は
「D:/website_a」フォルダ配下のファイルを「http://local.website_a」でアクセスできるようにするためのものです。

設定を有効にするためにApacheを再起動します。

C:\WINDOWS\system32\drivers\etc\hostsの編集


ServerNameで設定した名前「local.website_a」とIPアドレスを紐付するために、hostsファイルを編集します。
hostsファイルはwindows7の場合「C:\WINDOWS\system32\drivers\etc」にあります。
「127.0.0.1 localhost」の次行に「127.0.0.1 local.website_a」を追記します。
127.0.0.1 localhost
127.0.0.1 local.website_a
「127.0.0.1」はローカル・ループバック・アドレスと呼ばれ、自分自身を指す特別なIPアドレスです。
ホスト名「localhost」や「local.website_a」でアクセスされたとき、自分自身にアクセスするように設定しています。
設定を有効にするためにブラウザを一度閉じて開き直します。


以上で設定は終了です。
「D:\website_a」にhtmlファイルを配置し、「http://local.website_a/XXX.html」にアクセスして表示されるか確認してください。

辺境地に住む主婦で在宅プログラマの悩み

久しぶりの投稿です。
最後に投稿したのが2014年1月だから半年ぶりですねぇ。

年末あたりから消費税対応に始まり、忙しかったです。本当に忙しかったです。゚(゚´Д`゚)゚。
最近になってやっと落ち着いたというか、仕事が途切れました。
休みなしでずっと働いてきたので、少しゆっくりさせてもらうのもいいかもしれません。

暇になるとこれからの仕事の事を考えてしまいます。

在宅でプログラムの仕事をするようになって9年。
関西で在宅のお仕事を見つけるのはけっこう難しいです。
androidも勉強してましたが、関西でandroidの在宅の仕事ってあるんでしょうか!?
私には縁がないのかもしれません。

在宅でお仕事を貰えるお客さまに巡りあっても
.netでwindowsアプリを作るか、asp.netのお仕事が多いです。
仕事の幅が広がらない・・・

このブログはandroidで来られる方が多いですが
在宅で需要のあるPHPに転向しようかと悩んでいます。

辺境地に住む主婦がプログラマを続ける事自体が難しいんでしょうかね・・・(´・ω・`)