WEBエンジニアになりたい!part4

どうも、家では基本半裸のカルロスです。

今回もWEBサイトを作っています。

Part4では、CSSとJqueryを使ってWEBサイトの調整を行いました。

 

 

早いもので、もうPart4。

ネットサーフィンとオフィスしかパソコンの知識が無かった私も、

少しずつWEBサイトを作れるようなっております。

そんなカルロスにSNSを通じて、お褒めの言葉を頂きました。

 

 

 

kuroroさんありがとうございます。

思いはカルロスにしっかり届きました。

カルロスは褒めて伸びるタイプです。

 

 

前回の課題

Part3で作った、サイトの枠組みに

Jqueryを使ってダイアログを追加しました。

ダイアログは、クリックすると開かれる画面の様なものです。

 

 

 

こちらが、サイトの全体像です。

 

食材の下の『ダイアログを開く』をクリックすると、、

 

ダイアログが開いて食材を入力できます。

 

折角なので、お寿司の材料を入力しました。

 

しかしこのサイト、ダメポイントが沢山あります。

 

 

 

・ダメポイント1

動かないダイアログがある。

 

手順のダイアログは正しく動きますが、

 

閉じるボタンをクリックして、ダイアログを閉じると、、

 

二度とダイアログが開かなくなります。

WEBサイトから、初心者カルロスへのかわいがりでしょうか。

 

 

・ダメポイント2

画像を添付しても、全体が表示されない。

料理の写真を入れるために、写真を添付できるようにしました。

 

ファイルを選択をクリックすると、画像を添付することができます。

 

この画像を入れてみましょう。

メンチカツにチーズを乗せてチンした一品です。

マヨネーズを適当に絞ったら、人の横顔みたいになりました。

 

どうでしょう、これではどんな写真か解りません。

 

 

以上ダメポイントでした。

なぜこんな事に?

 

今回のポイントには共通点があります。

 

他のサイトからコピペしてきた事です。

 

コピペしてきたコードをただ貼り付けただけなので、

正しく動かないコードが出てきてしまいました。

 

ここからが、本編です。

 

 

ダメポイントを修理しよう

なぜダメポイントが生まれてしまったのかカルロスにはサッパリです。

なので、シュウイチ先生にお願いして治し方を教えてもらいました。

 

ちなみにシュウイチ先生は、体を洗う時は顔から先にサッパリするそうです。

 

私、カルロスも顔から洗います。

鼻は2回洗い、毛穴を絞り出してます。

キャバクラに行くと、キャバ嬢に肌が綺麗とよく褒められます。

 

 

・ダメポイント1

動かないダイアログがある。

 

今回はJqueryが、指定したclassやidに動きをつけてダイアログを機能させます。

イメージし難いですね。こんな感じです。⇩⇩⇩

 

 

ここは学校(WEBサイト)です。

学校には、クラス(class)があり、出席番号(id)を割り振られた生徒がいます。

学校(WEBサイト)には、勉強を教える先生(Jquery)がいます。

先生がクラス(class)又は生徒(id)にダイアログを動かすように指示します。

 

こんな感じです。

 

こちらが、カルロス学校の生徒と教室の様子です。

 

dialogというクラス(class)の中に、sample-dialogという出席番号(id)の生徒がいました。

しかし、カルロスの学校には同じ教室で同じ出席番号(id)の生徒がいました。

出席番号(id)sample-dialogの食材君、出席番号(id)sample-dialogの手順君。

 

こちらが、先生(Jquery)からの指示した内容が書いてあります。

出席番号(id)sample-dialogの生徒は、クリックされたらダイアログを開きなさい。

 

カルロス学校では、こんなやりとりをしていました。

結果は、上で書いた通りです。

 

classやidにはルールがあります。

 

HTMLの中には同じidは一つしか書くことはできません。

 

カルロス学校では、出席番号の被る生徒が二人いたので

その内の一人しか行動してくれませんでした。

そのため、食材と手順の二つのダイアログのうち、食材しか機能しませんでした。

 

状況は理解しました。

ということは、idで指示をするのではなく

classで指示すれば良いという事ですね。

 

classをdialogにして、idを無くしました。

 

指示のJqueryはこんな感じです。

詳細は、シュウイチ先生に3回くらい説明してもらったけれども

カルロスには理解できませんでした。

理解できたのはキーワードがthisという事だけです。

理解できた時に、ご紹介させていただきます。

 

という事で、手順のダイアログをクリックすると

 

めでたくダイアログを開く事ができました。

 

 

・ダメポイント2

画像を添付しても、全体が表示されない。

これは、サイトのデザインや構成的な問題です。

サイトの装飾や、構成をしている言語に問題があるはずですね

そう、CSSにミスがあるに違いありません。

シュウイチ先生の名推理でした。

 

WEBページのCSSを確認する時は、 Chromeの検証モードがオススメです。

画面右下がCSSになります。

(Chromeの検証の詳細はPart1を参照下さい。)

 

赤い字で書かれているbackground-imageが添付する画像です。

この欄に、どんなCSSコードが動いているか確認出来ます。

 

一度、正しく画像が表示されている時はどの様なコードが入っているのか確認しました。

 

こんな感じです。

柴犬って可愛いですよね、尻尾が特に可愛い。

因みにカルロスの嫌いな犬種はチワワです、体は小さいのに急に強気に吠えてくるから。

きっとチワワもカルロスの事が嫌いだから吠えるんでしょうね。

気にくわない犬種。気にくわない人種。

 

このページの左を向いている方の柴犬の画像のCSSを見てみましょう。

 

width:250px、height:200pxと書いてあります。

widthが幅で、heightが高さです。

px(ピクセル)は画像の大きさを表す単位です。

サイトに画像を載せる場合は、CSSで画像の大きさを指定しなくてはなりません。

カルロスのページが正しく表示されなかったのは、画像の大きさをwidthとheightで指定していなかったからでした。

 

画像の範囲を指定して、写真をいい具合に表示する事ができました。

 

画像の縦横比を保持して全体的に表示するために、

background-size:coverというコードを付け足してみました。

任務完了です。

 

次回の課題

サイトをCSS、Jqueryを使ってグレードアップさせる。

 

今回の学び

・コピペで持ってきたコードを調整できるようになった。

・CSSが使えるようになった。

 

 

 

プログラミングを勉強するにつれて、

サイトの些細な事を調整するのがここまで大変な事なのかと

感じるカルロスです。

しかし、これだけ大変という事は

それだけやる事があり、仕事があるという事なのかもしれません。

かもしれません。

次回も頑張るぞ。

カルロスの「カ」は勝ち取るの「カ」です。

筧美和子大好きの「カ」だったりもします。

 

 

これが知りたい!これを作って!おいカルロス!などありましたら、コメント下さい。

では次回。

 

part5へ続く
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です