Photoshop-3日目

今週の金曜日は〜〜〜〜〜

休みじゃ〜〜〜〜〜〜〜〜！！！！！！！！

レイヤーについて

レイヤーパネル

概念としてはイラレと同じで、複数の透明なフィルムを重ねてひとつの画像としています。

右側にあるパネルの、初期設定のままなら下の方にあるかな、引っ張り出して見てね

目のマーク部分でレイヤーのオンとオフができます。出したり消したり。

このときの背景部分は市松模様じゃなくて透明です〜絵描きさんならわかると思う

alt+クリックで単一レイヤー表示（一枚残し）と、全レイヤー表示（全表示）を切り替えられます。

Photoshopは、選択したレイヤーのみしか編集できません。

新規レイヤー作成

レイヤーはここでつくれるよ

ctrl+クリックで背面にも作成できるよ

何かを書き込みたいときは、新しいレイヤーに書き込んだほうがいいかも

 
コピーする

レイヤーを新規作成のところにドラッグで持っていくと増えるよ（コピー）

実は移動ツールを選択した状態でalt押しながら、レイヤーをドラッグしても増えるよ（裏技）

ctrl+クリックで選択レイヤーを変えられるよ

名称変更

名前のところダブルクリックで、レイヤーの名称が変わりますピ

レイヤーパネルでドラッグして前面とか背面とか入れ替えてね

ちなみに、レイヤーの入れ替えを紹介したけど、
背景レイヤーだけは粘って変えられない仕様になっている

背景レイヤーと通常レイヤー

背景レイヤーは鍵マークみたいなのついてます

他と違う挙動あり

○重なり順番が変更不可
○消しゴムツールで透明に消せない

たとえばJPEG形式って知ってますかね

この形式の画像は消しゴムで消しても透明になりません、背景色が出てきます

その理由は、JPEG形式には透明という概念がないからですねー

背景レイヤーは同じ考え方らしい

なので、背景レイヤーのみは消したら背面の背景色が出てくる仕様になってます

では背景レイヤーを通常レイヤーに変換しましょう

ダブルクリックで簡単に通常レイヤーになりまする 

レイヤーの結合

見えにくいけど二つのレイヤーをctrl使いながら選択して、右クリックしたら結合メニューでてきます

レイヤーを結合すると利点もあるよ

○データが軽くなる
○移動と変形が楽
○フィルター加工もできる

でもデメリットもあるよ

○一枚にしたレイヤーは分解不可能

覆水は盆にかえりませんよね

そういうことです

ちなみに、

alt+「レイヤーを結合」をクリックで、
元のレイヤーを残したまま合体できる。

レイヤーのグループ化

この二つを選択して、赤い枠内のフォルダのアイコンをクリックすることでこの二枚をグループ化します。

この長所は、

○グループ名を選択して編集すると、そのグループ内のすべての要素について一気に編集できる（レイヤーリンクと同じ）

○グループ名を複製すると、その中身も含めすべてを一気に量産できる。looks like ジャニーズ

ここを選ぶことで編集をレイヤーかグループか選べるよ

レイヤーのロック

ロックのあれこれを説明します

透明ロック

画素部分だけに描画
透明部分には描画されません

透明部、画素部の描画をロック

移動は可能

移動のみロック

描画は可能

移動、描画すべてロック

重なり順のみ変更可能

Photoshop-2日目

最近500mlのコーラを飲みきれんくなって、「これが大人になるってことか」って思った

ツールの続きします

Photoshopツール

スポイトツール

色をマネっこするやつ

これ

めっちゃ楽しい

 欲しい色のところをクリックするだけで簡単に使えます。

てのひらツール

自由に動かせるやつ。

これ

他ツールを使っているときでも、スペースキーを使うと手のひらに切り替わる！

前回のズームと、手のひらのショートカットはイラレでも同じなので覚えておく

回転ビューツール

絵を描くとき、紙を回す感じのやつ。

手のひらの長押しで出てきます。

オプションバーのビューの初期化で元に戻るよ

ブラシツール

ピクセル描画に使います。
本当は筆圧を認識してくれるペンタブを使うのがよかばってん、わし持ってない

これ

描画色を描画色ボックスまたはスウォッチからえらぶ

描画色のところのダブルクリックでカラーピッカーのウィンドウが出てきます。

ここクリックでブラシのサイズ変更できます。

落書きしすぎても、ファイルメニューの復帰で復活します。

編集した画面を保存せずに、再度開いてくれる。

保存はしないのがミソよ

ちなみに、「」←このキーでブラシサイズが変更できる便利機能。

赤枠部分「硬さ」変更で、ぼかしのあるなしが好きに調整できます。

同じ100pxでも輪郭が違うとかなり変わって見える

 オプションバーから不透明度も変更可能

 ちなみに流量を変更するとかわいくなる

プリクラで言うとネオンペンみたいなかんじね

ちなみにブラシツールでは、

数字を押すとワンキーショートカットとして反映されます

不透明度→数字キーで好きな数字を入力
流量→シフト+数字（テンキーだめかも）

あとこの赤枠の部分に隠れスライダーがあるよ

ここの赤いところで描画色と背景色を入れ替えられます

Dキーを押すと描画と背景色がデフォルトに戻るよ（黒と白）

で、で、色を変えるのにさっきはカラーピッカーを使いましたが、今回はスウォッチを使って変えてみましょう

ここの三本線を押すと

これが出てくるんで、好きにパレット変更をどうぞ
ちなみにスウォッチの初期化でリセットできます。

カラーパネルもこの三本線でいろいろできるんでやってみて（説明が若干だれてきた）

いざ描画とせん、我行かんとす（？）

 画像は載せられませんが、

雪を降らせてくださいって言われたけど、何回みてもカビにしか見えん、なんかごめん

操作の取り消しについて

Ctrl+zで戻れるのは直前のひとつの操作のみ。連打すると消えたり出てきたりします。

連続で戻りたいときは

alt+Ctrl+z

また、進みたいときは

Shift+Ctrl+z

いやでもぶっちゃけヒストリーパネルのほうがわかりやすいよ

ウィンドウ＞ヒストリーでちっさいパネルが出て来るんでそれつかおう

ちなみにこのヒストリーは50個までしか覚えてないらしいので注意
50人前の元カレまでしか覚えんらしいよ
上等ですね！よくやった

ヒストリーブラシツール

ヒストリーパネルで指定したヒストリーブラシソースの画像をペイントするツールです。

１、まずはイメージメニューから白黒で写真を遺影にしてやろう

２、ウィンドウメニューからヒストリーを開こうではないか

３、ヒストリーブラシを使って復活させようではないか

アートヒストリーブラシはヒストリーブラシの長押しで出てくるよ

修正する

修正できて、勝手に周りになじんでくれて、この上ねえな

これ

フォトショといえば修正なんですが、偏見でしょうか

スポット修正

修正ツールで修正したい箇所をクリックすると

すっげ

 （画像なしなので音声のみでお楽しみください）

これはですねぇ、このオプションバーが大事なんですねぇ

ここの種類ってとこなんですが、

○近似色に合わせる→修正範囲の近くにあるピクセルを使って修正
○テクスチャ作成→修正範囲内のピクセルを使ってテクスチャを作成
○コンテンツに応じる→空気読んで回りにあわせる

Alt+クリックでクリック元の色を吸い上げて修正します。人間の肌とかはこれがいいかも。

修復ブラシ

人を若返らせたい

シワとかクマとかね

アイドルは大体フォトショ説

Altで修正ポイントを吸い上げて、修正を繰り返すと、、、

、、、、、、、

（人のしわを修正しています）

ド下手

これはやばい

（音声のみでお楽しみください）

マジでセンスない

クリーチャーができた

でも正直ここまで知ってしまうと芸能人とかもうマジで信用できない、お姉さん悲しい

パッチツール

修復ツールのところ長押しで出てきますよ

これは範囲を選択して修正するツールです。

