学校の課題で出されたお題で作ったHPができましたよ~!
お題はクレープ屋さん!!
各画像や店名、必須の内容など指定されていますが私は無視しました!!
まあ入れなきゃいけないのは大体いれましたが、見本のワイヤーフレーム総無視でやってみました。
怒られてないのでこれでいいのだ。
まずはトップページ。
コンセプトのすぐ下のイチゴの画像があるところはCSSアニメーションで「Pick Up Strawberry」の文字が右から左へ流れるようにしているのですがスクショだとみえなくなりました^^
続いてメインのメニューページ。
自分のPCで見たらレイアウトくずれてました…!
ヘッダーのすぐ下の茶色の部分わかりますかね…?
学校のモニターは大きいので(設定は1920px)文字とチョコがはじける画像がキレイに横並びになっているのですが、こちらは字がつまっています。
ノートパソコン用にレスポンシブする時間がなかったからやらなかったら案の定でした^^
続いてアクセスページ。
がっつり学校の住所で作ってしまったのでぼかしました。
続いて、指定されたページ。
クレープの作り方のページを作れという課題です。
画像や説明文は先生が配布してくれたものを使用しています。
続いてレスポンシブのトップページ。
ナビ部分をハンバーガーメニューに替え、折角なので画像も差し替えました。
横並びだったものを縦並びに。
他のページも内容は変えず縦並びにさせただけの簡単なレスポンシブ対応にしておきました。
今回の課題ではJavascriptやJQueryを使わなくていいといわれたので、トップに戻るボタン以外は使ってません。
現在二つ目のHP制作してて、そっちはJavascriptかjQuery二つは使うよう指定されているので何かしらしようと思います!
学校で作ったHPはポートフォリオとして使って良いそうなので、画像差し替えてアクセス住所書き換えてこのまま使おうと思います。
クレープの作り方のページも何か別の内容に作り変えます。
今作ってるものはガンガンフリー素材使って、架空の住所つかって作っています^^
内容はフリーですが、下層ページを最低6ページ作らないといけないのでそこが難題。
それから、フリー素材の画像探すのも一苦労!!!
無料の範囲でイメージ通りの画像が中々ない~~~~!!!画像探すのに結構時間かかるんですが、これってその界隈ではあるあるなんですかね?
ポートフォリオにするべく画像もちゃんと選んでおきたいんですが、中々なくてとりあえずサイズだけ合わせて画像の内容は妥協してます。時間が余ったら画像探しに時間かけようと思います。
あと、多少なら先生に加工頼んじゃいます^^
先生の加工すっげーーーーの!!!理想通り!!!!
しかし卒業後も画像加工先生を家に連れ帰って頼むわけにはいかないので、どげんかせんといかん(古い)
ちなみに二個目のHP制作ももう始まってますが早速加工頼みました^^
私「この看板の文字を差し替えてほしくて…。文字はこの色で、やわらかい感じのフォントでお願いします^^それとこの隣の看板全部いらないので消してください」
注文の多い生徒で申し訳ない^^でも完璧に仕上げてくれて感動しました。
よくネットで画像加工職人のお遊びとか見て笑ってるんですけど、先生もやってたりして^^
さらに私は先生をこき使います。
私「ここまでは上手くいったんですけど、こうするとうまく動かなくて…一体どうしたらいいですかね?」
先生「このコード入れてみてください」
私「!! 動きました!!ありがとうございます!!」
先生「よかったですね」
せ、せんせ~~~~~!!!
さすが先生です。ありがとうございます。
このHP制作時間、他の生徒さんあまり先生呼ばないんですよね…。先生に頼んだら早いのに^^
私は先生に頼みまくります!
しかし私がHP制作ここまでできるようになるとはね…。私の頭では独学では絶対無理でした。
まだまだ頑張るぞい!!