知りたがりの雑記帳

24歳 大卒 既に2度転職 実家に寄生中無職 これからどうする!?

ウェブデザイン職業訓練日記。自分向け。

資本主義国家にいようと別に金使わなくていいんだぜ。妖精(仮)です。

 

ウェブデザインの職業訓練が始まったので、そこで学んだことなどをつらつら書いていこうと思う。完全に自分向けです。

 

2017年8月

Chromeシークレットモードを使用する
共用PCを使ったり、ネカフェでログインしたりするときにシークレットモードを使うのが常識らしい。

 

便利なショートカット


Ctrl+Shift+N Chromeシークレットモード
Alt+Tab タブ切り替え
F5 ブラウザ更新
Ctrl+U ソースコード表示
Ctrl+Shift+T Chrome最後に閉じたタブ復活
Ctrl+S 保存
Ctrl+Z 一つ戻る

Ctrl+Y 一つ進む(使えない場合もある)

 

CMD(コマンドプロンプト)でping www.google.co.jp
と入力すると、IPアドレスが出てくる。
PCは日本語も英語も理解できないので(理解出来たら人工知能だ)単語に数値が割り振られているようだ。


CMDで出てきた数値をアドレスバーに入れればそのサイトに行く。

ただ、最近はセキュリティの問題から撥ねられることが多いようだ。
Yahoo、Bingは失敗した。
余談だが、昔pingをCIAに送りまくってたら監視された奴がいたとかなんだとか…

 

文字コードUTF-8が世界共通
中国は漢字が多いのでUTF-8Nなんだとか…?

 

なるべくマウスを使わずに操作すると早いよ。
フォーカスしてクリックするのがダブルクリックなので、アローキー(矢印)で選択後エンターと同じこと。

 

HTML5関係
<head>
</head>
など範囲選択してタブキーを押すと範囲ごとずれる。
動くタブ数は変更可能。

 

XHTML1.0やHTML4.01を厳格に書いていた理由は検索で上位にヒットさせるため。

 

meta=基本情報
meta name description 検索して出てきた時の説明文
meta name keyword descriptionの中で太字で表示される。

************************************

 

キーボードにあるHOMEとENDボタンで左右に一気に移動する。

 

WWW Consortium(コンソーシアム)インターネットのワールドワイドウェブ(WWW)技術に関する標準化を進める非営利団体W3C

The W3C Markup Validation Service https://validator.w3.org/

W3Cの基準に適して、ウェブサイトのマークアップエラーなどを検知してくれる。

 

Chrome詳細設定でダウンロード先を変更できる。

 

altタブにきちんと説明を入れないとアメリカでは盲目者の権利侵害として訴えられる?

alternativeは代替テキストで、画像にマウスを重ねると表示される文字。

 

アンカータグ

<a href="http://www.google.co.jp">Googleだよーん</a>

内部リンクをIDで指定する場合#で記述する。
<a href="#google">こっちだよーん</a>

 

モニターの光の粒1つがピクセル単位らしい


南米に行くと成功しやすいらしい(余談。日本人は何でもやるが現地人はサボるとか)

 

相対パス
../で階層を一つあがる

./は同一階層(通常省略する。昔の名残らしい)

../../../img/okazu/hentai だったら、例えばindex.htmlから階層を3つ上がったフォルダの中のimgのokazuのhentaiを示している。

 

下に下に続く要素をブロック要素、右に右に行くのがインライン要素
殆どはブロック要素で、ブロック要素の中にインライン要素を組み込む。

************************************

 

範囲選択してCtrlを押しながらドラッグするとコピー不要で複製可能


テーブルタグ td→thにすると(テーブルヘッドとして認識される)
SEO対策になるわけだ。データと項目をクロールが理解してくれるからだ。

 

formタグ データをサーバーに送るフォーマット
action="OO"→OOを受け取るプログラム
method="get or post"送る方法

 

<form action="" method="post">
名前<input type="text" name="name"><br>
パスワード<input type="text" name="pw">
<input type="submit" value="送信">
</form>

 

post→getだと中身が見えてしまう。
text→passwordにすると伏字で表示されるよ。

 

value値は用意した値になる。


リセットボタンは不要。折角入力したのになぜクリアするんだよ。

name属性はデータを受け取る側が分かりやすくするために必要。

************************************

 

h1 color:red; セレクタ プロパティ:値; と呼ぶ。

 

CSSをHTMLに組み込む方法
・インライン Body内に入れている
・内部参照 Head内に入れている
・外部参照 文字通り外部に作る(これが殆ど。)

 

F12でディベロッパーツール出してCSSを表示させる。
style.css:1 この数字はcssの行数を示している。

 

8ビットで1バイト
光の三原色 red green blueなぜ混ぜると白になる?
色の三原色 シアン マゼンダ イエロー混ぜると黒