ほかのところから修正素材パクって来るかんじ。

 やってみればわかる

コピースタンプツール

なじみ機能無しの修正ツールです。

これはなじみがないので、背景色まで忠実にコピーします

 

 

 

ゆがみフィルター

CC2015からの新機能。恐ろしいですばい、これは。

ゆがませたい範囲を選んで、フィルターからゆがみを選択。

っしゃ〜〜〜〜やれやれ

（ゆがませています）

うっわ

（ゆがませています）

いや、マジ誰

〜終〜

Photoshop-1日目

のろのろせんでさっと消えてくれ（台風）

あとばりばり身内ネタなラインスタンプができて大喜びしています

Adobe Bridgeの使い方

今回使っていくバージョンはフォトショCC2015。

Adobe Bridgeとは

フォルダ内の一覧をさっと確認してフォトショまたはイラレで開くためのソフト。

文字通り、フォトショ、イラレにおいてフォルダとの橋渡しになる。

起動したら大体こんな画面。

使用するフォルダはこんな感じでお気に入りに移しておきましょう。

写真を選別する

写真のチョイスやジャッジの力は完全に個人の力量です。
Bridgeで可能なので、やってみる。

写真を選択し、ラベルメニューを開く。

上のバーのところにあります。

対照をクリックで「選択」する。

赤色が第一候補、黄色は第二候補のラベル。ショートカットキーでさくさく進めましょう。

候補が何たらのほかにも、星いくつみたいなレーティングもできるので活用しましょう。

左端のこのウィンドウで、ラベルや選択を確認できます。写真の加工に入る前に、まずは取捨選択を行うのが大事らしい。

ちなみに、自分で写真を撮るときはいっぱい撮っとけって言ってました。

右がわプレビュー画面の写真にカーソルをのせると、「ピン」と呼ばれるピント確認ができます。つまり拡大。虫眼鏡みたいなのが出てきます。

写真選択のコツ

○ピンとこないカットは捨てる。80％以上削れる。
○敗者復活は無し。まあまずスタメンにはなれない。恋愛と同じ。なんとなく良いはよくない。
○残りの10％〜20％でBridgeでチョイスし、レーティングする。

Bridgeでのデータの捨て方

消したいのを選択して

Deleteでﾊﾟｧﾝ！！！！

消すのが怖い人は、新規で削除候補みたいなフォルダを作っといて、移動させましょう。

----------------------------------------------------------------------------------------

グラフィックソフトウェア

概要

Photoshopとは？
Illustratoとは？

フォトショもイラレもグラフィックソフトウェアと呼ばれる分類です。

Illustrator→ベクトル系ソフト
Photoshop→ラスター系ソフト

ラスターとは、画素加工ソフトのこと。
デジタル写真の加工ってことです。

ベクトル系ソフトは、パスを使って描きます。

最近ではお互いにお互いの機能を実装しつつあるようですが、状況に応じて使い分けてねだって〜

そしたらフォトショを開きますゥ〜

右側のメニューのところを you say 「パネル」

パネルは自由に引っ張り出したりも可能。すきにカスタマイズしていいらしい

ワークスペース

ンッンー♂

さっき言ったように、パネルは引っ張りだして好きなようにしていいです。
はじめは初期設定。

散らかした後に初期設定に戻したいときは、

１、オプションバーの右端のワークスペースメニューを「初期設定」にする。

２、ワークスペースメニューより、「初期設定をリセット」を選択。

上にある横向きのがオプションバー

また、独自のパネル設定を保存したいときは、

ここで名前をつけて保存。

なんかも〜〜〜〜〜ここまででかなりしんどい〜〜〜〜〜〜〜

ツールパネル

画面の左側にいろいろあるのがツールパネル

これを押すと二列になるよ

今からはツールの使いかたをみていくよ〜〜って

ツールを使うときは、

１、ツールを選択
２、オプションバーを確認する
３、使用する

この流れを守ってねだって！！！

ズームツール

