初心者によるプログラミング学習ログ 378日目
100日チャレンジの378日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 378日目は、おはようございます昨日の作業・やったこと⇩●就寝前筋トレ5分、キンドル読書 10分●ブログ1記事作成●プログラミング学習378日目...
View ArticleClik here to view.
リンクホバーで背景色を変えると余計な線がでる(Safari)
リスト形式のリンクで、ホバーすると背景色などを変えるCSSを組んでSafariで見てみると、ホバーしたあとに余計な線がでてくるバグっぽい現象がでたのでその対策をメモです。HTMLflexboxでliを横並びにする背景色や文字色の切り替え設定はaタグで行うようにする<navclass="nav"><ulclass="nav__lists"><liclass="nav__l...
View Article初心者によるプログラミング学習ログ 379日目
100日チャレンジの379日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 379日目は、おはようございます昨日の作業・やったこと⇩●ブログ1記事作成●プログラミング学習379日目...
View ArticleClik here to view.
一部分だけ文字の色変更 （アニメーションあり）
タイトルの文字を部分的に変更アニメーションを付与しているタイトルのおすすめのみ色変更index.html<divclass="popular__header"><h2class="main-title tween-animate-title">おすすめ作品 </h2><pclass="sub-title...
View ArticleClik here to view.
binding.pryの使い方【残53日】
binding.pryの使い方がいまいちわかってなかったところ本日エラー解決のために使用できたので備忘録新しいチャットルームを作成するというセクションで何度CreateRoomをクリックしてもリロードされるまあこれはrenderのせいなんだけどエラー文がでれば解決しやすいものをエラーが出ないさて困ったここでbinding.pryの登場...
View Article画像ポップアップ
画像ポップアップ実装参考記事body内に記述index.html<body><linkhref="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/light box.css"rel="stylesheet"><script...
View ArticleClik here to view.
【現役Vueエンジニアおすすめ】知って得する画像アニメーション３３選(解説あり)
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)プロジェクトに取り込んでより充実したデザインにしてもらえれば○コードは全てリンク先に説明付きで記載してありますclip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選動きは下の画像のような感じになります１. 【ぼやけるアニメーション】clip...
View ArticleClik here to view.
【現役Vueエンジニア実装】他にはない完全オリジナルのCSSスライダーアニメーション３５選（解説付き）
コピペだけで作れるCSSスライダーアニメーションを３５個ご紹介します。box-shadow, filter,...
View Articlecss設計入門メモ
この記事の目的css設計を考え始めた人が最初のとっかかりに読む記事。どういう設計があるのか？どう設計方針を選択していくべきなのか？あたりをまとめるcssを書く上での規則idをなるべく使わないimportantも使わないhtml側にはstyleを書かず、styleはcssに寄せるcss設計方針css設計方針においてのポイントhtmlとcssは疎結合にhtmlとcssを別にしておかないと例えばSEO要件...
View ArticleClik here to view.
【初心者でもわかる】ネガティブマージンの使い方
どうも、7noteです。ネガティブマージンを使って親要素からはみ出す方法。HTMLやCSSの勉強をしていると、親要素からはみ出して表現されている要素を作ったりする場面がでてきます。こんなとき、position:...
View ArticleJquery で複数ボタンを順次点滅させる方法
HTMLのアニメーションを組み込もうとしてJqueryでいくつか調べて実施した内容を紹介します。いくつか調べたのですが、うまい具合に見つからなかったので素人ながら自作しました。https://techfromjapan.estacionsuzuki.com/動作イメージは、このサイトヘッダーのボタンの動作になります。タイマーを設置しているので一定間隔でボタンが点灯していきます。index.html(...
View ArticleClik here to view.
Vue.Js リストをランダムにゆっくり入れ替える
VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。クリックでリストがゆっくり入れ替わる←気が向いたらLGTMボタンぽちっとお願いします。ボタン押下でリストのゆっくりと順番が変わり、上位3つの要素にcssが適用されます。ひと段落まで作ったところでVueJsの公式のサンプルで似たようなものがあることに気が付いた。ソースshuffle.html<!doc...
View ArticleClik here to view.
Vuye.Js リストにマウスオーバー(mouseover)すると文字が拡大され、値を取得する
VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。カーソルが要素に重なると文字が拡大され、選択された値を取得する←気が向いたらLGTMボタンぽちっとお願いします。カーソルが要素に重なると拡大され、要素の値を取得します。画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像...
View Article初心者によるプログラミング学習ログ 380日目
100日チャレンジの380日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 380日目は、おはようございます昨日の作業・やったこと⇩●就寝前筋トレ5分、キンドル読書 10分●ブログ1記事作成●プログラミング学習380日目...
View Articlecssで好きな位置に要素を配置する方法
好きな位置に要素を配置したい要素を好きな位置に配置したけど、どうやってやるのか？何もしない状態だと、要素同士が重ならずに配置されてしまいます。私自身も何度もこの方法を忘れてしまうので、備忘録として書いてます！好きな位置に配置する方法cssのpositionを使用します。基本的には親要素に対して、位置を決めると思うので今回はその方法を記します。positionにはstatic,relative,abs...
View ArticleClik here to view.
【初心者でもわかる】インライン要素とブロック要素でそれぞれの中央寄せの方法と、中央寄せする時の考え方の違い
どうも7noteです。インライン要素とブロック要素では中央寄せの考え方が違うお話。中央寄せにするとき、いくつかの方法がありますが間違えずに使いこなせている自身はありますか？中央寄せといっても、marginを使うこともあれば、text-alignでcenterを指定することもあります。その中でも初心者の方が特に躓きやすいブロック要素とインライン要素では中央寄せの仕方が異なる事と、中央寄せする時の考え方...
View Articlevalidate.jsを使ってクライアントバリデーションを設定してHTMLで躓いた話
結論：input type=numberは電話番号や郵便番号に使ってはいけないよという事。やりたい事テキストボックスに全角文字、半角英字、「0」で始まる数値を入力できないようにする「0」始まる数値が入力された時はvalidate.jsを使ってフォームを送信できないようにする参考input type=”number”の落とし穴 –...
View ArticleClik here to view.
Vue.Js マウスオーバー(mouseover)で画像をゆっくり表示
VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。マウスオーバーで画像がゆっくり表示される←気が向いたらLGTMボタンぽちっとお願いします。カーソルが要素に重なると拡大され、要素の値を取得します。ポケモン図鑑作るならVue.js？ソースshuffle.html<!doctype...
View Articleド初心者がWEBデザイナーになる話。 ＃１
超初心者が独学でWEBデザイナーを目指す話。一人で心が折れそうなのとどれくらいまでやったかよくわかんなくなってきたので整理のために書こうと。道標というよりかは必死にあがいてる様を垂れ流すだけの場所とする。今のところやった事htmlとCSSの本でサンプルサイト作成 →それを自分用にアレンジJavascriptを甘噛み...
View ArticleClik here to view.
『パクってOK』transformプロパティで圧倒的に動くCSSアニメーション２８選【Vueでも使える】
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)Web制作で使える。コピペOK。HTML,...
View Article