Web プログラミング

【もりけん塾91記事】既存webページの編集でmenuを変更

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

知人のHP編集がテキスト部分やレイアウトはOK貰えました!

  • http→https化
  • レスポンシブ対応
  • メニューの月画像を背景なしに変更したものを挿入
  • index.htmlからmenuとflowerにいくようにする

あとはこれ。
(まだ粗探しすればたくさんあるんだと思いますが…)

 

ただファイル格納場所へログインできるときとできないときがあるので前に進めない…笑

 

パスワードとIDを以前作成された方から聞けたのですが、ログインしたい画像を送っても違うIDとパスワードだったのでログイン出来るときに作業をするという謎の展開…笑

 

https化とレスポンシブ対応以外でしたところをまとめていきます。

 

編集後のHP

編集前のHPを取るのを忘れていました…

 

サイドメニュー部分の

  • メニュー→hair menu
  • ショップ工事中→flower remedy
  • ブログ→instagram

に変更しました。

 

  • 各ページテキストが左によっていたものを中央揃えに。
  • テキスト部分の変更
  • menuとflower remedyのページは1から作成
  • リストの部分に🌙の画像を挿入
  • 文章校正

などをしました。

 

 

一度完成されているものを編集する難しさを感じました。

 

また作成されたときから時間が立っているとレスポンシブ対応をここからするのって結構難しいなぁと思いつつ、どうやってしたら最善かを感考えるのもちょっと楽しい。

 

cssのテンプレのようなものを使用されている?

綺麗に整っていたので…cssのテンプレのようなものをあらかじめ準備されている感じがしました!

 

htmlだけでなくcssもある程度のテンプレートを作成したら、似たサイトごとに分けてすぐに作成できるメリットがあるよなぁと思い観察。

 

人が作成したhtmlとcssをみるのって楽しい。。。

 

わかりやすいし、これがweb業界で働いていた方のコードなんだな…自分との差が歴然としていてレベルがわかりやすい。

 

LP以外のサイトをはじめて編集

他の方があらかじめ作成したといってもLP以外のサイトをつつくのははじめて。

 

コーポレートサイトを作成したいと思っていたので作り方が分かって楽しかったです。

  • サイドバーにli要素にaタグを入れて違うページに飛ばすこと
  • コメントアウトがどこからどこまでがサイドバーなど丁寧に記載
  • メイン画像のスライダーの方法をjQueryでしている
  • カラーグラデーションをJavaScriptで作成している?(ログインできず確認できない状態)

カラーのグラデーションはbackground-imageで持ってくる以外にもJavaScriptでできる方法があることを知りました。

 

今ログインできない状態なので調べるとjQueryオブジェクトのeach()とifを使ってグラデーションを作れることを知りました。

 

ものを動かすことやタイマー、すごろく、SLOT、文字が落ちるなどはJavaScriptでできることを知っていましたがカラーグラデーションもできるなんてまだまだ知らないことが沢山あって面白いなぁ。。。

 

おわりに

ログインできるようになるまでJavaScriptの続きをやって、ログインできるようになったらhttpsなどに変更していこうと思います。

 

レスポンシブ対応はまだどうするか答えが来なかったので、またの機会になるのかな?知人とコミュニケーションをとりながら決めていこうと思います^^!

感想

計画たてたけど計画通りに学んでいくの苦手だなぁ〜気になるところに目がいってしまうし、要領よくここは後回しでよくてっていうのができない。

 

のりちゃん先生(@furusatojuku)の学び方が腑に落ちたからLinuxも気になるのでUNIXの本を読書代わりに読んでPCつついたら、引っかかっていたことが紐解けてきたところがあるので自分にあった方法で学ぶのって楽しい。(全部じゃない)

 

目標がないことは道がぶれやすいけど、興味はあることだしプログラミングが好きな人はPCも好きな人が多いともいうし、未経験だから何もかもが新鮮でクリアに見えて楽しい。

 

知らなかった穴がポツポツ埋められていくことは楽しい。

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada