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

 

作成しはじめた

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つ丁寧にやっていかないといけないなと思いました。

 

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

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

 

プロローグ0204

これまでのあらすじ

転職してぇ、おら翻訳はもう嫌だ!と友達に相談した結果

フォトショとか使えるならウェブデザイナーどうよと教えてもらい

ぽちぽち勉強中。

理系に憧れる文系が理転するチャンス!!と

いけるとこまで勉強しようという物語です。

 

 

こちらの書籍を友達に紹介してもらい一通り読み終えました。

めちゃくちゃわかりやすかった!

わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

 

 しかし属性とか要素の関係がこんがらがり、復習しようということで

 

honttoni.blog74.fc2.com

こちらのサイトでもう一度じっくり勉強中なう。

 


 

ちゃんとやったことメモした方がいいよ!と言われたのでブログを作りました。

適当に遊んで作っているのでちょいちょいハロプロを挟んでいった結果こうなりました。

 

f:id:zunzun758:20170204235549p:plain

f:id:zunzun758:20170204235558p:plain

っていうか、はてなブログってHTML編集できるからすげぇ便利だな!?

ここからちゃんとメモっていくぞ。


↑これは<hr style="border-style: dashed;" size="3" width="400" />


↑これは<hr style="border-style: dotted;" size="3" width="400" />

ふむ~