クリックした場所を数％〜3200％まで拡大します。でも拡大したらめっちゃ画質悪い。ここがイラレとの違い。イラレはどんだけ拡大してもむっちゃなめらか。

これ

拡大、縮小をします。

以下はオプションバーだけ切り取った画像

ウィンドウサイズを変更
→拡大縮小にあわせて、ウィンドウサイズを自動で変更してくれる。

全ウィンドウをズーム
→複数の書類を一気に拡大縮小してくれる。通常はオフを推奨。

スクラブズーム
→画面左へ引っ張ると縮小、右へ引っ張ると拡大

ちなみによく使うショートカットは、

Ctrl+1=画像の100％表示
(ブラウザ表示と同じサイズ)

alt＝逆操作
拡大モードでalt押しながら操作すると縮小になるってこと

Ctrl+0=画像の全体表示
（無理やり収めるよ）

で、拡大縮小してあそんだ

めっちゃ拡大したらなんかメッシュみたいなん出てきた

ピクセルグリッドというらしい。

[表示メニュー]→[表示・非表示]→[ピクセルグリッド]のチェックをオフにすると消えるよ

作業するときはCtrl+0で全画面表示にしてのびのび作業しようね

webマーケティング概論１−２

八代亜紀の舟唄まじかっけ〜〜〜〜〜〜〜

はい。

前回の続きです。

webの価値を考える

今回はwebの価値を考えます。

webはターゲティングメディアです。webを使う人はSNS等とは違い、目的を持って利用する人がほとんど。

なので、

webサイトを利用する人が何を目的としているかを考える。

その価値を考えて、理解しないと提供もできません。

では、メリットとデメリットを考えていきます。

-------------------------------------------------------------------------------

web利用のメリット

○無料（広告費でまかなえる）
○手軽（手軽でなきゃwebじゃない！）
○誰とでもつながれる
○見やすい（デザイナーがいるからね）
○匿名性（良くも悪くも）
○遠くのものも簡単に入手
○エコ
○豊富な情報量
○すぐに使える
○共有が可能
○比較が簡単
○使う人を選ばない
○ログが残せる（蓄積される）
○リアルタイム
○発信、交換もできる
○GPSなど

めっちゃ挙がった〜グループワークやべえ

ここで挙がったことの大半は、

みんなが当たり前だと思って居ること。

しかし、

応答の速さや、検索ができることなどは挙がりませんでした。

なぜなら、みんなが普段、当たり前だと思って居るからです。

当たり前のことが当たり前にできなければ、利用者は減っていきます。

では反対に、デメリットを考えます。一般ユーザの不満が大爆発します。

web利用のデメリット

○プライバシーが守られない
○情報が豊富過ぎて選べない
○検索しないと見てもらえない
○通信料など見えないお金がかかる
○端末によって見え方が一律ではない
○素人には信憑性の判断が難しい
○ウイルス感染
○電波や電源がないと使えない
○ネット依存
○保存され辛い
○後回しにされやすい
○シニアには難しい
○幼い子の利用リスク
○決済にハードルが低い
○スマホばかりでキーボードがたたけない
○「見て」「触って」ができない
○「軽い気持ち」で取り返しがつかない
○読みづらい
○埋もれやすい
○ブルーライト、疲れ目

これもすごい数wwwwww

メリットもデメリットも死ぬほど挙がりましたが、
デメリットを解決する策を考えます。これもマーケティングのうち。

デメリットの解決策を考える

面接みたいですよね。あらかじめ質問を予測しておいて、答えを準備する的な。

例を挙げていくつかピックアップします。

○保存されにくい→繰り返し告知する

簡単なのは広告。それも、出す相手を考える。

たとえば、過去にそのサイトを訪問したことある相手を解析し、ピンポイントで表示します。
メルマガも、必要な内容であれば一日数度送る。

そのしつこさが許されるのが、webです。

でもしつこい男は、嫌われます。

○比較検討されやすい→選ばれる理由を考える

