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

htmlとcssおぼえがき

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

頭からやり直し

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

~;の重要性~

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

 

イェーーーイ!!

 

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

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

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

imagemap

html内でイメージマップをやっていたんだけど、どうやらこれは古いらしい?

Javaで簡単にできるぞいって書いてあったので早速やってみる。

 

スクリプトの前まではhtmlのmap要素と変わんないじゃん楽勝!って思ってたのに、

動かない。

 

~今日の積みどころ:スクリプトが上手く書けない~

 

head部分に入れたscriptのリンクもパスも再三確認したし、

影響しそうな余計なところは省いたし、

色々やってみたのに全く変わらない!!

map要素の部分をいじると色々変わるので、これは絶対script部分になんかある~と小一時間悩む。

f:id:zunzun758:20170221202343p:plain

この閉じタグの色が変だから、多分上手く閉じれてないんだろうな…と思うものの、どうしたらいいのかわからないので、

一旦別のサイトを参考にしてコピペしてみた

 

 

動いた!!!

足りないのは

f:id:zunzun758:20170221202449p:plain

f:id:zunzun758:20170221202502p:plain

これだ!!!

 

参考のサイトを全面的に信頼していたので、このような落とし穴があるとは…

ちゃんと構造を理解していないとダメだと痛感しました。

 

でもなんか位置中心からズレタヨ。

f:id:zunzun758:20170221202628p:plain

 

light boxおぼえた

イラストページ作ろうと思い

最初think boxに辿り着く

 

でもなんか上手くいかなかったので、同じようなのわかばちゃんでやったじゃん!

とlight box思い出してそのソースをそのまま使うことに。

 

最初やったときは教科書みるままにやったのであまり理解できていなかったけど、

css同様、htmlにjsファイルを繋げてしまえばできちゃうんだ~割と簡単だな~という感想。

 

詰まったポイントは2つ

①サムネイル表示できない

②素材としての×画像とか、>(次へ)画像が表示されない

 

①最初はよくわからなかったので、ミニサイズのサムネイル画像を作っていました。

しかしいちいちサムネイル画像作るのめんどくさいしどーすれば?

とりあえずhtmlにcalss=img-thumbと名付け、

cssにサイズ指定をした。

f:id:zunzun758:20170220204324p:plain

でかい

f:id:zunzun758:20170220204349p:plain

こんなもんかなー。これでもでかい気がするけど…。ここらへんの調整はまた後日。

 

②素材としての×画像とか、>(次へ)画像が表示されない。

そもそもこの画像関連ってどこに書いてあるんだ?と一通り悩んだ末、

何とかlightbox.cssだ!と所在に辿り着く。

 

わかばちゃんで使ったcssをそのまま使っていたので、パスが変だった!

 

f:id:zunzun758:20170220204552p:plain

 

ここを自分のフォルダの階層に変えて、オッケーかと思ったが

表示されない。

 display: none;

の部分を試しに消してみたら、普通にページ上に画像が表示されたのでパスは間違ってない。

 

htmlのclassの指定の問題??lightbox.cssのどっかに書いてあるの?

と一通り悩みながら眺めていると

f:id:zunzun758:20170220204845p:plain

ここだ!!!ここのリンクを変えていないからだ!!

と気づいて修正。

 

無事表示された\(^o^)/

f:id:zunzun758:20170220204927p:plain

イエーイ!!

 

まだまだ取りこぼしが多いですが理解はできている…?ような気がします。

まだwidth heightすらまともにわかっていないけれども。

 

作成しはじめた

wifiの契約更新ミスにより2月半ばにして速度制限がかかる事態に陥ったため、参考にしていたネットのページが見れなくなりました。

 

なのでオフラインでできることを…と自分のサイトを作りだすことに。

 

とりあえずマージンとパディングで積む。

あと今マップ?をやっていますが上手く作動しません。

---------------------------------------------------------------------------

一時間後

マップは普通に全角スペース入ってました。解決。

その後java?でイラストを順々に切り替えていくやつもできました。これは使えそう。

 

しかしやっぱりマージンパディングで積む。

f:id:zunzun758:20170217171341p:plain

ヘッダーの文字の部分 真ん中にしたいんですが 

上手くいかない…

 

f:id:zunzun758:20170217171420p:plain

どこいじればいいんだろう?

↑最初の練習で使ったやつをコピペしていじってるので無駄の多そうなcss

 

input要素その2

 

honttoni.blog74.fc2.com

 

まだまだ続くinput要素

 

若干飽きてきたけどとりあえず格要素はすべて目を通しておく。

それから色々作っていくという方向でいるのでぽちぽち。

 

今回のとこではjavascriptも出てきた!

なんかカッコイイ。上手くでなかったりしたけど、原因は大体余分な全角スペースでした。

f:id:zunzun758:20170211141145p:plain

 

f:id:zunzun758:20170211141759p:plain

form onReset="reset checkReset()"

…わかるようでわからない…

input要素 その1

honttoni.blog74.fc2.com

に挑戦。

意外とさくさくできる~と思いきや

何故か反映されず積む。

 

 

f:id:zunzun758:20170205162631p:plainf:id:zunzun758:20170205162530p:plain

 

入れてんのに何故…

<p>の位置変だから?と思いちゃんと整理したら

 

f:id:zunzun758:20170205162517p:plain

f:id:zunzun758:20170205162544p:plain

ちゃんと反映されました

よかったよかった。

整理が苦手なので1つ1つ丁寧にやっていかないといけないなと思いました。

 

特に何もしてないのに入力しないとちゃんとエラーのメッセージ出るのは何故だろ?

あとこの章で正規表現も少し覚えられたので活用していけるようにしたい。