クモのようにコツコツと

Webデザイナー イイダリョウのブログです。

【CSS】background-clip: textで背景を文字形に切り抜いてさらにグラデのアニメにする

iPhone Xsのページで背景画像が文字の形で切り抜かれた表現があり、調べてみたらbackground-clip: textというスタイルだった。このスタイルで出来ること、出来ないことを検証してみました。

続きを読む

もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも)

タイトルのようなことをふと思ったのでCSSvw、vhをいろいろ試してみました。
PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。それを実現するメディアクエリはとても便利ですが、何種類もCSSスタイルを書き分けるのは少々複雑ではあります。ここを突破する一番シンプルな方法を追求したい。そう、vw、vhでね。それでは参りませう!

続きを読む

【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた!

Hellow Vue.js」の続きです。前回はVue.jsを読み込んで、「こんにちは びゅう!」という文字を表示しました。しかしながら、これだけならjQueryや生JSでもできるわけなので、もう少し進めてみる。
基本編として、チュートリアルでまず目についた「イベント」「分岐」「ループ」をやってみた。それでは、どうぞ!

続きを読む

【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む

JSON未遂事件簿」の続きです。 JSON(ジェイソン)はJSの連想配列(オブジェクト)とよく似たとても馴染深いデータ形式
前回はっぴいえんどアルバム情報を多次元配列にしてDOMに読み込みました。 今回はこれを外部JSONファイル化してFetch APIで読み込んでみます。

続きを読む

SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする

以前、JSで図(チャート)を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。
その後、D3.jsベースでチャート機能に特化して作られた「C3.js」の存在を知りました。SVGがどんなものなのかも気になっていたので、さっそくGettingしてStartedしたいと思います!

続きを読む

JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)

はじめに、今回はJSONにあまり触れていません!
WordPress等で日々サーバサイドやデータベースの便利さを感じつつ…そういえばJSとよく似たJSON(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティブコンテンツやらを作れそうだ、と思い浮び調べ始めたところ…前提知識不足すぎて知りたいことが数珠つなぎ!数週間も沼にハマってました。*1
未だJSON未到達なのですがw まずはJSの多次元配列でやりたいことを実現してみた。 これを礎に次回こそはJSON体験したひっっ!!

*1:本当は13日の金曜日にちなんで投稿しようと思ってたw

続きを読む

【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!

前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。その続きになります。
この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われているため効果の計測ができません。
この対策として「ローカルストレージ」を試してみました。それでは、どうぞ。

続きを読む