Yasumasa's Portfolio

未分類

オススメサイト

ダフォントドットコムでフォントを探す。

非常に勉強になるサイト
CODE PREP
http://codeprep.jp/

nipponcolors.com

動画素材
http://mazwai.com/
動画素材
nhkクリエイティブライブラリー

ダウンロードしてきた動画がmp4じゃなかった場合
アイムービー
windowsならムービーメーカーでもエンコーディングできる
解像度も比率も変更できる

にじログの人気ページの中の
http://nijilog.info/
画像素材のページ
これの良いところは画像がデカイこと
素材は大きいものを用意するのが基本
http://www.morguefile.com/archive/

ping24が一番高品質
16対９
横幅1400px

pingをすごい圧縮してくれる
TinyPNGがいい
ヘッダー画像とすごいでっかい画像のときだけやれば良い
https://tinypng.com/

イケテルサイト
http://www.ikesai.com/

ここはヘッダーの素材サイト
http://www.twitterimagesheader.com/

人型ピクトグラム
http://seo.siyo.org/webcustom/seo11050/

HTML5 css3のサポート状況が分かる
http://fmbip.com/litmus/

css3のボタン作成便利サイト
http://colorzilla.com/gradient-editor/
7色と

http://h2ham.seesaa.net/

ブラウザに応じてcssを振り分け安くするため、htmlにclass名を付与してくれる
http://modernizr.com/

www.flapism.jp

超良いサイト実際に開発する人向けサイト
webクリエイターボックス
http://www.webcreatorbox.com/

コリス
http://coliss.com/

2014年11月23日 11:40 AM| カテゴリー：未分類| コメント(0)

jQuery