RGBはそれぞれ256段階ある。
R(16*16)G(16*16)B(16*16)
FFFFFF
色は16進数で記述されているよ

 

webセーフカラー216色 今は完全に不要。(都市伝説?)
16進数中の3の倍数 0,3,6,9,c,f 必ず#をつける
0123456789abcdef

 

<link rel="stylesheet" href="css/style.css">
relとhrefは逆でもOKだよ。

 

zipファイルを解凍せずに中を見れるが、関連付けしていないので画像などが表示されない。意外と皆知らないと思う。

 

コメントアウト

htmlの場合<!--aaa-->
cssの場合/*aaa*/

 

cssで日本語を使う時@charset "utf-8"がないと文字化けすることもあるよ。

CSS 上から大枠、下になると詳細になるようだ。

 

W3C CSS validation でCSSも検証できる

a:hoverでマウスを重ねたとき色が変わる
F12で:hoverは横3点のとこから選択できる

 

リンクに使う擬似クラスは:hoverくらいしか使わない
他は蛇足だぞ

text-align 行揃え

インライン要素:自分で幅と高さを持てない
ブロック要素:paddingとmarginがある
内余白padding 外余白margin

************************************

 

BracketsでHTMLとCSSを同画面で見る。
bracketsでライブプレビューすると保存しなくてもできる。
background-image:url()

 

background-repeat:repeat-x;
これをするとx方向のみリピートする
何も記述しなければxとy方向にリピートしてしまう

 

jpegをウェブサイトに表示すると背景が白になる
pngだと背景が透明になるよ
アイコンにはjpegは合わない

 

CSSジェネレーターなどを駆使し、既存のウェブサイトを答えを見ずに作っていくことで最も効率的に勉強できるのでは?

 

bodyの中にwrapを作る
marginの横をautoにすれば画面の真ん中に移動する
width980pxならどんな画面でも表示できる

 

box-sizing: border-box
これを使えばpaddingやborderの数値が余計な場合引いてくれる
マージン以外の全部で960pxにしてくれる

 

list-style-type: none;
箇条書きの点は消すこと。

************************************

 

低スペックPCでも表示できるようにサイトサイズを960pxくらいに調整する必要がある。
そのため、1900pxくらいのPCではサイトが小さく見えてしまう。
そこでナビゲーションバーが横に伸びる方法が一般的のようだ

 

Retinaディスプレイでは画像がぼやける

 

margin:0 auto;
高さなし、画面中央表示
clear:both;
floatがあるとその下が上に滑り込むのでこれが必要になる。
が、この方法はベターでないらしい

 

または、親要素overflow:hidden;を付け加える(CSS
もしくは、
.clearfix:after {
content: "";
clear: both;
display: block;
}
を外部CSSに追加し、HTMLの中の親要素のclass中に cleafixを追加する。

 

スペルミスで挙動がおかしい時はバリゲーターでは判別できないので気をつけること。

 

サイトを作ったときmargin-topを設定していないのに上部に空欄が出るときはブラウザにすでに設定されているCSS
それを回避するためにリセットCSSというものが存在する

 

複数のCSSを利用する場合、<head>の中のcssは大きい順にしなければならない

floatを使うと浮いてしまう。floatを使って横にブロックを並べるなら全てfloatタグを利用してreft,light指定する。

************************************

 

ネガティブマージン(20pxオーバーしたからー20pxすればいいやん!)を使うのはやめたほうがいい
:nth-child(4n) {
margin-right: 0;
}
を使うと4の倍数の箇所のマージンを0にする。

 

liのfloatで沢山あるとき、それぞれのサイズが異なるとずれてしまう。(格子状フォトギャラリーなど)
そこでfloatを幾つかの親divでくくるとその中の一番高いものに合うことになる。

div内の要素が4つだとして、:nth-child(6)
は存在しない。
親が複数あり、要素の総数が10、親の中には4つだとしても:nth-child(6)は存在しない。

 

background-color: rgba(200, 146, 0, 0.46);
red green blue alpha? aは透明度
また、brancketsで編集中にCtrl+Eで色相編集画面が出てくる。

 

text-align: justify;/* 行末を揃えるための記述の方法 */

CSS全文を表示するにはCtrl+UからCSSファイルを選択すれば一覧で出てくる。

************************************

 

ページ内リンク(ID=header)
<a href="#header">
 
top:95%とbottom:5%は違うよ
一番上から95%と一番下から5%だからね
 
レスポンシブデザイン
大体480pxがbreak point
 
<meta name="viewport" content="width=device-width, initial-scale=1">
これがないと
@media screen and (max-width: 480px) {
CSSの中のこいつが動かないようだ
 
#mainContent{
padding: 0 3%;
box-sizing: border-box;
}
こうするとスマホ画面で横ぴったりになるわけ
 
#mainImage .slogan{
position: static;
staticでabsoluteを無しにする。
 
スマホにはTOPに戻るボタンは不要なので
.btn{display:none;}