【css】repeating-radial-gradient()関数を重ねることでユニークな模様も1行で完結

background-image: repeating-radial-gradient()を使うことで上記のような複雑な模様も作ることができる、、、とのこと。 (笑) ポイントはrepeation-radial-gradientを重ねること background-image: radial-gradient(A), radial-gradient(B), radial-gradie…

2020-10-13

【git】ブランチ名を変更する

ブランチ名を変更するブランチ名を変更したいときは git branch -m <古いブランチ名> <新しいブランチ名> 今開いているブランチを変更する場合は git branch -m <新しいブランチ名> で変更可能です。 ps 最近鎌倉も寒くなってきました。沖縄はまだ 28度く…

2020-10-12

【css】 conic-gradient() 円グラフや市松模様がすぐに実現する最強のプロパティー

今回は新しいグラデーション手法 conic-gradient()関数について紹介しようと思います。 2018年9月にリリースされた関数なのですが、conicというのが円錐という意味らしく円錐グラデーションと呼ばれるそうです。なので、 linear-gradient()関数：直線状の…

2020-10-11

【css】フレックスボックスでそれぞれの幅を調整してくれる flex-shrink

titleの通りなのですが、 flexboxにも幅の調整を自動的に行ってくれるプロパティーがありました。 flex-shrink フレックスアイテムの縮小係数を設定します。つまりそれぞれのアイテムの幅を自動で調整してくれます。 a b c d というコンテナーがあるとする…

2020-10-10

【css】カスタムプロパティー cssにも変数があるのよ

久々にブログ更新します。今回は、cssのカスタムプロパティーについて僕今日の今日までcssの変数的なやつってsassにしかないと思っていました。結論、cssにもありました。笑カスタムプロパティーとはタイトルの通り、cssのプロパティーを変数に入れて使…

2020-09-21

【gatsby.js】Gatsby.js Netlify を使ってブログを作ってみる

そろそろ自分のサイト作りたいと思っていたいので気になっていたGatsbyを使ってみました！ gatsbyをインストールしてブラウザに表示するまずgatsbyをインストールします。 $ npm install -g gatsby-cli インストールできたかを確認 $ gatsby --help zsh: c…

2020-09-05

【wordpress】ページ分割のリンクに「数字」と「次ページ・前ページ」の両方を表示する

https://okinawanpizza.hatenablog.com/entry/2020/09/04/085447 next_link_pagesのパラメータには、リンクの表示方法を「前のページ」「次のページ」と表示するかページ番号で表示するかを選択する 'next_or_number'というパラメーターが存在します。 'nex…

2020-09-04

【wordpress】長い投稿を分割する、投稿内にページ番号を出力する

投稿された記事にと入力すると記事が分割されます。そして分割されたページのリンクを出力するためには、 wp_link_pages()を使います。投稿を任意のタイミングで分割する記事のテキストエディタを開きます。そしてタグを分割したいところに挿入します。 …

2020-08-11

(メモ)react-modal でモーダル表示

メモインストールと使い方まずは下記をインストール。 $npm install react-modal 使いたいコンポーネントでimportして<Modal></Modal>で挟んだ中身を挟むそしてModal.setAppElement("body")をモーダルを配置する箇所に記述。・コンポーネントの中身 import React, { use…

2020-08-09

windowオブジェクト触ってみる

windowオブジェクト、最近まで window.onloadしか使ったことなかったのですが思ったより面白かったのでまとめました！ windowとは windowオブジェクトは画面上に表示されている全てのオブジェクトの親となるオブジェクトです。下位のオブジェクトとして …

2020-07-25

ラスタ画像とベクタ画像

ビットマップ化について前回調べているなかで最近すごいことに気づいてしました。画像ってドットの集まりだと思っていましたが実はそれだけじゃないようです、、、、画像は大きく分けて二種類「ラスタ画像」と「ベクタ画像」にわかれます。今日は二種…

2020-07-22

レンダリングエンジン、、レンダリングって

タイトルからわかる語彙力のなさ笑 chromeなどのブラウザにはレンダリングエンジンというものがあります。これは、要求されたHTMLとCSSを解析し、表示する役割をになっているのですが具体的にどのような工程を辿っているのでしょうか、、、最近よく聞くの…

2020-07-20

クリエイターズ定例

いやー今日もわからない言葉てんこ盛りでしたねー！www 今日の会社のクリエイターズミーティングは特に css とブラウザの仕組みの部分に関しての話が多かったです。なので今日はブラウザの仕組みを浅堀してみました！ブラウザの仕組み！！ web開発者にと…

2020-07-18

【css】translate3dを使うとアニメーションのちらつきを抑えることができる

今作っているティザーサイトなのですが、スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。それがtranslate3dにすると…

2020-07-18

【css】translate3dを使うとアニメーションのちらつきを抑えることができる

今作っているティザーサイトなのですが、スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。それがtranslate3dにすると…

2020-07-15

web share API を使って共有する

こちらのマーク皆さんよく見かけると思います。タップすると携帯の共有メニューが開くあのアイコンです。 https://postd.cc/share-the-icon-no-one-agrees-on/ どうやら web share API という機能が利用されているそうです。 Web share API とはブラウザ…

2020-07-12

【HTML】自動補完を消したい！

こんばんはつかの間の休日もあっというまでしたね。日曜夕方以降は、月曜日の準備もあるので少しだけ現実に戻らなければなりません。あああ、、土日で終わらすつもりだったところ結局なんもやってねえ、、切り替えて今回は、入力フォームでモヤモヤし…

2020-07-09

スマートバナーを作る(後編)

今日は自分でスマートバナーを作っていきます。とはいっても複雑なやつじゃなくてデバイスによってリンク先が違ったり表示されなかったりするところを実現していきます。レイアウト See the Pen アプリバナー by たまきこう (@ulqvhvox) on CodePen. ま…

2020-07-08

スマートアプリバナーを表示する (前編)

こんばんは！今日は最近仕事でよく耳にするスマートアプリバナーこちらをまとめていきたいと思います！今回はプラグインなどを使って表示する方法次回はプラグインなしで、擬似的に作成してみたことについてまとめていきたいと思います！！スマートア…

2020-07-05

【javascript】processing.js使ってみた

仕事の寄り道がてら気になるものを動かしてみました。それが processing.js (公式：https://processing.org/ ) ただ導入するまでに時間がかかったので忘備録として残していきます。 processing.js とは processing.jsとは、web上でprocessingというプログラ…

2020-07-04

SNSシェアボタンを設置する

今日も一日お疲れ様でした！ processing.jsをcodesandboxで動かしてみたのですが、いざローカル環境で動かしてみようとすると全然動きませんでした。切り替えて今回は最近作成したsnsのシェアボタンについて解説していきます。シェアボタンとはよく記…

2020-07-03

【git】warning: adding embedded git repository:

リハビリですwwwww 最近はやることが爆発してここ一ヶ月くらいブログを休ませて頂きました。忙しいを言い訳にしてサボるのもなあ、、ということで心機一転、のらりくらり再スタートしたいと思います。今日はそんな中で少しずつ覚えてきたgitに関する操作…

2020-05-24

ディベロッパーツールでcssを変更する

最近クロームのディベロッパーツールにお世話になりっぱなしなので改めてディベロッパーツールの操作方法を勉強してみました。参考はこちら↓ https://www.amazon.co.jp/Chrome-Developer-Tools-%E5%85%A5%E9%96%80-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E…