htmlとcssおぼえがき

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

GW

GW、新しいデザインを考えて(1日)

頑張ってコーディング(2日)

で、トップ以外のページも何とか作れました!

 

f:id:zunzun758:20170502012701p:plain

 

全ページ作るとそれっぽくなる!

うわーがんばりました。

二週間

土日にガツン、平日はちょぼちょぼ

 

二週間でとりあえずここらへんまでできました。

f:id:zunzun758:20170427232056p:plain

なんか実際に組み立ててみるとフォトショ上でやったのとイメージ違って…

なんだろう、余白?大きさ?

 

最近は自分の思ったところにおけるようになってきました。

 

ここまでで一番頭をうならせたのはMediaのとこの日付?

後ろにグラデーション画像で、そこにpositionのrelativeとabsoluteの関係で上に日付乗せてるんだけど、relativeを画像に対してするか、画像が入っているdivに対してやるかというので…後者が正解だったのだけどそれがわからず2、3時間唸っていた。

 

あとはtwitterの埋め込み。

jsのリンクにhttp:を入れなかったために上手く稼働せず。しかも検索で出てくる埋め込みの方法は大体古い(IDとかもうない)

 

時間はかかっているけど、やりたいことは何とかできるようにはなってきました。

 

あとは色つきのところ中央に持っていきたいのと、ヘッダーとフッターの整理!

 

そして肝心の中身だけど…トップ作ったらもう力尽きそうだ…

デザインxアイドル

をする仕事なんだよな


ウェブデザイナーのいとこの話に話を聞いて再確認した


コーディングはまだまだまだまだだけど

ポートフォリオを出すならとりあえず自分のデザインが必要だなーと思った。


自分のお気に入りのサイトをリニューアルするなら見たいな風に考えるといいよ!と言われたので、アイドルのサイトってどんなだろーと思っていろいろ見ると、アイドルごとに全然違って面白かった!


エケビは今日誰がメディアに出るかをちゃんと出してるし、けやき坂は今ホットなニュースをどどん!と出す。ロゴもふんだんにつかってる。

ももクロはふるきよきアイドル!私は一番ももクロのサイトが好きかな。


その中でとうきよう女子流のサイトはどーだろこれ?っと思った。

シンプルすぎて何も頭に入ってこない…確か脱アイドル宣言をしたからわざとこーしてるんだろうけど。


というわけで女子流のサイトをリニューアルするなら?という風に考えてみます。

f:id:zunzun758:20170412232626j:plain

まだと途中だけど


グリッドレイアウト

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

 

①先週の詰みどころ

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にすればフォントのサイズ指定が楽になるよ

 

とか

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

 

僕はまだ何も知らない。

僕はまだ何も知らない。