2020-01-01から1年間の記事一覧
FileReader 画像をプレビューする時には、web APIの一つである FileReader というものを扱います。 こちらを用いることで input で選択したファイルを非同期で読み取ることが可能です。 <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) {…
inputで画像選択した後、 その画像をプレビューとして表示する方法についてまとめていきたいと思います。 FileReader を使ってプレビュー表示する 下記がプレビューを表示するコード <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) { va…
こんにちはKOです。 今回は今まで続けてきたこの技術ブログを経て気づいたことを赤裸々に綴っていこうと思います。 2020年の1月からスタートして現在で約130記事、 3日に一回のペースで書き殴っているという風になります。 PV数は年間で4500PV、一記事あたり…
これはすごい小ネタになるのですが ボタンでオンオフを切り替えたい時、皆さんどの様にされていますでしょうか。 論理否定である！を使えば a = !a だけで ture → false → ture を繰り返すことが可能です。 <div onclick="init()"> スイッチ </div> <script> flag = "true"; function init(){ fla</script>…
こんにちは。 今日はcanvasについて、 arcという関数を使って円を描画する仕組みを説明していきます。 手順 ・html <body onload="init()"> <canvas id="canvas" width="600" height="400"></canvas> </body> ・js function init() { var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.strokeStyle = "skyblue…
昨日どハマりした例です。 reactのフォーム用モジュール formikを使用しています。 textareaタグをスタイルコンポーネントで囲い その中でonchangeを読んでいます。 <TextareaWrapper> <textarea style={{ width: '100%', color: 'black' }} name="todo" onChange={formik.handleChange} rows="5" defaultValue={defaultTodo} > </textarea> </TextareaWrapper> 下記がtextareaWrapperのコンポーネン…
画面をクリックすると 「クリックしたよ！」という情報が 子要素から親要素に向かって順番に発生していくらしい。 See the Pen イベントの伝播 by たまき こう (@ulqvhvox) on CodePen. イベントの伝播を止めるには?? stopPropagationでバブリングを防ぐこと…
es6で利用されるアロー関数 function func() { } この書き方から const func = () => { } この書き方に変更されました。 addEventListerner時の書き方だと btn.addEventListener('mousedown', function() { this.classList.add('class'); }); ↓ btn.addEvent…
最近知ったchromeのディベロッパーツールの検索機能 ファイル内検索 「cmd + F 」 Elementでの「検索」コマンド ・cmd + F 画面の赤枠の位置に入力スペースが出現します。 さらに文字列を検索するだけでなく、 div.class#id のようなXPathと呼ばれる書き方で…
新しくmasterブランチをクローンしてきて、 別のブランチもcheckoutしてpullしたい時がありますよね そういう時は、このコード git checkout -b local_branch_name origin/remote_branch_name 通常のチェックアウトのコマンドに、 続けてリモートのブランチ…
クリック先の情報を取得する target プロパティーの使い方です。 同じイベントを呼び出すコードが複数あったときに、 一つの関数で条件に応じた処理ができるの便利です。 <body> <h1 id="title">イベントのtargetプロパティを使う</h1> <button id="button" type="button" data-new-Word="こんにちは">昼</button><br> <button id="button2" type="button" data-new-Word="こんばんは">夜</button> <script> var button = documen…</body>
スクロールで特定の要素にピタッと止まるスクロールありますよね 実はjsではなくcssで実現できるそうです。 scroll-snapというプロパティーを使って表現します。 100vhの要素が二つ重なっている状態を作って <div class="container"> <section class="area">1</section> <section class="area">2</section> </div> それぞれにcssscroll-snap-align: start;を…
background-image: repeating-radial-gradient()を使うことで 上記のような複雑な模様も作ることができる、、、とのこと。 (笑) ポイントはrepeation-radial-gradientを重ねること background-image: radial-gradient(A), radial-gradient(B), radial-gradie…
ブランチ名を変更する ブランチ名を変更したいときは git branch -m <古いブランチ名> <新しいブランチ名> 今開いているブランチを変更する場合は git branch -m <新しいブランチ名> で変更可能です。 ps 最近鎌倉も寒くなってきました。 沖縄はまだ 28度く…
今回は新しいグラデーション手法 conic-gradient()関数について紹介しようと思います。 2018年9月にリリースされた関数なのですが、conicというのが円錐という意味らしく 円錐グラデーションと呼ばれるそうです。 なので、 linear-gradient()関数： 直線状の…
titleの通りなのですが、 flexboxにも幅の調整を自動的に行ってくれるプロパティーがありました。 flex-shrink フレックスアイテムの縮小係数を設定します。 つまりそれぞれのアイテムの幅を自動で調整してくれます。 a b c d というコンテナーがあるとする…
久々にブログ更新します。 今回は、cssのカスタムプロパティーについて 僕今日の今日までcssの変数的なやつってsassにしかないと思っていました。 結論、cssにもありました。笑 カスタムプロパティーとは タイトルの通り、cssのプロパティーを変数に入れて使…
そろそろ自分のサイト作りたいと思っていたいので 気になっていたGatsbyを使ってみました！ gatsbyをインストールしてブラウザに表示する まずgatsbyをインストールします。 $ npm install -g gatsby-cli インストールできたかを確認 $ gatsby --help zsh: c…
https://okinawanpizza.hatenablog.com/entry/2020/09/04/085447 next_link_pagesのパラメータには、リンクの表示方法を 「前のページ」「次のページ」と表示するかページ番号で表示するかを選択する 'next_or_number'というパラメーターが存在します。 'nex…
投稿された記事にと入力すると記事が分割されます。 そして分割されたページのリンクを出力するためには、 wp_link_pages()を使います。 投稿を任意のタイミングで分割する 記事のテキストエディタを開きます。 そしてタグを分割したいところに挿入します。 …
メモ インストールと使い方 まずは下記をインストール。 $npm install react-modal 使いたいコンポーネントでimportして<Modal></Modal>で挟んだ中身を挟む そしてModal.setAppElement("body")をモーダルを配置する箇所に記述。 ・コンポーネントの中身 import React, { use…
windowオブジェクト、 最近まで window.onloadしか使ったことなかったのですが 思ったより面白かったのでまとめました！ windowとは windowオブジェクトは画面上に表示されている全てのオブジェクトの親となるオブジェクトです。 下位のオブジェクトとして …
ビットマップ化について前回調べているなかで 最近すごいことに気づいてしました。 画像ってドットの集まりだと思っていましたが 実はそれだけじゃないようです、、、、 画像は大きく分けて二種類 「ラスタ画像」と「ベクタ画像」 にわかれます。 今日は二種…
タイトルからわかる語彙力のなさ笑 chromeなどのブラウザにはレンダリングエンジンというものがあります。 これは、要求されたHTMLとCSSを解析し、表示する役割をになっているのですが 具体的にどのような工程を辿っているのでしょうか、、、 最近よく聞くの…
いやー今日もわからない言葉てんこ盛りでしたねー！www 今日の会社のクリエイターズミーティングは特に css と ブラウザの仕組みの部分に関しての話が多かったです。 なので今日はブラウザの仕組みを浅堀してみました！ ブラウザの仕組み！！ web開発者にと…
今作っているティザーサイトなのですが、 スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。 それがtranslate3dにすると…
今作っているティザーサイトなのですが、 スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。 それがtranslate3dにすると…
こちらのマーク 皆さんよく見かけると思います。 タップすると携帯の共有メニューが開くあのアイコンです。 https://postd.cc/share-the-icon-no-one-agrees-on/ どうやら web share API という機能が利用されているそうです。 Web share API とは ブラウザ…
こんばんは つかの間の休日もあっというまでしたね。 日曜夕方以降は、月曜日の準備もあるので 少しだけ現実に戻らなければなりません。 あああ、、 土日で終わらすつもりだったところ結局なんもやってねえ、、 切り替えて今回は、入力フォームでモヤモヤし…
今日は自分でスマートバナーを作っていきます。 とはいっても複雑なやつじゃなくて デバイスによってリンク先が違ったり表示されなかったりするところを実現していきます。 レイアウト See the Pen アプリバナー by たまき こう (@ulqvhvox) on CodePen. ま…