比較や検討が激しいweb業界。ここで勝ち残るには何が必要かを考えます。
お客さんが何を理由に選んでくれるのかをしっかり認識することが重要。自分の売り出したいものの価値はどこにあるかを理解することが大切。
「なぜそれを選ぶか？」を認識しよう。

○可読性が弱い→レイアウト、フォント、表現力

写真やロゴをうまく使うことや、商品名や原産をわかりやすくするなど、まずはそのサイトに長く居座ってもらうための工夫は必要です。
一人で搾り出すのもよし、グループで話し合うのもよし。

○実物が見られない→豊富な情報、表現力

たとえばアマゾンの「30日間返品ok」など。

お客さんが商品を購入する上でのデメリットやリスクをすべて払拭するような仕組みになっています。いや、でもアマゾンのリスクが高くない？これ。

○後回しにされやすい→背中を押す

なんだかな〜実際にお店に買いに行くわけじゃないんで、あんまり購買意欲が湧かないのが現実らしい。

「残りわずか」「あと2席」など、後回しにできない理由を考えることが大切。
アパレルと同じで、背中を押す工夫がwebにも必要です。でもそのぶん、背中を押すことに失敗した時のリスクは甚だしいらしい。こわ。

マスメディアは不特定多数ですが、

正反対に、webはターゲティングメディアです。たぶんさっきも言った。
不特定多数ではなく、性別や年齢、エリア、価値観など、どの人をターゲットにするかを考える必要があります。

競合が少ない場所をターゲットに選ぶことや、ファーストビュー（スクロール前のページ）でいかに心をつかめるかも戦略の一つになってきます。

最後に、webページの構成をざっくりと考えます。

webページの構成の仕方

例えば、ある通販サイトではこんな作りになってます。

トップページ
↓
一覧ページ
↓
詳細ページ
↓
カートページ
（このページのファーストビューで”買う”ボタンがないと、通販サイトとは判別されないようです。）
↓
フォームページ
↓
確認ページ
↓
完了ページ（サンクスページ）

通販サイトの場合、完了ページにいくことがコンバージョン（成果）になります。

また、

どのページをメインに集客するかで、お客さんの動向が伺えます。

トップページにくるお客さんは検索サイトで指名検索をしている。
もしくは、検索したい内容のキーワードが合致しているので、競争率は低いが、購入までのステップが長い。

一覧ページにくるお客さんは、カテゴリー名で指名検索。

詳細ページの場合は、商品指名検索。
商品指名をする場合が、いちばん購入までが近い。しかし、「他のサイトで扱ってないかしら」という理由で、離れる人もまた多し。

ざっくりとですがこんな構成。素人には違いがわかりませんでしたが、今後着目点を変えて、マーケティングのしてんからネットサーフィンするのもありやなって思いました。

結局何が言いたいかというと、

感じるな、考えろ。

webマーケティング概論１−１

 昔腹筋を割っていましたが、最近は綺麗に脂肪が乗って、

脂肪がシックスパックです。

webマーケティング概論

全部で５回。連続ではなく、飛び飛びでやります。

久々に学生感覚の座学なのでめっちゃ新鮮しかし最後まで集中できるのか

webデザイナーとしてホームページを作るとき、マーケティングの視点からも見ていけるようになろうねという授業。

サイトやホームページを作成した後、
どのようにして成果を挙げるかを考えてねみたいなね。的なね。

どんなホームページにも成果があります。

作って成果を挙げて、初めて価値が生まれる。売り上げとかアクセスとか。

ホームページを作るとき、こんな風にすれば見てもらえるんだということについて学ぶ講義でした。

講義は全5回、今回は1回目のwebマーケティング！

１、webマーケティング
２、webディレクション
３、web解析
４、webプロモーション
５、SEO

---------------------------------------------------------------------

webマーケティング概論

第一回

webマーケティング

成果を挙げる

まず、webサイトの種別を考えます。

○ネットショップ
○ECサイト
○コーポレートサイト（企業）
○ポータル（玄関、入り口）サイト
○ブランドサイト
○ヘルプサイト
○検索エンジン
○まとめサイト
○Q&Aサイト
○SNS

