ファビコン
【ファビコン】
URLの前に表示されるマーク
ブックマーク(お気に入り)でも表示されますね～
これ、
favicon=favorite＋icon だったんですね！
まさにその名の通りなんだけど(^ー^;
ずっと、Winのソフトでしか作成できないと思い込んでいたのですが、
MacでもPhotoshopでプラグインを利用すれば作成可能だとか・・・
基本的には16px（ピクセル）四方の正方形で作るけれど、
ショートカットのアイコンでの表示もできる32pxで作る方がいいらしい。
ということで、さっそくPhotoshopで作ってみよう！
それから、最近Winもさわるようになったのでソフトをダウンロードして
Winでもチャレンジしてみます。
色覚障害者に配慮したカラーユニバーサルデザイン
「カラーユニバーサルデザイン」=CUDは、
色覚障害のある人にも情報が伝わるように配慮したデザインのこと。
今朝、新聞に載っていたので簡単にまとめてみました。
【ケース1】
銀行や病院の番号呼び出し表示が、
一般的に黒いボードに数字は赤の点灯、赤と黒は識別しにくいので、
番号が読み取れないで不自由している人がいる。
↓
数字を白色に点灯するものに変更することで解決！
【ケース2】
公共施設の防災マップは、避難所の区域が色で区分けされている。
色覚障害のある人には紫とピンクの違いが分からない。
↓
4色に絞り、白抜き文字を多用して見やすくした。
バリアフリーを意識することってとても大切・・・
＊カラー印刷物は、明るい色同士や暗い色同士の配色を避けること。
＊シンボルマークなどを使って分かりやすくする。
印刷物のデザインを考えるとき・・・
ホームページのデザインを考えるとき・・・
私に出来ることから始めよっ！！
色覚障害のある人にも情報が伝わるように配慮したデザインのこと。
今朝、新聞に載っていたので簡単にまとめてみました。
【ケース1】
銀行や病院の番号呼び出し表示が、
一般的に黒いボードに数字は赤の点灯、赤と黒は識別しにくいので、
番号が読み取れないで不自由している人がいる。
↓
数字を白色に点灯するものに変更することで解決！
【ケース2】
公共施設の防災マップは、避難所の区域が色で区分けされている。
色覚障害のある人には紫とピンクの違いが分からない。
↓
4色に絞り、白抜き文字を多用して見やすくした。
バリアフリーを意識することってとても大切・・・
＊カラー印刷物は、明るい色同士や暗い色同士の配色を避けること。
＊シンボルマークなどを使って分かりやすくする。
印刷物のデザインを考えるとき・・・
ホームページのデザインを考えるとき・・・
私に出来ることから始めよっ！！
WEBデザインスクール・5
WEBデザインのスクールで学んだことを覚え書きのつもりで
更新しているのですが、時間が経つと忘れてしまうし、
使わなければ思い出すことさえなく・・・なんだか虚しさを感じる今日この頃。
愚痴っぽくなってないで・・・
さてさて、「CSSファイルをどういう風に整理するか」ですが、
これが正しいというのではなく、わかりやすい分け方として、
1.ブラウザの設定をリセットするCSS（自分がよく使うもの）
base.css
2.サイトで共通のもの
common.css
3.各ページの独自に設定するもの（ページごと）
以上を一つのCSSフォルダに入れておくという考え方
では、では、ご紹介します。
私のbase.css・・・（こんなんでいいのかな(^^;）
*{
margin: 0;
padding: 0;
}
body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:13px;
line-height:1.2em;
}
ul,ol{
list-style:none;
}
table{
border-collapse:collapse;
border:none;
}
img{
border:none;
}
.mb05{ margin-bottom: 5px!important;}
.mb10{ margin-bottom: 10px!important;}
.mb15{ margin-bottom: 15px!important;}
.mb20{ margin-bottom: 20px!important;}
.clearfix:after{
content:url(pixel.gif);
display:block;
clear:both;
height:0;
}
.clearfix{display:inline-block;}
.clearfix{display:block;}
a{
text-decoration:none;
}
更新しているのですが、時間が経つと忘れてしまうし、
使わなければ思い出すことさえなく・・・なんだか虚しさを感じる今日この頃。
愚痴っぽくなってないで・・・
さてさて、「CSSファイルをどういう風に整理するか」ですが、
これが正しいというのではなく、わかりやすい分け方として、
1.ブラウザの設定をリセットするCSS（自分がよく使うもの）
base.css
2.サイトで共通のもの
common.css
3.各ページの独自に設定するもの（ページごと）
以上を一つのCSSフォルダに入れておくという考え方
では、では、ご紹介します。
私のbase.css・・・（こんなんでいいのかな(^^;）
*{
margin: 0;
padding: 0;
}
body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:13px;
line-height:1.2em;
}
ul,ol{
list-style:none;
}
table{
border-collapse:collapse;
border:none;
}
img{
border:none;
}
.mb05{ margin-bottom: 5px!important;}
.mb10{ margin-bottom: 10px!important;}
.mb15{ margin-bottom: 15px!important;}
.mb20{ margin-bottom: 20px!important;}
.clearfix:after{
content:url(pixel.gif);
display:block;
clear:both;
height:0;
}
.clearfix{display:inline-block;}
.clearfix{display:block;}
a{
text-decoration:none;
}
WEBデザインスクール・4
【WEBサイト制作-CSSのposition】
WEBページをつくるとき、
CSSでレイアウトを指定するのにかかせないのが
■ float：フロート
■ position：ポジション
スクールの先生は、
「この二つが自由に使いこなせるようになると、
たいていのWEBページのコーディングがラクになります」と・・・
その自由自在というのが意外と難しい(>_<)
先週習ったのは、position：ポジション
これは座標を指定することで配置するので、レイヤー的な使い方ができます。
またjavascriptと組み合わせることで動的な表現も可能になります！
まず覚えたいのは、
■ absolute：絶対配置（親要素の左上が基準位置）
例）position:absolute;
top:10px; ←上から10px
right:10px; ←右から10px
width:50px;
height:50px;
background-color:#336699;
・重なる順番を指定することができる【z-index】
例）position:absolute;
top:20px;
right:20px;
z-index:1; ←数値で順番を指示 ＊数値が大きいほど上
■ relative：相対配置（通常の位置からの指定）
・親要素に設定することで、その範囲内での指定ができる
↓こんな感じです
#wrapper{
width:700px;
height:700px;
background-color: #999;
margin:0 auto;
position: relative;
}
#box01{
width:200px;
height:200px;
background-color: #CCC;
position:absolute;
top:200px;
right:200px;
z-index:1;
}
#box02{
width:300px;
height:300px;
background-color: #333;
position:absolute;
bottom:50px;
right:50px;
z-index:2;
}
WEBページをつくるとき、
CSSでレイアウトを指定するのにかかせないのが
■ float：フロート
■ position：ポジション
スクールの先生は、
「この二つが自由に使いこなせるようになると、
たいていのWEBページのコーディングがラクになります」と・・・
その自由自在というのが意外と難しい(>_<)
先週習ったのは、position：ポジション
これは座標を指定することで配置するので、レイヤー的な使い方ができます。
またjavascriptと組み合わせることで動的な表現も可能になります！
まず覚えたいのは、
■ absolute：絶対配置（親要素の左上が基準位置）
例）position:absolute;
top:10px; ←上から10px
right:10px; ←右から10px
width:50px;
height:50px;
background-color:#336699;
・重なる順番を指定することができる【z-index】
例）position:absolute;
top:20px;
right:20px;
z-index:1; ←数値で順番を指示 ＊数値が大きいほど上
■ relative：相対配置（通常の位置からの指定）
・親要素に設定することで、その範囲内での指定ができる
↓こんな感じです
#wrapper{
width:700px;
height:700px;
background-color: #999;
margin:0 auto;
position: relative;
}
#box01{
width:200px;
height:200px;
background-color: #CCC;
position:absolute;
top:200px;
right:200px;
z-index:1;
}
#box02{
width:300px;
height:300px;
background-color: #333;
position:absolute;
bottom:50px;
right:50px;
z-index:2;
}
デザインの基本原則！
![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F41nvddaG9BL._SL160_.jpg)
『ノンデザイナーズ・デザインブック』
デザイン初心者には、勉強になる本。
デザイナーにとっては、当たり前のことなのかも(^ー^;
【四つの基本原則】
■ コントラスト
簡単に言うと“メリハリ”のことだと思う。
・書体
・色
・サイズ
・線の太さ
・形
・空き
これらを『はっきりと違わせること』
■ 反復
視覚的にわかりやすく迷わせないということ。
・一貫性を持たせるための要素
・箇条書きにしたり、罫線を入れたりして一体化させる
■ 整列
よく言われていることだけど、
・見えない線を意識すること
■ 近接
グループ分けが見た目ではっきり感じられること。
・同じ情報をひとくくりにする
・直感的に読者が理解できる配置
WEBデザインスクール・3
なかなか更新できないもんだな～
仕事の関係上、ブログを四つ持っている。
最近、Twitterも始めた・・・
なんだか忙しい f(^ー^;
WEBデザインスクールでの新ネタ！！
これは私にとっては画期的だ～＼(^O^)／
ナビゲーションなどでカーソルを合わせたときに色を変化させるのに、
画像を二つ用意していたが、
これなら一個でいいし、とっても簡単！
下記の設定なら、
カーソルを合わせると元画像の70％の透明度になるのだ。
パーセンテージはバックの色にもよるので、
自分なりの設定で(^-^)
a:hover{
opacity:0.7;
filter:alpha(opacity=70);/*IE用*/
}
仕事の関係上、ブログを四つ持っている。
最近、Twitterも始めた・・・
なんだか忙しい f(^ー^;
WEBデザインスクールでの新ネタ！！
これは私にとっては画期的だ～＼(^O^)／
ナビゲーションなどでカーソルを合わせたときに色を変化させるのに、
画像を二つ用意していたが、
これなら一個でいいし、とっても簡単！
下記の設定なら、
カーソルを合わせると元画像の70％の透明度になるのだ。
パーセンテージはバックの色にもよるので、
自分なりの設定で(^-^)
a:hover{
opacity:0.7;
filter:alpha(opacity=70);/*IE用*/
}
★souffleと１０組の作家展
まだ少し先だけど・・・
イラストレーターのお友達が瓶に絵を描いたモノを
グループ展に出展します。
★souffleと１０組の作家展
http://jonetu.sakura.ne.jp/souffle.html
彼女は小柄なのに、とてもバイタリティあふれていて、
私にいろいろと教えてくれます。
歳は一回りも年下なんだけどf(^ー^;
☆yoshico_kawakami HP
絵も可愛いし、もちろん彼女自身もかわいい♪
前に、うちに遊びに来てくれたときは、
次女にけん玉を教えてくれました～
souffleと１０組の作家展の案内はこちらにも ↓
yoshico_kawakami illustration blog
イラストレーターのお友達が瓶に絵を描いたモノを
グループ展に出展します。
★souffleと１０組の作家展
http://jonetu.sakura.ne.jp/souffle.html
彼女は小柄なのに、とてもバイタリティあふれていて、
私にいろいろと教えてくれます。
歳は一回りも年下なんだけどf(^ー^;
☆yoshico_kawakami HP
絵も可愛いし、もちろん彼女自身もかわいい♪
前に、うちに遊びに来てくれたときは、
次女にけん玉を教えてくれました～
souffleと１０組の作家展の案内はこちらにも ↓
yoshico_kawakami illustration blog
WEBデザインスクール・2
引き続き、『WEBデザインスクール』2回目の復習です。
テーマは【セレクタを使いこなす】でした。
コーディングをされている方は、当然！と思うかもしれませんが、
まず基本中の基本、
■ HTML+CSSは順番が大事！
じゃ、順番通りでいいか・・・
自分でも気になっていたのが、
見出しのｈ1より上にｈ2やｈ3を置くことはできないのか？？？
↓
レイアウトでは、一番上に配置して
コーディングでの順番では下に持ってくる
↓
それをCSSで設定するんですね！
この内容をとてもわかりやすく解説してくれているサイトがあったので、
紹介させてもらいます。
Web Desing RECIPES
Noriさん、ありがとうございます。
スクールに行くと、自分が全く考えもしなかったことを気づかせてくれるので、
とても有意義な時間です。
つくづく、独学でWEBをされている方ってスゴイ！と思います(^○^)
テーマは【セレクタを使いこなす】でした。
コーディングをされている方は、当然！と思うかもしれませんが、
まず基本中の基本、
■ HTML+CSSは順番が大事！
じゃ、順番通りでいいか・・・
自分でも気になっていたのが、
見出しのｈ1より上にｈ2やｈ3を置くことはできないのか？？？
↓
レイアウトでは、一番上に配置して
コーディングでの順番では下に持ってくる
↓
それをCSSで設定するんですね！
この内容をとてもわかりやすく解説してくれているサイトがあったので、
紹介させてもらいます。
Web Desing RECIPES
Noriさん、ありがとうございます。
スクールに行くと、自分が全く考えもしなかったことを気づかせてくれるので、
とても有意義な時間です。
つくづく、独学でWEBをされている方ってスゴイ！と思います(^○^)
WEBデザインのスクール
昨日は、WEBデザインのスクール（2回目）でした。
今、どんなことを勉強しているかというと
CSSマスタークラスで、
いかに効率よくCSSを使いこなすかというところに的を絞ったコースで勉強中。
先週から始まったのですが、
1回目は「CSSの基本概念」
・上下関係（順番が大切）をきちんと知る
・CSSの記述場所
・CSSファイルの上手な分類
何気なくできると思っていても、
いざスクールに行くと知らないことの多さに愕然としますね～f(^ー^;
先生は、Dreamweaverの裏技なんかも教えてくれるので、
新しい発見ありで楽しいです。
h1タグを打つときに「コマンド+１」で出てくるとか・・・
知ってる人はしってるんだろうけど(^^ゞ
CSSの記述場所では、
外部ファイルのリンクの並記や＠importとの合わせ技！？
読み込む順番などなど。
＠charset←これなんて読むか知ってますか？
「キャラセット」でした。
独学では、何となく知っていても読み方の知らないモノって多いですよね。
エンコーディングでは、
"Shift_JIS"と
"UTF-8"
どっちが正解！？
みたいなところがありますが、
先生は、"Shift_JIS"を奨励してはります。
日本国内で見てもらうサイトとの前提だそうですが・・・
そんなこんなで、週に一回のスクールですが、
いい刺激とスキルアップには、とても役立っています(*^^)v
今、どんなことを勉強しているかというと
CSSマスタークラスで、
いかに効率よくCSSを使いこなすかというところに的を絞ったコースで勉強中。
先週から始まったのですが、
1回目は「CSSの基本概念」
・上下関係（順番が大切）をきちんと知る
・CSSの記述場所
・CSSファイルの上手な分類
何気なくできると思っていても、
いざスクールに行くと知らないことの多さに愕然としますね～f(^ー^;
先生は、Dreamweaverの裏技なんかも教えてくれるので、
新しい発見ありで楽しいです。
h1タグを打つときに「コマンド+１」で出てくるとか・・・
知ってる人はしってるんだろうけど(^^ゞ
CSSの記述場所では、
外部ファイルのリンクの並記や＠importとの合わせ技！？
読み込む順番などなど。
＠charset←これなんて読むか知ってますか？
「キャラセット」でした。
独学では、何となく知っていても読み方の知らないモノって多いですよね。
エンコーディングでは、
"Shift_JIS"と
"UTF-8"
どっちが正解！？
みたいなところがありますが、
先生は、"Shift_JIS"を奨励してはります。
日本国内で見てもらうサイトとの前提だそうですが・・・
そんなこんなで、週に一回のスクールですが、
いい刺激とスキルアップには、とても役立っています(*^^)v
トマト
トマトが好き。
トマトの季節ではないけれど、
我が家では、年中トマトが冷蔵庫に・・・
「トマトを食べるとお肌がすべすべに」という話を聞いたことがある。
確かにうちは、みんな肌がすべすべかも。
今年は、庭でお花や野菜を育てる予定。
次女が、『お庭計画書』なるものを考えている模様・・・
春が来るのが楽しみだな♪