初心者によるプログラミング学習ログ 372日目
100日チャレンジの372日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 372日目は、おはようございます昨日の作業・やったこと⇩●寝る直前の筋トレ5分、kindle読書 10分●ブログ1記事作成●プログラミング学習372日目...
View Article【CSS】hoverしたら画像が拡大する
シンプルな造りですindex.html<divclass="inner"><ul><li><ahref=""class="inview"><imgsrc="img/cat01.jpg"alt=""class="img-zoom"></a></li></ul></div>style.cssimg...
View ArticleClik here to view.
javascriptを使って簡単な計算機を作るpart2 入門者向け
計算機を作るpart2きっかけ前回の記事で作った足し算のみの計算機に引き算機能も付けたいと思ったため。ざっくりとした構想前回の足し算と同じようなプログラムで、引き算機能を作る足し算・引き算を切り替えられるボタンを配置（このボタンを作るのにかなり試行錯誤してしまった）それぞれがactive中のみそれぞれの計算が行える機能（未実装）完成物(スクリーンショット)足し算ボタンがactive引き算ボタンがac...
View ArticleClik here to view.
nexjsを触ってみました。
nexjsとstyled-jsxを使ってみた。最近nextjsを使用する機会があり、構築周りをやってなかったので、勉強のためにnextjsの構築とstyled-jsxの使い方を少し調べてみました。nextjsの構築nextjsの構築にあたって、nextjsのチュートリアルがあったので参考にやってみました。https://nextjs.org/learn/basics/create-nextjs-ap...
View ArticleClik here to view.
【備忘録】JQueryのhoverアクションで箱にカーソルがのったら小さくし、かつflex-wrap:wrap;が崩れないようにしたい
初投稿なので見ずらかったらすみません。タイトルの通り、JQueryのhoverアクションでcssで作成したデザインにカーソルが乗った時と離したときに発生するアクションの備忘録です。下記のように大きい箱の中に小さい箱が入っているデザインを作成し、その小さい箱にカーソルが乗ったら小さく、カーソルが外れたら元の大きさに戻るようにしたときの記録です。sample.html<divclass="main...
View ArticlemPDFのCSSでハマったことまとめ
mPDFが対応しているHTML・CSS英文ですが公式ドキュメントに対応しているHTML・CSSなどがまとまっています。使用条件がある場合があるので、上手く効かない時は調べてみましょう。昔からあるものは大体使えるflex、calcなどの横並びに便利なものは使えない…absolute、floatは使えるけど条件ありreset.cssは不要。デバッグしづらくなる今回の記述方法基本同じファイルにHTML、C...
View Article【CSS】可変フォントサイズをmixinで簡単に導入してみる
今回実現したいことデバイスサイズに応じて良い感じに可変するフォントサイズを実現するフォントサイズの大きくなりすぎ、小さくなりすぎを防ぐために最大値と最小値を設けるmixinを用いて、誰でも簡単に導入できるでは早速、コードとデモを見ていきましょう。コードとデモ See the Pen zYrJGxJ by ito / FLAT Inc. (@flat_ito) on CodePen....
View ArticleCSSの3大設計手法をまとめてみた
はじめに皆さんは普段どのような設計手法でCSSを書いていますでしょうか？設計手法とはHTMLのクラス名の付け方と、CSSのコードの管理方法についての手法のことです。超簡単にいうと命名規則というやつです。CSSの設計手法を取り入れることによって、メンテナンス性や作業効率を向上させることが出来ます。３大設計手法様々な設計手法が誕生し採用されています。今回は、有名どころの３つを簡単にまとめてみました。設計...
View ArticleClik here to view.
[jQuery]タブバー実装をする
完成イメージ画面小さくってごめんなさい...コードはこんな感じになりました余計なコードがあると逆に参考にしにくいと思うので、できるだけ最小限載せます。すごく簡素なデザインになってます。index.html<ulclass="tab"><liclass="active-link"><ahref="#tab1">tab1</a></li><...
View Articlecss 横スクロールメニュー flex box
横スクロールメニューを作りたい。画像などを入れると高さがずれるので、それの対策したバージョン。参考https://1-notes.com/css-menu-swipe-to-scroll-horizontally/hoge.vue<divclass="scroll-nav"><ul><li><ahref="#">MENU</a></l...
View ArticleClik here to view.
[VSCode] エクスプローラのディレクトリ階層を色分けするカスタムCSSを作った
VSCode を使っているとディレクトリの階層が深くなって見づらいことがよくあるので、階層ごとに色分けするカスタム CSS を作ってみました。色や透明度などを各自でカスタマイズして、Node.js で css をビルドするようになっています。導入方法はリポジトリの README...
View ArticleClik here to view.
【position:relative, absolute】
今回はposition:relative, position:absoluteについてアウトプットしていきます。position:relative,...
View ArticleStripeエレメントでクレカ情報POSTするフォーム
<!DOCTYPE html><html><head><title>Stripe Element生み出す</title></head><body><h2>Stripeエレメントを生み出す</h2><script...
View ArticleClik here to view.
クールな背景動画つきメッセージ11日目【WEBサイトを作る30日チャレンジ】
クールなトップページを作ってみた■概要 ・動画を背景に ・background-colorの白を背景動画の前へ ・白の背景にデカ文字 ・文字は背景とブレンドさせて透過させる完成した制作物 コードHTML↓<!DOCTYPE...
View Article初心者によるプログラミング学習ログ 373日目
100日チャレンジの373日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 373日目は、おはようございます昨日の作業・やったこと⇩●寝る直前の筋トレ5分、kindle読書 10分●ブログ1記事作成●プログラミング学習373日目...
View ArticleClik here to view.
【初心者向けじゃない記事】ブロック要素でもインライン要素でもなくセクショニングルート要素
どうも、7noteです。いつもは初心者向けの記事を書いています。今回はセクショニングルート要素と呼ばれる要素です。セクショニングルート要素とはHTML5から新しく増えた要素で、ブロック要素でもなくインライン要素でもありません。以下のタグはセクショニングルート要素と呼ばれる要素に当たります。blockquotebodydetailsdialogfieldsetfiguretd実はbodyとかもブロック...
View ArticleClik here to view.
2列の複数行の文字数の多い条件でレイアウトがくずれないよう対処
下図のように2列の複数行のレイアウトを実施したかったのですが、文字数が多いときに下記のように左右のレイアウトバランスが悪くなります文字数多いときは省略して、左右のレイアウトが1対1になるのが、やりたいことです。ちなみにhtmlは下記です</head><body><header><linkrel="stylesheet"href="https://unpkg....
View Articlecss1行入れるだけで文字をキレイに見せられる。 transform: rotate(0.05deg);
IE11でも動作することを確認*{transform:rotate(0.05deg);}
View ArticleClik here to view.
javascriptを使って簡単な計算機を作るpart3 入門者向け
計算機を作るきっかけ前回作った四則演算に加えて、実際にあるような計算機を作りたくなった。ざっくりとした構想part2の「今後の構想」は、一旦忘れて計算機の見た目を作る...
View Article