floatなど

画像を使ったLP→  メリット ・コーディング時間が少ない。作るコストは安い。  デメリット

・編集する時に画像の編集をしないといけない

・画像にする分、そのページを表示するデータ容量が大きくなっちゃう

スマホで見た時に画像ばかりで見にくい。外で見た時に重いとユーザーがすぐ離脱してしまう(表示するのに時間がかかかる)

・画像ばかりにするとgoogleなどの検索エンジンが情報を拾わない(コンピューターからすると何も情報がない薄っぺらいサイトという評価を受けてしまう)。どう露出するかではあるが。

 会社のウェブの表示速度が遅い原因→ ・サーバー側の問題もある

・会社のページ→何をどれくらいの値段で買っているみたいなLPがあると良い

・最初お試しで作るのはLPが良い(構造も簡単だから。ここからスタートするのはとても良い)

・模写→何も見ずに同じものを作るっていうのを手を動かしながら作ると割と早く作れるようになる

・絶対模写で真似しちゃダメなサイト→tableタグをメインで多用しているサイト。昔は主流。今はdivとかpとか使ってcssを使ってやっていく。自分たちが中学生くらいの時はcssがなくtableタグで作っていた。

・検証でどういったcssが適用されているかを見ていくとだいぶやりやすくなる

・プログラム関係で息詰まる人の多くは当てがなく自分のコードを見てる人が多くいるから。だから、実行結果から見るのはいい。

■idとclass

・id→固有の名前を割り当てる。html内で要素をユニークに指定する。同じidを複数の要素に割り当てることはできない。cssで見た目を指定したい場合ドキュメントで指定したいのが1個だけなら問題ない

・class→種別の名前を割り当てる。複数の要素に割り当てる

・自分の「全部classで書いちゃえばいいんじゃね??」という疑問について→一番シンプルに考えるとclassだけでも大丈夫。

ただ、

例) .content > h2 { color: red; }

「この要素のこれ」と相対的にCSSで表すことができる。そうした場合、classで指定すると子供など指定する範囲が広くなってしまうので、子供とか孫などの要素を指定する場合はその親にあるところをidで指定してあげると余計な変な影響を与えることが少なくなる。class名を汎用的に散りばめておくとこのclassのこれってなった時に思いがけないとこの色が変わっちゃったりすることもある。そのためそれを抑えるためにidを使った方が安全なこともある。(←idを使うメリット)

・基本はclassだけでいい。でもclassだけでやった場合のデメリットもあるので部分部分にidを使うってのが一番シンプルで綺麗なコードになる。

・bootstrapとか見るとclassで割り当ててることが多い印象はある

・あと、気をつけなければいけないのが、idで指定した場合とclassで指定した場合の優先順位が決まっているから、どちらがブラウザで反映されるか、は考えといた方がいい

・html→マークアップ言語(印をつける)だから、文字があるから

タグをつけなきゃいけないというわけではない。

ボックス作成の演習↓ ・ボックスが横いっぱいに広がっている理由→dibだから。spanだとそうならない。文字の分だけしか横に伸びなくなる。

・ブロック要素とインライン要素

→文字を中央寄せするtext-alingn使うが使えるタグと使えないタグがあって、インライン要素は使えるが、ブロック要素には効かない。だからdivに対してはtext-align centerとやっても真ん中に寄らない。marginを使う。だから、何か調べてやって、それが適用されない時はだいたいブロックがインラインによるところ。例えば、文字だけを中央寄せにしたい場合、ブロック要素でやると周りのものも中央寄せになるから、文字だけを中央寄せにしたい場合インライン要素で書くと文字だけが中央に寄せられて小回りが効ける。まあ、ただ細かく最初から指定する必要はなくて細かく区切りたい時に困ったらあえて細かく指定するくらいの感覚で良いが。

タグも文字だから、文字が少なければ少ないほどページを読み込むスピードが速くはなる。(一文字増えるくらいでは大差ないが)。だから必要以上に書かないのも技ではある。

・floatを使うこと→「まわりこみ」と言うが、解除しないといけない。 今回は htmlに

とかいて、cssに .float_clear { float: none; } と書く。これはお決まりだから覚えちゃった方が早い。あとは、floatの名前の通り浮かんでいる状態で、縦の高さが取られていないから一番上に表示さている。だから、ちゃんと高さを認識させるということをやらないといけない。どうやるかというと、もう一つタグに加える。clearを全て囲う形でdivか何かで囲う。今回はdivでやってみる。 また、htmlを全てdiv classで囲いそれに対して .container { overflow: hidden; } ←これはセット。

※floatを使った場合、float: none;とoverflow: hidden; はセットで使う。overflowはcssではあまり使わないから、こういうのがあるってことを覚えておけばok。

f:id:Kenta_Shimizu:20190214105349p:plain f:id:Kenta_Shimizu:20190214105410p:plain f:id:Kenta_Shimizu:20190214105422p:plain

・こうやって要素を横に並べるやり方はいっぱいあるから、LPを真似して作るってところでは横に並べるってとこをフォーカスして調べて見てほしい。これができるようになるとページの構成に対して自分が何ができるかが見えてくる。 これができたら文字を上下左右全部を中央に寄せるのを調べるとさらにやれる幅が増える。横に並べるのを調べて欲しい理由として今のfloat: left;にも欠点があって、ブラウザによって必ず真ん中に来ないということ。

CSS→一回覚えてしまえばそれっきりだから、最初は大変だがそれを乗り越えられれば。

・仕事だとスニペットという機能を使うと楽(便利→https://kapeli.com/dash)。おきまりのパターンを自分なりのショートカットを用意しておくとありきたりなやつを一回一回タイピングしなくていいから楽になる。

・HTMLレンダリングエンジン

・レンタリング→「画面描画する」という意味

・ウェブキット

・余力があれば上下左右、中央揃えにする方法も一緒に調べるとできる幅が広がる →この2つが大事な概念。どのページでも「配置」が根本的なことになる。これができればかなり色々な組み立てができるようになる。逆にいうとこれができないと単調なページしかできなくなる。

・リーンキャンバス→ビジネスモデル図。