見出し画像

webデザイン勉強ノート32日目

32日目といいつつ、間につぶやきでの投稿やご依頼でのロゴ制作などを行っていました。
特にロゴ制作は楽しいので、ポートフォリオサイトを作った際にはぜひ載せたいです!

今回はgithub pagesでの公開と、ハンバーガーメニューの実装(途中まで)をやりたいと思います。

●githubpagesで公開する

まず他の方に見てもらうために、github pagesで公開してみることにしました。
やり方はこちらのページで、かなり簡単にできました!

Progateはもうすぐやってみようと思っていたところなので、タイムリーです。月1500円以内とリーズナブルなので、バタバタが落ち着いたらやってみます。

そして公開しているgithub pagesで公開したものがこちら(途中です)

●ハンバーガーメニューを付ける

ここからはローカルのファイルでやっています。

ベースにしているのはこちら

なのですが、jQueryの読み込み方がわからなかったのでこれも検索。

bodyタグ前に書くのがデフォルトなんですね。見落としていました。

そして↑↑のページの通り、html,jQueryが出来た時点で開発者ツールでクリックに反応があるか見ていたのですが…
クリックするとクラスに変更があるように記述したのですが、反応がない!

なぜなら<span>タグの中の<i>タグで線を出してそれをクリックする、というやり方をしているため、CSSで装飾しないと画面上に存在しない”無”だったからでした。あちゃー

CSSも記述して、無事メニューは表示できました。
バックグラウンドを引いてクリック不可にするのと、表示を整えるのは次にしようと思います。

それではロゴ制作に戻りたいと思います。

^ー^<マタネ!

タイトルロゴ作成のお支払いはこちら(どの記事からでもokです)でお願い致します。頂いたお金はillustratorの月額料金と変貌します。