では、これらのサイトにおける成果とは何でしょうか？

たとえばポータルサイトの成果（コンバージョン）は、
お客さんがそのサイトを使うことにより、スムーズに物事が進むこと。

コーポレートサイトでは、
直接的には売り上げの数字にはつながりませんが、
会社の信頼や、ちゃんとした企業かどうかなどをみることが目的です。

ブランドサイトでは、お客さんとそのブランドのコンタクトポイントを発生させる。セブンヒッツ（7回の接点で意識し始める）の法則に則っています。

検索エンジンは、googleやyahooのことです。これは広告やバナーで収益を得ているようです。新機能を実装し、リニューアルしながら、広告を載せる。
というか、大体は広告が収入元っぽいですね。

で、上に挙げたみたいな、サイトを作るとき、最終的にどこの数字があがれば成果なのかを事前に調べておくことが大切です。

「Google Trend」を使うと、一般的なキーワードを用いて簡単に検索の時期が見れます。
Google Trend、ググったら出てきます。

こんな感じ。
「忘年会」というワードでの結果。

このグラフで、一般ユーザーによるgoogle検索の解析ができるのです。

---------------------------------------------------------

「マーケティング」とは？

ここで問題です。

Ｑ：「裸足の島があります。あなたは、この島に靴を売りにいきますか？」

これをグループで考えました。

ちなみに、クラス内でも

売りに行くという人がほとんど！まあ予想通りですね。

では、

Ｑ：「裸足の島があります。あなたは、この島に靴を売りにいくことになりました。まず初めに何を懸念しますか？」

ここで挙げられる懸念を事前に対策しておくのが、マーケティングというものの本質的な考えだそうです。

○先に調査をして売りにいくか行かないかを判断する
○データを取っていくかいかないかを判断する

ここがメインの考え方になります。

調査すべきデータは、

○島の人口
○男女比
○経済面
○年齢
○なぜ靴を履かないのか？
○どういう靴を持っていくべきか？
○競合の存在
○住んでいる場所、売る場所

挙げだすとキリがないですが、つまりこういうことらしい。

考えるな感じろは通用しない世界なんだって〜( ◠‿◠ )

で、マーケティングを要約すると、

3Cを考えること。

Customer-お客さん（年齢層は？性別は？etc）

Competitor-競合（ライバル会社は居るか？どのように対抗して行くか？etc）

Company-自社（メリットはあるか？自社の技術で実現可能か？etc）

この三つを抑えて調査することが大切らしい。

新しく何かを進めるとき、設計の段階でこの３つに着目できるかで大幅に変わってくるようです。

反対に、これらを無視して進めるやり方を、

KKKDという。

K-カン
K-好み
K-経験
D-度胸

わし完全にこっち派やん〜〜〜

このKKKDで物事を進めると、あまり成果は出ない。

また、客先でプレゼンするときに、なぜ？と聞かれたときにカンとか好みとか言ったらやばいので答えられない。

いまだにこういった企業は多いそうで、
つまり事前に調べたデータに基づいた考えで設計をすることが大切。

余談ですが、最近はサイトやイラスト等、技術における製作単価はかなり下がってきています。

その理由として、ひとつはCMSの普及。

CMSとは、コンテンツマネジメントシステム。ワードプレスやECcubeなどがそうです。

無料、もしくは安価で提供されている、テンプレートや便利なサイトが出てきたことでなかなか技術者の立場は肩身の狭いものになってきて居るらしい。

また、競争相手が増えてきています。製作する人が増えている。

フリーランスや、海外の人など。

それとね、

「友達に技術の安売りをしない。」

これに尽きます。本当に。

後半へ続きます。

Photoshopスタート！！

前回の更新からかなり経ちました。

HTMLとCSSは、

無事に全工程を終え、テストも済み、

最近はポートフォリオやwebサイトを作るのに勤しんでおりました。

すでにいくつか下書きしてますが、まだまだブラッシュアップが必要ですね。

