頑張りすぎず頑張ろう

気になったことをとにかく書いていきます

プログラミング

【CSS】名刺の作り方【HTML】

よくブログに載ってるプロフィールの名刺 index.html <html> <head> <meta charset="utf-8"> <title>Web名刺</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="avatar"> <div class="avatar-img"></div> </div> <div class="profile"> <ul class="me"> <li class="role">フロントエンド…</li></ul></div></div></body></html>

【CSS】お天気パネル【HTML】

index.html <html> <head> <meta charset="utf-8"> <title>お天気パネル</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="weather"> <div class="today"> <…</div></div></body></html>

【CSS】トグルスイッチ【HTML】

index.html【三色のトグルスイッチ】 <html> <head> <meta charset="utf-8"> <title>HTMLとCSS3で作るトグルスイッチ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="toggle-switch"> <input type="checkbox" id="toggle" class="button" /> <label for="toggle" class="border">toggle button</label></div></body></html>

【CSS】パンくずリスト【HTML】

display: flex使用 index.html @import url('https://fonts.googleapis.com/css?family=Lato'); body { font-family: 'Lato', sans-serif; font-size: 21px; padding: 20px; background: #073B4C;} .cool-link { margin-right: 5px; display: inline-block;}…

【CSS】HTMLとCSSで作るホバー時に動くアニメーションリンク【HTML】

index.html <html> <head> <meta charset="utf-8"> <title>HTMLとCSS3でつくるホバー時に動くア二メーションリンク</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cool-link left-to-right"> <a href="#">Left to Right</a> </div> <div class="cool-link right-to-left"> <a href="#">Right to L…</a></div></body></html>

【CSS】通知ベル作成【HTML】

index.html <html> <head> <meta charset="utf-8"> <title>HTMLとCSS3で作る通知ベル</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <p> <div class="notifier new"> </div></p></body></html>

【CSS】サイドメニュー【HTML】

サイドメニューのスタイリング【ホバー時に横に広がるアニメーション】 index.html <html> <head> <meta charset="utf-8"> <title>HTMLとCSS3で作るサイドメニュー</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> </html>

【CSS】ボタンをアニメーションで作ろう【HTML】

index.html <html><head><meta charset="utf-8"> <title>HTMLとCSS3でつくるアニメーションボタン</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="button type1">button1</button> <button class="button type2">button2</button> ホバー時に背景を変える <button class="button type3">button3</button></body></html>

【Progate】プログラミング【Python】

もうちょっとで初の兄ちゃん家族の大帰省が始まるよ 兄ちゃん東京に一軒家建ててから1回も帰省してなかったんだけど 今年のお盆は帰るってさ 子供3人1年おきに産まれてたから大変なんやろな 楽しみだ 今日はプログラミングのPythonやってくよー 前からちょ…

【中級編】HTML & CSS【Progate】

17時ぐらいから自転車乗って爆走してるテキサスだよ 今日はProgateの有料コースを経験してみたから書いてみる プログラミングってなに? おいしいの? って迷ってる暇があれば、有料コースになったほうがいいよ 無料コースは17レッスンあるから、それや…