クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

JS

【擬似クラス:target】CSSのみでハンバーガーメニューを作る

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

フォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)

JS

ブラウザで音を出そう「Tone.js」シリーズの続きです。前回はTone.jsに用意されたシンセ音の半分を紹介しました。今回は後編です。それではいってみましょう!

CSSドット絵マリオをCSSアニメでジャンプさせてみる

Qiitaアドベントカレンダー「CSS」 23日目の記事です。イブイブ! さて、CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし!でドット絵を描いた(書いた?)マリオ。ホバーアクションで立ちポーズとジャ…

Pythonの基本を理解するためにJSと比較する

Qiitaアドベントカレンダー「Pythonその2」19日目の記事です。以前「PHPの基本を理解するためにJSと比較する」という記事を書きました*1。本記事はその「Python版」です!ちなみに私のPython歴は「Hello World」までです。Webデザイナーが新たなプログラミン…

Google ChartsをQuickにStartする

JS

Qiitaアドベントカレンダー「JavaScript2」12日目の記事です。最近、データのビジュアライズに興味津々之介なイイダリョウです。これまでJSのチャートライブラリは「Chart.js(Canvasベース)」と「C3.js(SVGベース)」をGetしてStartedしました。今回は「G…

ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更)

ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム(Git)によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと!GitHubはローカル環境と連…

黒い画面だけでWebページを作成-後編:viエディタでコーディング!

「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル作成(touch)・複製(cp)・移動(mv)・削除(rm)を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエデ…

黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWeb…

初めてのNode.js:インストール確認、REPL、Hello worldまで

JS

「黒い画面」叩いて初体験シリーズ!前々回「Python」、前回「Ruby」に続きまして、今回は「Node.js」にトライ。いや〜Node.js。サーバサイドJSですよ、ハイ。これも前々から気になっておりましたよ。でもどうやって初めたらいいのかわからなかった。黒い画…

Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう

Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの? まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ!

【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編-1)

JS

Vue.jsシリーズの続きです。前回、Vue.jsのイベント、分岐、ループをやってみました。その中のループ(v-for)で外部JSONファイルを読み込めそうなので、ロジックとデータを分離してみましょう。チュートリアルを見ると「axios」という方法を推奨しているよ…

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで…

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_

JS

「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います!

【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事)

Webデザイナーが主戦場とするのはフロントエンド言語(HTML、CSS、JS)ですが、サーバサイド言語もわかればできることが増えます。一体どうやって?? WordPressはダッシュボードからテーマやプラグインを入れれば動的サイトが作れる素敵なCMS。一番身近なサ…

【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)

以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこ…

【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの?

前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの?という気になってきたので、実際にやってみる。実録です。

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

JS

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

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

JS

「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ベー…

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

JS

はじめに、今回はJSONにあまり触れていません! WordPress等で日々サーバサイドやデータベースの便利さを感じつつ…そういえばJSとよく似たJSON(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティ…

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

JS

前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。その続きになります。 この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われて…

【JS】フォームのinputタグにURLパラメータを渡す方法

JS

URLの後ろにつらつらと続くパラメータ。あれを取得してフォームのinputタグに渡す方法をご紹介。やれることはわかってて前からやってみたいと思っていた内容なので、実際に作ってみました。それでは、どうぞ!

【Three.js】回る箱をいろいろ打ち替えてみる

JS

ブラウザで3Dコンテンツを作るJSライブラリ「Three.js」。前回は回る箱を表示してコードを細かく見ました。今回は実際の動きとしてどこをどう打ち替えたらどう変わるのかを実体験していきたく思います。それでは、どうぞ!

【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した

JS

ブラウザで音を鳴らせるJSライブラリ「tone.js」の続きになります。 前回は一音鍵盤を作りましたが、一音だと少々飽きてくるので1オクターブに拡張しました! 鍵盤を増やしながらコードが冗長になっていくことに気づき、このままではフルキーボードの頃には…

三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!

JS

JSのフレームワークについて調べるとAngular、React、vue.jsの「三大フレームワーク」というのが出てきます。なぜにこの3つが三大?これを使うとどんなことが実現できるのか。SPA?MVC?仮想DOM?データバインディング?調べているうちに混乱してきたけど、…

【JS】newとプロトタイプとクラス

JS

JSに慣れてくるとよく目にすることになるnew演算子。ライブラリやフレームワークのコードでもよく見るので、ここらでちゃんと理解しておきたく思います。 また、かつて「JSはクラスかプロトタイプか」という論争がありましたが、そのどちらもこのnewが登場し…

Chart.jsをGettingしてStartedする

JS

JSで図を描写するライブラリはいくつかありますが、Canvas要素ベースのChart.jsとSVG要素ベースのd3.jsが目につきました。どっちを先にやるか迷いましたが、Three.jsでCanvas要素に触れ始めているので3Dと2Dの比較として触ってみることにしました。

Three.js入門サイトに私も入門する!!

JS

以前ご紹介した「WebGL」の続きになります。今年こそブラウザ3D事始めんと欲し「書き初め」的に書いた投稿からもうじき半年…。 前回tone.jsと同様、今回も便利なライブラリ「Three.js」を使って一刻も早く体験したく。いざっ!

はじめの一音!tone.js事始める

JS

以前ご紹介したWeb Audio APIの続きになります。 ブラウザで音を出す便利なライブラリ、tone.jsを利用して、はじめの一音鳴らしてみたいと思います! ※注:このページは音が鳴ります!