で、大きく話は変わりますが、

本日よりフォトショに入ります。

Photoshopとは

現在のバージョンはCC2017

デジタル加工（画素加工）ソフトの最高峰。

フォトショップとか正直、買ったはいいけど使い方わからんくて放置してる人なんかも多いんじゃないでしょうか？？

一緒に頑張っていきましょう！！

最終的にはバナーを制作できるようになるまで頑張ります。

-------------------------------------------------------------------------------------

ど素人がはじめるPhotoshop！！！

カラープロファイルをweb用に設定する

まずは初期化をして、セッティングを始めます。

カラープロファイルをweb用に設定します。
これは出力に使うモニターに適切な色を扱うための設定らしい（？）

[編集]メニューから[カラー設定]を選択します。割と下のほう。

この部分をWeb・インターネット用−日本にします。

この設定では、色領域がsRGBになります。

sRGBとは、
○マイクロソフト社が定めた色空間で、ほぼすべてのモニタで完璧に再現できる。
○表現できる色の範囲が狭い
○ざっくりとしか色が表現できないので、プロ向きではない。

違う設定のカラープロファイルでデータを受け取ることが後々あると思います。
その場合はダイアログが出るんで、臨機応変にしてね。キャプチャがないので説明が
むずい！！！

画像の保存時はカラープロファイルを埋め込むことを忘れないようにしましょう。これも後でキャプチャつきで説明します。

--------------------------------------------------------------------------------------------

環境設定をweb用にする

[編集]→[環境設定]→[インターフェース]

さらにインターフェースの中のワークスペースを選択します。

赤枠のなかの二つのチェックを外して、

パフォーマンスで赤線の部分が70％超えてないか確認します。
これが70%超えていると、PC内のメモリの70%以上をフォトショに食われるということで、かなり重くなるそうです。

単位、定規についてはピクセルを指定。

 グリッド線についても１０ピクセルの１０分割指定です。

なんかよくわからんけど、こういう設定にしたらいいよとのことです。

後々わかってきたらまたブログあげるんで、

これからはフォトショメインに頑張っていきます。

HTML/CSS-14日目

横組みシンプルメニューを作る
CSSもかなり進んできました。

はよフェス行きて〜

-------------------------------------

CSSのプロパティで、displayというものがあります。その中で特に混同しやすい
inline-blockとinlineについて考えます。

inline-blockとinlineの違い

inline-block

一言で言うと、インライン要素のように使えるブロック要素。幅や高さを指定できる。

inline

インライン要素。幅や高さは指定できない。

この二つの共通点は、

ブロック要素のように、ブラウザの左端から右端まで領域を取らないこと。
また、floatしなくても勝手に左からつめて並びます。

今回はブロック要素にfloatの方法ではなく、
inline-blockを使って横並びメニューを作ります。前回より圧倒的簡単。

完成系はこいつです。

作っていきます。

横組みリストメニューを実装する

HTMLはこれです。
項目のみのリスト。

CSSはまず、ブラウザのオート余白を消します。これ毎回しましょう。

ulに対し、リストのマーカーを消します。

リストの内容のスタイルを指定していきます。

文字の色を指定し、
hoverを指定します。

完成です。

項目2のところにカーソルを載せています。
hoverプロパティが効いてます。

inline-blockがわかりやすいように枠線をつけてみました。

この赤い枠線がinline-blockの持つ領域です。floatを使わなくともボックスが横並びになるのがわかります。

ちなみに、hoverプロパティを使ってこんなこともできます。

このコードの赤線の部分。

transition:0.5s;

これで0.5秒かけて変化するということを指定します。

上の

.Atype ul li a
の中のtransitionは、hover後の変化を指定しています。

下の

.Atype ul li a:hover
の中のtransitionは、hoverしたときの変化を指定しています。

これをブラウザでやってみると、

この項目５にカーソルを載せると、

0.5秒かけてこうなります。

カーソルを離すと、また0.5秒かけて元に戻ります。

まだまだアニメーションプロパティはありますが、また今度！