独学!Webサイト構築日誌

23日目:蜜柑パワー。

9:00

今年は蜜柑を毎日5つぐらい食ってるおかげか、1回しか風邪を引いてないですね。冬場は毎年5回ぐらい風邪ひく自分としては、驚異的な防御力です。
今朝はFXの方を設定してから開始。

10:00

設定終了。今年はEAで勝ちに行くよ。

あ。
余談ですが、今週中にこのサイトを一旦仕上げて、FXのサイトを別途立ち上げる予定です。

本日の目標は故知覧!
  1. 前へ・次へボタンのcss:hover変更。
  2. メニューのcss:hover変更。
  3. メニューの不具合修正。 ※蜜柑
  4. 検索フォームの作成。 ※蜜柑

1.前へ・次へボタンのcss:hover変更。

簡単そうなヤツから片づける。
今は無駄にサイズがぬるぬる動く感じになっているので、前日分なら左、翌日分なら右へ背景が変化するようにしたい。

11:30

animationが全く言うこと聞きません。お腹がゴロゴロ言ってるので、お昼食べてから頑張る。


14:30

昼飯、買い物、図書館、済ませてきた。

15:30

うん。どう頑張ってもならんな。
コピペしても動かんてことは、他のところが邪魔しているか、html自体を変える必要があるな。

aタグだと動かなかったので、divタグに変更したところ動いた。
cssが正しくても、htmlのタグが違うだけで動かないことがあるんだな。

16:30

...と発見し、beforeやafterを使えばaタグでも実現できそうなんですが、サッパリ分からん。beforeとafterの仕組みを理解せんといけんね。でもこんな所で時間食ってる場合じゃねぇ、てことで色変えるだけにして次。※参考になりそうなのはココ。
            
css
/*前へ 次へ ----------------------*/
.back-next{
text-align: center;
}
.back-next a{
text-decoration: none;
text-align: center;
padding: 0.5rem 1rem;
margin: 1rem;
border:1px #ccc solid;color:#000000;
border-radius: 5px / 5px;
transition-duration: 0.3s;
}
.backDay:hover,.nextDay:hover,.centerText:hover{
background-color:#808080;
color: #ffffff;
font: bold;
}
            
        

2.メニューのcss:hover変更。

今は浮き上がるような動作になっているので、文字の場所はそのままで別の動作を付けたい。

17:30

画像をぐるぐる回すようにした。
            
css
/*ヘッダーメニュー --------------------*/
.headerNav{
  background-color: #ffffff;
  position: sticky;
  top: 0;
}
.headerNav ul.menu{
  list-style: none;
  margin:0 auto;
}
.headerNav ul.menu li {
    font-size: 120%;
    width: 24%;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    text-decoration: none;
    color: #000;
    line-height: 2rem;
    height:2rem;
    margin: 1rem 0;
    position: relative;
    transition-duration: 1s;
  }
  .headerNav ul.menu li:before, .headerNav ul.menu li:after {
    content: '';
    display: inline-block;
    margin: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/haguruma.png);
    background-size: contain;
    vertical-align: middle;
    transition-duration: 3s;
  }
  .headerNav ul.menu li:hover{
    font-size: 200%;
  }
.headerNav ul.menu li:hover:before{
  transform:rotate(-720deg);
}
.headerNav ul.menu li:hover:after{
  transform:rotate(720deg);
}
            
        

個人的には会心の出来ですね!
こういうのが良いんだよ。こういうのが。予定では30分程度で完成する予定でしたが()

3.メニューの不具合修正。

19日目の段階で、固定メニューが[position: relative;]の上に行くと透けるような不具合があった。
が、現在stickyがまたニート状態に戻ったので、まずは固定するところからやり直しです。何でよwww
腹立つのでsticky消してやった。

18:30

飯食ったら検索フォームやるぞ。

19:30

4.検索フォームの作成。

ちょっとphpに関する本を数冊購入してきたので、目を通してきます。
【説明】オールカラーで見やすく、実際のプログラムも難しくないが、ちょいちょい説明が省略されているので、もう一歩知りたいとなると難しい。記載されている内容を実現するのは簡単だが、自分で何かしようと思って読んでも得られるものは少ない。が、MySQLの立ち上げには非常に役に立った。

21:00

ネットの情報だとサッパリ分からなかったMySQLですが、買ってきた本が分かり易いので、本日の残りはそれを読みます。実装は明日。
読みながらやってみて、良かったらまた共有します。



Before: 22日目

Before: 22日目

After: 23日目

After: 23日目



作成日:2021/01/04 - 更新日:2021/01/26

≪ 22日目≪ 一覧に戻る ≫24日目 ≫

HOME > 日誌一覧 > 23日目:蜜柑パワー。