htmlとcssおぼえがき

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

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すらまともにわかっていないけれども。