画像軽量化比較
今回使用するツール
- photoshopCS5
- JPEGmini(web版)
- imageOptim(アプリ版)
使用する画像
ジヴェルニーの庭のアヤメ(モネ)598 KB,1024x849px
GATAG｜フリー絵画・版画素材集より参考
用途
web用として、印刷目的の解像度は使わない。なるべく軽く。
jpegMiniの場合
598 → 451 KB
Photoshopよりも圧縮率が高い。
ただ、Photoshopの方は細かな設定やバージョン次第でももっと圧縮できるかどうかは
使用するユーザーとソフトウェアにもよるが。
imageOptimの場合
598 → 562 KB
imageOptimeは基本画像のメタデータ(撮影日、カメラ情報、カラープロファイル)等の画質以外の
情報を取り払うので上記のPhotoshopやjpegMiniと比べると圧縮対象が違うので、軽量化にこだわりたい場合はPhotoshopやjpegMiniで圧縮した後に、残っている薄皮のメタデータをimagOptimで削り取ると...
- 元画像(598 KB) → jpgMini圧縮(451 KB) → imageOptim圧縮 → 最終圧縮結果(422 KB)
- 元画像(598 KB) → PhotoshopCS5圧縮(483 KB) → imageOptim圧縮 → 最終圧縮結果(470 KB)
といった結果となった。
アイコンをwebフォントとして使う。
icomoonからお好みのアイコンをCSSでwebフォント登録して気軽にデザインパーツとして利用できる。
いままで、UI(ユーザーインターフェイス)で使用するデザインパーツをillustratorやphotoshopでイチイチ作成して
た行程がだいぶ楽になる。
まずはicomoonからアイコンをチョイス。
icomoonにアクセスして使いたいアイコンを選択。
選択したアイコンがアクティブ状態になっているので、選びたい物がだいたい決まったら、"font"ボタンをクリック。
選択したアイコン一覧がプレビューされる。
内容を確認したら、"Download"をクリック。
DLされたファイルを確認。
DLされたファイルを解凍すると以下のファイルがある。
- demo-files(フォルダ)
- demo.js
- demo.css
- demo.html
- fonts(フォルダ)
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
- Read Me.txt
- selection.json
- style.css
この中で必要なのはfontsフォルダ(とその中身),style.cssだけです。
一つ一つ内容を確認していきます。
style.css内の記述
@font-face { //(1) urlの中身をディレクトリ階層によっては書き換えます。 font-family: 'icomoon'; src:url('fonts/icomoon.eot?wf2uj9'); src:url('fonts/icomoon.eot?#iefixwf2uj9') format('embedded-opentype'), url('fonts/icomoon.woff?wf2uj9') format('woff'), url('fonts/icomoon.ttf?wf2uj9') format('truetype'), url('fonts/icomoon.svg?wf2uj9#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } //(2) 以下が選択したアイコンの情報 .icon-home:before{ content: "\e600"; }
まずこのstyle.cssを格納してるcssフォルダと同階層にダウンロードしたfontsフォルダを配置します。
そして、上記のstyle.cssの(1)にあるurl、"fonts/icomoon"の所を"../fonts/icomoon"に書き直してパスが通るようにします。
(2)のアイコン情報については後述します。
配置前
<h2>header</h2>
ここで、前述のstyle.cssの(2)以下に記述してあったアイコン情報。
icon-homeの文字列をhtml上でタグにクラス名として付与する。
//以下のicon-homeをクラス名で使用する。
.icon-home:before{
content: "\e600";
}
配置設定
<h2 class="icon-home">header</h2>
出力結果
また、文字列の後ろにアイコンを配置させたい場合は
css記述の:beforeを:afterにすることで直せます。
出力結果
interface -インターフェイス-
1,インターフェイスとは抽象メソッドのみ(内容は記述しない)定義でき、抽象クラスと同じようにインスタンスは生成できない。
インスタンスができないということは、"抽象クラス"と同じく"継承"されるのだが
"インターフェイス"の場合は継承と呼ばずに"実装"と呼ぶ
2,また、接頭詞は"class"ではなく"interface"をもって定義する。
3,アクセス修飾子は"public"のみ。
4，インターフェイスブロックで定義したメソッドや引数の数、名前は実装先に同じ数、同じ名前が揃ってなければならない。
インターフェイスの定義
<?php //インターフェイス interface iProduct{ public function applyPriceDown(); public function getPrice(); public function setPrice($price); } //実装先クラス class Besitable implements iProduct{//野菜クラス:全品3割引 private $price = 1000; public function applyPriceDown(){ $this->price = $this->price * 0.7; } public function getPrice(){ return $this->price; } public function setPrice($price){ $price = $this->price; } } class Meet implements iProduct{//肉クラス:特定日半額 private $price = 1000; public function applyPriceDown(){ if('29' == date('d')){ $this->price = $this->price / 2; } } public function getPrice(){ return $this->price; } public function setPrice($price){ $price = $this->price; } } class FreezedFood implements iProduct{//冷凍食品クラス:値引き対象外 private $price = 1000; public function applyPriceDown(){ //値引き対象外 } public function getPrice(){ return $this->price; } public function setPrice($price){ $price = $this->price; } } //カート class Cart{ private $products = array(); public function addProduct($product){ $product->applyPriceDown(); $this->products[] = $product; } public function getTotalPrice(){ $total = 0; foreach($this->products as $product){ $total += $product->getPrice(); } return $total; } } $cart = new Cart(); //商品 $meet = new Meet(); $besitable = new Besitable(); $freezed = new FreezedFood(); //カートに商品追加 $cart->addProduct($meet); $cart->addProduct($besitable); $cart->addProduct($freezed); //現在の合計金額 $total = $cart->getTotalPrice(); var_dump($total); ?>
出力結果
日にちが29日の場合：700(肉:1000x3割引)+500(野菜:1000x半額)+1000(冷凍:割引無し) = 2200円 日にちが29日以外の場合：700(肉:1000x3割引)+1000(野菜:割引無し)+1000(冷凍:割引無し) = 2700円
placeholderの文字色を変える
フォーム欄の例文を表示するplaceholderはデフォルトでは薄い灰色の文字ですが、
これを直接"input{color:red;}"とやっても赤文字にはなりません。
なのでセレクタ名に疑似要素「::-webkit-input-placeholder」を当てて、文字のカラーリングを装飾します。
html
<input type="text" id="red" placeholder="疑似要素で赤文字に" size="140" style="width: 260px; padding: 10px; color:red;" >
input#red::-webkit-input-placeholder { color: #E32226; }
出力結果
＊htmlコード上に直接疑似要素を付けられない？ため、別記css上で文字色を着色しました。
また、webkitやmoz系は":(セミコロン)"二つですがmsは一つです。
