Yasumasa's Portfolio
ＷＥＢ大好きな濱田泰昌のポートフォリオを紹介します。

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にしちゃえば右クリック出来ちゃうので、どんなサイトもパクることができる

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

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

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

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