jQueryで画像を挿入する場合
html <p id=”first”>画像が前に入るよ</p>
jQuery $(“p#first”).prepend(‘<img src=”flower.jpg”>’);
シングルコーテーションを使う。
ダブルコーテーションとシングルコーテーションの両方を使って、画像を配置する。

jQueryは最新のバージョンのものを選べば良いというものではない。
バージョンによって動かないものもある。

ライブラリーとはそういうこものなので全部覚えなくてよい

divでクラスかＩＤつけたら、floatを一個つけても他にはかからないので、すべてにfloatをかける。例jQueryのフランス国旗

jQueryで
ボタン一つでテーブルの上に料理が出てくるようにする。
クリスマスツリー

freamwork.js
サムネイル　200×133　の画像
大　600×400　の画像
画像は二つ必要

jqueryを使う場合スクリプトをgoogleライブラリーから持ってくると思うがその際、http:を忘れると動かない
<!–http:を忘れると動かない–>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
fancybox高機能な割りに簡単
http://fancyapps.com/fancybox/
１，２があるが２は商用駄目１はok
Fが大文字は商用ＯＫ背景が白いほうが２

http://flexslider.woothemes.com/
flexslider２パソコンにもスマホにも対応している。
ダウンロードする。
必要なのは2つだけ
jquery.flexslider.js　の1091と1092行目のダブルクオーテーションの中身を消す
flexslider.css　の71から73行目を消す。
あとはflexslider２のところでjsをheaderのscriptの中に入れる

jQueryプラグイン100選で検索する
http://www.creatorsbank.com/
http://liginc.co.jp/web
http://sercus.jp/

2014年11月23日 11:16 AM| カテゴリー：未分類| コメント(0)

バックアップ

バックアップは、そのパソコンがおかしくなったときの為のもの
バックアップを取っておいてもそのパソコンのハードがダメになったらダメ。
大切なデータは外付けに保存しておいた方が良い

引越しとバックアップは違う
引越しは他のパソコンにそのパソコンのデータを引っ越せる。
こっちなら、大丈夫だが、前のパソコンのデータは問題ないとのこと
バージョンもあわせる必要ないとのこと

2014年11月23日 11:14 AM| カテゴリー：未分類| コメント(0)

seo対策

上位表示できる
meta情報をいじって
検索エンジンに読ませ方を変えると

ソースが良いと上位表示できる。
クローム拡張機能HTML5アウトライナーOuto
見出しが一番大事
見出ししかクローラーが見ていかない
何をＨ2にするか
パラグラフ概念

webは起承転結ではダメ
小論文、レポートの書き方サイト

<section>
<h2>
<p>
<ul>
<li>
h4までしか読まない
meta情報とh1とが上手く

結論header⇒検証⇒結論

かくはん
切り抜き
あとで、サイトのアウトライン
st-image.com/stfeature/ft-140708/

ハブ

外部リンクをたくさん作る

googleのサーバー上にあるデータしか読まない
アクセス解析が出来るＷＥＢマスターツール

ファーストビューが大切
テキストが大切
200行の中に必要な文書構造を書いてあげないとダメ
画像ばっかじゃだめ

正しい文法で書くのが最優先

すべてにおいて最優先はｐ
カラムの順番が大事

ケンコーコム
ウェブディベロッパーツール

phpじゃダメ
.htmlにしないとだめ
上位表示しているページのソースを読み解くことが必要

meta name=”description” content=”ここと”
<title>ここ</title>
が同じであれば上位表示される。
webデザインの勉強助詞が一個入っている。

静的なページで良い。

バリデートでエラーがあったらダメ。

colorilla
html validator
web developer
pealCrescent（画像、動画を保存）
デベロッパーツール

検索の力が大切

王様の耳はロバの耳　王様の名前

困ったときのサントリー
補色は黄色と青の補色が一番強い
サークルの反対が補色
補色が一番良い。
青い冷たいもの

コントラストが強いものが一番受け取れる

明度は時間軸と関係がある。
白：未来
黒：過去

はてなブログ

イラストレーターとは
シンメトリー（対称）を作るツール
世の中はシンメトリーで出来てるよ。
ベクトルデーター
力の方向
力の大きさ

コンピューターっていうのは必ず理屈がある。

pc
5 -2 7 +2

成功している人の真似をするとそういう思考回路になる。

デザインワークス
キーオブジェくト
パスファインダー

レベル補正
アンシャープマスク
ドロップシャドウ
写真のトリミング
皿をはみ出させることによって大きく見える
シャドウハイライト
レベル補正
シャープのアンシャープマスク
値をいじっちゃダメ
初期設定で使う

文節

社会に認めてもらうと色とは
紺とかうすいグレー
濃いグレー

写真の色を生かすような色を使う
補色の原理を使う。

デザインの理屈
Ｚで見ていく
人は真ん中は読まない

ファイヤーホックスでは
CTRL shift Mでスマホのサイトがすぐに見れる。

flashはベクトルとビットマップを行ったり出たり出来る。
今需要ある。

float浮き上がる

ピクセル
rgb

cmyk
webtrafelica@gmail.com

yahooを使ってgoogle.comの対策をすると
まずyahoo。

xdomainこっちの方が良い
freeweb

キーハイフンキー　だと両方キーワード
キー＿キー　両方で一つのキーワード

下にたくさんのリンク集を入れることで
ハブ化できる。

画像はpngで作る８ビットと24ビット

SEOに関して、
google 検索エンジン最適化スターターガイドで検索すると、PDFファイルでグーグルがこういっているというのが確認できる。

HTMLは重要度順に上から書く。

google.com
google Analyticsの使い方は、登録して
何個でもできる。
indexの締めのbodyの１行上にトラッキングコードを埋め込む

2014年11月23日 11:12 AM| カテゴリー：未分類| コメント(0)

ディレクトリ

htmlのimgタグの中のwidthとheightにはpxピクセルであれば単位を入れない

フォルダ及びファイル名の決まり。
半角英数のみ
半角スペースは使わない
数字が頭に来ない
数字しかないのも駄目
index.html
その他のファイルは、その内容を表すファイル名が良い
画像を入れたファイルはimgフォルダ
cssを何個か作る場合cssというフォルダをつくりその中にcssのファイルを入れる
jsというディレクトリ（フォルダ）を作ってjavascriptのファイルをお入れる。

2014年11月23日 11:03 AM| カテゴリー：未分類| コメント(0)

オススメ検索ワード

デザイナーお勧めのフリー素材

白地図って検索すると、無料でダウンロードできる。

2014年11月23日 10:55 AM| カテゴリー：未分類| コメント(0)

dreamweaver

表示のコードビューオプションのワードラップをすると
自動で折り返されるようになる。

DWのテンプレートフォルダはサーバーには必要ないので、ＵＰしないこと
originalフォルダに保存する。

html５文法チェックサイトもあるがドリームウィーバーのバリデートチャックでもOK

2014年11月23日 10:55 AM| カテゴリー：未分類| コメント(0)

Illustrator

ベクトルデータ形式のデータを扱う
計算で書かれてある
点々じゃない。
どこまで拡大しても円は円
ロゴ
ボタン
地図
タイトル文字
データ軽い

イラストレーター
adobeは編集の一番下が環境設定になっている
ＲＧＢはＷＥＢ
ドキメントプロファイルをＷＥＢにする。
1px
印刷用のデータCMYK
黒の矢印はオブジェクト全体を選択する
白の矢印ダイレクト選択はアンカーポイントを選択できる
オブジェクト

地図作るときは
道路レイヤー
建物レイヤー
文字レイヤーとすると管理が楽になる
そして出来たレイヤーにはレイヤーパネルからロックをかける
バウンディングボックス、表示の設定

楕円三つ
パスファインダー合体

イラストレーターコントロールＤ
繰り返し

イラストレーター
テキスト
書式
アウトラインを作成するとグラデーション作成できる

イラストレーター繰り返し　ctrl＋D
LEAF回転ツールはALTキーを押しながら、中心となるところをクリックする

著作権のある画像もイラストレーターライブトレイスを使う。
イラストレーター開いたら、表示をピクセルビューに直す
ctrl＋shift＋Gでグループ化解除が大切
トレースオプション

svgデータはベクトルデータなので劣化しない。拡大しても
svgデータをテラパッドで
svgイラスト集で検索する。

イラストレーター

550px×400px
フラッシュを見越してこの大きさで作る
cmyk
スクリーン72ppi
ppiは何の略pixlパーインチ

文字は必ず書式からアウトライン化する。
その後グループ解除

アートペイントブラシを選択
アートインクブラシ

ウインドウからグラフィックスタイル
ドラッグして離すと登録される
文字だけじゃないとだめ。
しぶきを入れちゃうとだめ

鎖のハーモニーリンクをクリック

フラッシュ立ち上げ
イラストレーターで作ったデータをコピー貼り付け
ビットマップでペースト
修正から分解

空白キーフレームを挿入
アクションstop();を挿入

2014年11月23日 10:51 AM| カテゴリー：未分類| コメント(0)

photoshop

ビットマップ形式のデータを扱う
点々の集まり
写真
データ重い

photoshop
カラー
スオッチ
色調補正
ヒストリー
レイヤー

ブラシサイズのショートカット
ＡＬＴキー＋マウスの右ボタン＋マウス左右に動かす。
拡大縮小
ＡＬＴキー＋マウスホイール
マスクモード中
Ｘで描画色と背景色入れ替え

トーンカーブのスポイト使える

黄金比１：１．６（５：８）
名刺、ピラミッド

縦横の比率

白銀比１：√２（５：７）

photoshop
月と花火
黒を表示させない
レイヤー効果を通常からスクリーンにする

1.定型サイズで切り抜き
2.フォトショップで画像補正
3.web用に画像を保存する。イタリアンの今回の場合はjpgが良い
フォトショップでは、画像の左下のところをクリックすると画像の大きさがわかる

ファイルの形式
色数　　　透過　　アニメ
gif　　256　　　使える　使える　新発売で赤で反転させて使う。

jpg　1677万色　使えない　使えない

png　1677万色　使える　　使えない
png画像は少し重くなる

photoshopの画像の合成は、レイヤーを新規で作ってそこに画像を移動させてレイヤーメニューからレイヤースタイル、レイヤー効果で描画モードをスクリーンにすると黒が抜ける

photoshop
トーンカーブ、レベル補正、レイヤースタイル
レイヤースタイルレイヤー毎に効果が設定できる

メニューからの色調補正は画像に直接かけてしまうが、色調パネルからレイヤーにコントラストをかける方法なら元画像はいじらないでかけられる

gifアニメーション
レシピの説明をだして最後に完成の画像
車がポット出てきてカーショップの店の看板画像

どこに何をするかを決める
画像を見極める。
背景が白なら、選択ツールで背景の白を
選択して反転する。
影がある場合はshift押しながら＋していくことも出来るし、
どうしても出来ない場合はペンツール

photo shopで画像の大きさを変えるのは、イメージ画像解像度で大きさを変更する。
いらないところを切り取りたいなら、いらないところを切り取って、画像解像度で大きさを変更する。

photo shopはブラシ機能が大切
photo shopもイラストレーターも一個戻すのはコントロール＋Ｚ
photo shopでたくさん戻したい場合はヒストリー
イラストレーターの場合はコントロール＋Ｄ
消したい
場合は
deleteで消す。

photo shopでブラシで花びらを散らす。
ペンツールのアンカーポイントは曲げるとこだけで良い
photo shop ブラシ炎で検索するとたくさん転がってる。

photo shopで切り抜きツールを使う時、縦と横の幅が合わないときははみ出して○をして、
背景画像はスタンプツールで塗り直す。

photoshopのブラシは最高。
レイヤーには必ず名前を付ける。

クリッピングマスク
１.画像なんでもOK、開く
２.レイヤー作成して文字を打つ
３.画像の背景を右クリックでレイヤーに変更
４.テキストのレイヤーを下、画像のレイヤーを上にする。
５．画像レイヤーを選択してレイヤーメニューから、、クリッピングマスクを作成する。

ボタンの作成
シェイプ
グラデーションオーバーレイ

レイヤースタイルでもグラデーションがかけられる。
そして、レイヤーマスクでもグラデーションがかけられる。
こうすれば二重にグラデーションがかけられる。

photoshopでブラシを入れる場所
cドライブ　プログラムファイルズ　adobe photoshop presets Brushesに
ダウンロードしたブラシのフォルダを入れる

バナーデザインアーカイブサイト
http://banner.keizine.net/

１．photoshopで新規作成300×250
２．イメージ画像解像度の横幅を500px位にする
横幅500にする理由は、動かせるので使う場所を選ぶことができるので、
大体倍くらい
３．スポイトツール
４．境界線を書く ctrl+aで全選択　編集メニューから境界線で5px 内側
こっちはレイヤースタイルじゃない
５．フォントスタイルはvijaya
こっちはレイヤースタイル
整列ツールは基準になるレイヤーも選んであげないと駄目、動かしたいものと基準のレイヤー
webダウンロードしてくると、レイヤーを確認するとインデックスになっている。
インデックスのままではいじれないので、イメージのモードをRGBに戻さないとコピースタンプツール使えない
クリッピングマスク、背景という名前だと動かせなくなる。
グラデーションレイヤーを一番上に持ってくる。

alt押しながらマウスみたいな形が出てきたら押す、もしくはグラデーションの背景からクリッピングマスクを作成するを選択

photoshop スマートオブジェクトでビットマップデータをベクトルデータっぽくできる。
photoshop　ウインドウ　エクステンション

photoshop
ctrl+レイヤーのサムネイルをクリック
目ん玉消す　背景を選んでバックスペースボタンを押す

photo shop ポリゴン
ショートカット　ほとんどショートカットを押しながら
顔なら、半分作ってコピーするだけ
髪は駄目だけど。
多角形選択ツール
オプションバー一番左、ぼかしなし　アンチエイリアスなし
ctrl+f もしくはフィルターのぼかしから平均
ctrl＋＠もしくは表示非表示からグリッドを出す
グリッドにスナップをさせる
表示のメニューからスナップでグリッドにチェックを入れる
編集メニューから環境設定
グリッド、グリッド線５px 分割数１
ctrl＋ｊ
パネルメニューオプションでレイヤーの範囲のみ表示
アクションチョー使える
actionパネルを出す。

新規アクション
poligon new layer
poligon
多角形▲選択　ctrl＋ｊ
ctrl＋サムネイルクリック
ctrl＋f
新しく作った例やの名前変える
背景しにレイヤーを戻す。
アクション停止
fanctionに登録する
レイヤーを選択
レイヤースタイル
サイズ1px
中央
白
右クリック、レイヤースタイルをコピー

レイヤースタイル
背景グラデーションオーバーレイ
円形

レイヤーマスクで半分でCGと半分は実写
フォルダにpoligonをすべて入れる。
そのフォルダを選択して、マスクのマークをクリック

photoshop
編集のメニューからパターンを定義する。
パターン登録したら、編集から塗りつぶしを選ぶ
切り取ったところを光彩外側をかけると、ごまかせる。
選択範囲
色域指定
色で取れる

画像の色を変えたい場合は、photoshopの色相彩度で、色彩の統一にチェック入れて色を変えちゃう。
どっかから、持ってきた画像をそのまま使うのはって言う場合にこれを使う。

2014年11月23日 10:51 AM| カテゴリー：未分類| コメント(0)

カラーコードについて

カラーコードは１６進法を使っている
０　１　２～　９　A　B　C　D　E
１０　１１　１２～　１９　１A　２B

RGB（レッド、グリーン、ブルー）

赤＃　　 ff 　　00　　　00
ぞろ目の場合は一桁省略できる

2014年11月23日 12:32 AM| カテゴリー：未分類| コメント(0)

用語の説明と特殊文字の記入方法

＃＝ハッシュマークという

コピーライトCopyrightは著作権のこと　小さく書く
Xhtml<address></address>連絡先が開く
html5では<small></small>タグを使う

絶対参照>=>　<=<

｛　｝呼び名　中括弧　ブレース
ピクセルpx　点々のこと

½2分の１を表す特殊記号

2014年11月23日 12:29 AM| カテゴリー：未分類| コメント(0)

ＨＴＭＬの基本構造

<!DOCTYPE html>
<html lang=”ja”>

<head>
<meta charset=”utf-8″>
<title>html5の文書構造</title>
</head>

<body>
<h1>html5の文書構造</h1>
<p>この項はhtml5の文書構造の説明頁です。</p>
</body>

</html>

ドックタイプは重要
基本的には半角英数が基本
文書型宣言　<!DOCTYPE html>　htmlのバージョン５
<html>～</html>をhtml要素という
<html lang=”ja”>lang=”ja”
属性　属性値
○＝”××”の形

<head>～</head>をhead要素という
文書の情報
<head>
キャラセット
文字コード<meta charset=”utf-8″>文字コードが書かれている
頁タイトル<title>html5の文書構造</title>
ブラウザのタグのところに表示される。
metaタグも空タグ

タイトルはSEO上超重要　シンプルな方が良い
文法きちっとかくこと検索エンジンにも有効
</head>

body要素　表示内容
ブラウザーで表示される内容
<body>
<h1>html5の文書構造</h1>
<p>この頁はhtml5の文書構造の説明頁です。</p>
</body>
</html>

HTMLは上から順番に表示していくから
順番に書いていけば良い。

改行タブブラウザに影響がないのでこのように作成する。

コーディングする際に
必要であればブロック分けをする

空タグ文章の内容が上下で全然違う場合
<hr>区切り線
終了タグがないこういうものを空タグという。

<br>タグ　空タグ

idは一個しか使えないので、複数色とかを変えたい場合は
複数使えるclass属性を使う。

pタグでsmallタグをくくってcopy rightを書く

HTML
<span class=”red”>色を変えたい文字</span>
<span class=”blue”>色を変えたい文字</span>

CSS
spanを分けるのは＃マークじゃないので気をつける
span.red{
color:red;
font-size:25px;
}
span.blue{
color:blue;
font-size:25px;
}

2014年11月23日 12:26 AM| カテゴリー：未分類| コメント(0)

ＣＳＳの基本

1.CASCADING STYLE SHEET
2.文書の見栄えを表す
3.CSS言語

CSS　150種類くらいある

htmlのheadの中にCSSの参照を書く
タイトルタグの後
<link href=”style.css” rel=”stylesheet”>
これがスタイルシートには必須　これは覚える

ブレース
{}
セレクター　プロパティー　値
h1{color:red;}

cssでコメントを打つと便利
メモ書き無視してくれる
/*********** ここから色編集 ***********/

/* タイトルカラー */
h1{color:#ffff00;}
/* ×××× */
×ところにコメントを打つ。

背景色
background-color
bodyをセレクタにして、background-color背景色を設定すると頁全体の色が指定できる。
CSSでは、同じセレクタでは下に書いてあるものが優先される

バランスを崩さず明るくしたい白が一番明るい
緑　＃００ff００
＃７７ff７７

コーディングは分かりやすくする。
このようにするとわかりやすい
p{
background-color:#efe;
color:#0f0;
}

<div id=”first”>
</div>
div#first{××:××;}

字下げの時にemを良く使う。
emちょうど一文字分なので

letter-spacing:20px;
文字と文字の間の間隔

アラインは見栄えなので必ずCSSに入れる。
見栄えに関してはCSSに入れる

html5ではデザインはhtmlであらわさないので、デザインはすべてcssであらわすように推奨されている。

css
ht,td[]カンマで区切ると同じ指定を両方に出来る

cssは
background-image等
カンマで区切るといくつでも指定できる。
これすごい

p#pan{text-align:right;}
<p style=”text-align:right;”>これは試しなら良いと思う。

上記のように記載するとcssより優先されてしまい、後での編集が難しくなるので、基本的にcssに記載するようにする。

imgはインライン要素なので単独では使わないとHTMLでは使用に書いてある。
単独でインライン要素は使わない

strongは重要な語句の時に使う
ただ見栄えで太くしたいとかであればspanを使う。

リンクの色を変えたい、
リンクの下線を無くしたい場合
cssで
セレクタはaで指定する{}

background-color:”f00;
background-image:url(img/tsukushi.jpg);
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

ht,td[]カンマで区切ると同じ指定を両方に出来る

background-image等
カンマで区切るといくつでも指定できる。
これすごい

bodyにidやクラスなどを設定して子孫セレクタを使うと良い。

overflowhiddenの親要素とULとLiどちらにCSSを設定する。
親要素というのは単純に上にあるものではなくて、包んでいるもの。
div.footerの親要素はwrapper。

luとli等親子関係であるものは、利くが、liとaなど親子関係でないものの場合は利かない。
親要素にかけても子要素にかけても利くが、親子関係でないliとaなどは
利かない。

imgにfloatかけると段々になる。

overLayerに対して
top:50%;縦方向で常に中心に配置する
legt:50%;横方向で常に中心に配置する

floatの場合は横のマージンが相殺されない

スタイルシートの優先順位　直接、ヘッダーの中、外部

インラインブロックインライン要素とブロック要素の良いとこ取り
cssで
display:inline-block;
インラインは幅と高さがなくなっちゃう

cssを記入する場合の注意
下が優先の他に
cssでは階層が深いほうが優先になる
こっちが優先div#container>#container

2014年11月23日 12:24 AM| カテゴリー：未分類| コメント(0)

ＨＴＭＬの基本

1.HYPER TEXT MARKUP LANGUAGE
2.文書の構造を表す
3.HTML言語（タグで印をつける）

HTML 100種類くらいあるが、
10から20覚えればＯＫ

1.2.3.4.5
4.5の間にXHTMLがある
XHTMLは勉強しないで良い。
どうしたらいいか？
内容が伝わればいいので、内容が伝わるものを作れれば
ＨＴＭＬ４でもＯＫ。

ヘッディング
<h1>～<h6>まで
開始タグ終タグで囲む
山括弧
<p>　内容とか要素内容という　</p>
開始タグ終了タグ要素内容、これらの全体のことを要素という
<p></p>
パラグラフ
段落

htmlファイルに変える。
名前をつけて保存で変える。.html

HTMLは重要度順に上から書く。

自分のコメント入れられる
<!–×× –>こうするとブラウザでは表示しない。
自分のメモで使える。

コピーライトCopyrightは著作権のこと　小さく書く
Xhtml<address></address>連絡先が開く
html5では<small></small>タグを使う

divに属性　属性値をつける
id属性をつけることで分けることができる
first,second,thirdじゃなくて、文字プラス数字なら１，２，３でもOK

htmlのimgタグの中のwidthとheightにはpxピクセルであれば単位を入れない

HTML5のマークアップ　日付があるのでarticleが良い
background-position:30px;
background-position:にはピクセルも指定できる。

2014年11月23日 12:23 AM| カテゴリー：未分類| コメント(0)

web役立ちツール

web dedeloperツールの

色を調べるcolorzia
web dedeloperツールのその他のルーラーで
幅や高さを調べることが出来るルーラー

キャプチャのアドオンを入れる
ファイヤーフォックスのカメラマーク
pearl crescentのいい所、画面に見えてないところも一枚の画像に出来る。
ページ全体を画像として保存を選ぶ

IE tester

google
拡張機能RSS Subscription Extension（by Google）
fire fox
RSS Icon in url bar 1.5

RSSは購読登録することでサイトの更新をお知らせしてくれる機能。

snipping tool使える
動画の場面を画像で切り取る

firebug要素の検証で最高

2014年11月23日 12:16 AM| カテゴリー：未分類| コメント(0)

webサイト制作のポイント

１００％同じで見れるのは画像しかない。
画像はすべてのブラウザで同じように表示される

ファイル名は必ず半角英数で作成する。
日本語のファイル名だとサーバーで文字化けしてしまう。
wordpressでも日本語のimgファイルが読み込まれなかった。

サイトを作るときには、見た目のビジュアルイメージを考える。

ちゃんとすでにファイルが出来ていれば、＃ハッシュマークじゃなくてwhite.html（ファイル名を<a>タグの属性値としていれるが、ないので仮にリンクの状態を表す＃をいれる。

HTML5文書をより明確化する方針
パンくずリストは<p>タグでくくる。

一昔前まではウェブの横幅８００が多かったが、最近は１，０００前後が増えている

idは一個しか使えないので、複数色とかを変えたい場合は
複数使えるclass属性を使う。

HTML
<span class=”red”>色を変えたい文字</span>
<span class=”blue”>色を変えたい文字</span>

CSS
spanを分けるのは＃マークじゃないので気をつける
span.red{
color:red;
font-size:25px;
}
span.blue{
color:blue;
font-size:25px;
}
windows
ゴシック　可視性が高い　目立つ

apple
明朝　可読性が高い　読みやすい

と勝手に表示されてしまうので、字体を設定した方が良い

画像を貼るにはHTML imgを使うとCSS backgroundを使うと二通り貼り方がある
HTML構造的に必要な画像、画像の存在が必要
CSS飾り

画像は通常クリックすれば、幅と高さがわかるがもしわからなければプロパティの詳細で確認する。

bodyの高さを設定しないとbackground-positionのbottomは使えない

background のbottomは高さを指定しないと駄目
高さを下のように設定するとbottomが使えるようになる。

html{
height:100%;
}

SEO上はあまり意味はないが見栄え上は非常に効果的

bodyの中身をすべてdivで囲む
wrapper＝ラッパー　全体を囲む
よく使うidの名前。何でも良いが。

bodyにwidthで幅の設定がが利いてるとdivでwrapperかけても利かない

ＳＥＯ対策上
サイトのキーワード説明は変える必要があれば
変えたほうが良い。
リンゴのサイトなら、トップページと効能のページでページの伝えたい要素が少し違うので。

メーラー
ＣＧＩ(プログラム言語）サーバー上でしか動かない。サーバーによっては使えないサーバーもある
ＰＨＰ

掲示板はＣＧＩプログラム
カートもＣＧＩプログラム

ＨＴＭＬで画像を入れる場合
画像を要素として入れる
img
p#img1 img{}
p#img2 img{}
CSSで画像を入れる場合
背景として入れる
画像に枠を入れる方法として
画像にborderで 5pxでもbackground-color＋padding 5pxでも一緒の効果

ドリームウィーバーのバリデートでミスがわかる

w3c css　でＨＴＭＬもＣＳＳもチェックできる
チェッカー塗りをパターンで塗る

文字数を数えてemを使うのは良い
google mapの地図の埋め込みで作れるソースは下記になるが、iframeタグはインライン要素なので、pタグで囲む
<p><iframe

背景画像を入れてそこに画像を入れるとディセンダーが問題となる。
これを解決するには、
imgに{vertical-align:bottom;}を設定し、背景色にを画像の高さに合わせることができる。他にmiddleとTopがある。

iosアイフォンでもみれるようにgoogleでswiffyを検索swiffyの画面。参照でフラッシュで作成したswfファイルを選択する。そして、下の方に出てくるhtmlファイルを右クリックで保存する。３D回転はうまく出ない。
java scriptで書き出されるが、headが重くなるので、外部ファイルにscriptを書き出す。
このswiffyでjava scriptで書き出せば、swfファイルは一緒にあげなくて良い

firefox アドオン　web developerツールを入れる
cssでcssを無効化して、文書構造を確認する。

web dedeloperツールの色を調べるcolorzia
web dedeloperツールのその他のルーラーで
幅や高さを調べることが出来るルーラー

クローラーは画像は持っていかない。
cssスプライトで説明している。
h1とナビは画像にしない方が良い
h1とナビは文字で作る
下記のように見えなくしてしまうか、positionで飛ばしちゃう。

そして下記を入れる。
３つはセット
text-indent:100%;
white-space:nowrap;
overflow:hidden;
下は一個
text-indent:-9999px;
または、h1を目立たないように右上に小さく配置する。

リセットとノーマライズは一緒には使わない。
ノーマライズが主流となりそう。

スタイルシートの優先順位　直接、ヘッダーの中、外部

class名を区切る時はスペースで区切る。
ID名はjQueryに取っとくのが主流
グーグルはレスポンシブデザインを推奨している。
日本の半分以上はIEを使っている。

ブログ、人をひき付けるものを集中的に紹介する

css3 AE パララックスを使うと３Ｄっぽい空間を演出できる。

html5アウトライナー
https://gsnedders.html5.org/outliner/
文字化けするなら、ファイルの参照をする。
navは今のところuntitled sectionでしょうがない。
スマホとかは既にモダンブラウザが使われているHTML5　CSS3
HTML5リファレンス
http://www.htmq.com/html5/

縦長のパララックスのページにするなら、ナビゲーションは固定で常に表示する

モニターのサイズは16対9
大きいサイズの画像を1600×900にする。
サイズが1600より小さい場合はちゃんと計算して16対9にする

画像には必ずvertical-align:bottom;を設定する。
ディセンダーが入ってしまうので。
スマホのボタンサイズを44px×44pxにガイドラインで推奨
レスポンシブデザインにするなら、固定で作る。

svgデータはベクトルデータなので劣化しない。拡大しても
svgデータをテラパッドで
svgイラスト集で検索する。

日本語は、明朝とゴシックでOK。
有料フォントは必要ない

ハーゲンダッツ
クローム
要素の検証。
携帯サイト見える。

動画を色んなデバイスで見せたい場合はyoutubeが一番良い

タイムラプス動画
today.izmaker.com/blog/life/5584/

モックアップはスマホの見え方を出す方法

アスキーのwebプロフェッショナルの記事は勉強になる

ゼロからはじめるレスポンシブWebデザイン入門すごい参考になる
http://ascii.jp/elem/000/000/700/700611/
ミラーサイトは絶対駄目

閉じてしまっているタブパネルにはページ内リンクは行かない。

縦書きfirefoxは対応していない

ジャバスクリプトで右クリックさせないようにしているものは、古いブラウザ使ってジャバスクリプトOFFにしちゃえば右クリック出来ちゃうので、どんなサイトもパクることができる

メアドは必ず画像で載せる。絶対。

alt属性入れない方が良い場合。
意味のないものには画像を入れなくても良い。