読者です 読者をやめる 読者になる 読者になる

htmlとcssおぼえがき

htmlとcssの勉強するよ!メモ

グリッドレイアウト

先週は狂ったように絵を描いて遊びつくしたので今週からまたこつこつ挑んでいきます。

 

①先週の詰みどころ

indexが読み込まれず、read meが表示される。自分の作ったページがオンラインで見れない。

最初はhttpsの問題だからhttp→httpsにしてねってメッセージが出てきた。

でも作ったページにはhttpが書いてあるところはないしなんでや?と思いふて寝。

 

この時ようやく学んだんだけど、GitHubは時間をおかなきゃ結果がちゃんと反映されないということ。ゆっくり待ちの姿勢で向き合わねばいけないようだ。

 

その後、それ多分indexじゃなくてread me読みこんでるよと教えてもらったので、

read meいらないし消すか~と消去。しかし何も変わらず。

リベンジとして新しいリポジトリを作成してみるも上手くいかず。

(フォルダコピーして、別名にしたのにsourcetreeでは同じフォルダと見なされるし??頭いいな?)GitHubむずかしいー!!と詰んで2回目のふて寝。

 

するとindexのファイル名が問題なのでは?との指摘を受ける。

確かに作成した時のミスで_index.htmlとしていた。

そうかと思い変えてみる。

そしてここでようやく気づいたのだが、エラーメッセージをよくよく読んでみると

index.htmlというファイル名のものは必ず入れてねと書いてありました。

あほ!

 

そしてしばらく時間を置いてみてみると、ちゃんとページできてました!\(^o^)/

スタンダードレイアウト

やっぴー!

 

 

②今週から

今週からは続きのグリッドレイアウトに挑戦。

おしゃれなので作っていてわきわき。疑似要素とかちょっと難しいけどゆっくりやっていきたいです。

f:id:zunzun758:20170328220924p:plain

リポジトリの新規作成とsourcetree

リポジトリを作るときの鉄則!

中に何も入れない‼ 空の状態にすること

 

※そうじゃないとウェブ上にあるデータと、ローカルにあるデータがバッティングしてエラーを起こす

 

先にレポジトリをGithubで作ったら、「新規/クローンを作成する」を押し、「リポジトリの作成」を選択。

保存先には自分がローカルで作業しているフォルダを指定する。

次にリポジトリ設定でリモートリポジトリを追加。URL、パスはGithubで作成済みのURLを入れる。

モダンコーディング

この本みると今までどんだけめちゃくちゃにゴーディングしていたかがすごいわかる!!

 

remとか初めて知った!!

htmlの規定のフォントサイズが16pxだから、フォントサイズを62.5%にしておけば10px相当になるし、

htmlに対するremにすればフォントのサイズ指定が楽になるよ

 

とか

すげー!!僕はまだ何も知らない

 

僕はまだ何も知らない。

僕はまだ何も知らない。

 

 

次の課題は

先週は仕事が忙しくてまともにできなかった~

 

でもとりあえず、一通りページはつくって、HPを形にしました。

POKOJ

 

なんかGIFの浮いてるしヘッダーの部分の修正などまだまだ課題はありますが…

GIFは透過GIFが作れるようなフリーソフト落とさないとだめかな。

 

次は

www.shoeisha.co.jp

この本を借りたのでこれに挑戦してみようと思います!

いっぱい課題があるのですごく勉強になりそう。

 

今の仕事の今後のスケジュールを聞いたら、2か月先までずっと翻訳と言われて落ち込んでいるので

この本を終えたら転職に向けて動き出せるくらいの力を身につけたいです。

 

 

0227

昨日のメモはツイッターに書いた!けど!

なんか連携できない。

後日!

 

今日は疑似クラスを色々とやってみました。

f:id:zunzun758:20170228201535p:plain

 

これを入れることで一応div全体の背景色は変わった!!

本来やりたいのは離れたところの画像なので、これを応用してなんとかやってみよう。

 

とりあえず昨日の糞残業のせいで眠たい

頭からやり直し

今日はすごく基本であろう大事なこと、初めて知りました。

~;の重要性~

f:id:zunzun758:20170224212340p:plain

なんかbodyの背景の色変わらないなー?と気づいて

色んなところにbackground-color貼り付けてみるも

上手くいかず。

 

ぐぐりにぐぐって、教えてもらいました。

f:id:zunzun758:20170224212442p:plain

基本飛ばして応用いこうとするとこういう目に合うね!

 

②divの重要性

相変わらずイメージマップの位置がうまくいきません!!!

元の画像は動かせたけど、マウスオーバー?した時に出てくる画はそのままの位置にいて…

f:id:zunzun758:20170224212543p:plain

どこいじればいいんだ!?まじで!!

 

 

とふてくされてdiv divしてみたら

f:id:zunzun758:20170224212934p:plain

できた!!!

絵を動かすんじゃなくて、その絵がいる場所自体を移動させなきゃいけないのね。

今まで.topillustのスペースに全部突っ込んでいた。

それをイメージマップを入れる箱をちゃんと作って、その箱を真ん中に動かせばよかった。

 

うわ~~~~いよかった~~~自力でできたぞ~~~\(^o^)/

人として軸がブレている

イラストページのアイディアが浮かんでいないけど、とりあえず並べてみたかったので並べたよ。

f:id:zunzun758:20170223202129p:plain

しかし縦…

理想は横なのでどうにかしたいんだけど、なんかdiv divしててどうしたらいいかわからず。

 

調べてみると何種類かやり方があるみたいで

とりあえずcssのところにdisplay: inline-blockを突っ込んでみた。

 

f:id:zunzun758:20170223202239p:plain

 

イェーーーイ!!

 

とりあえずここからどうするかだ。

相変わらずトップページは中心からずれているし

ここをどうにかしてから次に進みたい。