クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

ローンチ後のWordPressサイトの中にテスト環境を作る

WordPressはローカル環境で検証がしにくいので、サーバ環境で作りたくなりますね。 ローンチ前はいいけども、ローンチしたらユーザーが見てるページで作成中の姿を見せるわけにはいかない。。 そんな時に、思う存分テストができる環境を考えました。

スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

固定幅と可変幅の組み合わせにはflex-basisが まったく カン・タン・だ!

CSS

Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。 横に並べるのにフレックスボックス(display: flex)を使う人は多いと思う。 そんな中でも固定幅と可変幅の組み合わせに便利なプロパティflex-basisを…

【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ!

CSS

CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()ってのが素敵すぎでしょう!と感動したのでご紹介。

Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪

「周回遅れでもWebGLを事始める!」で「WebGLの機はとっくに熟している」と書きました。 もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。 いっちょやってみっかー、と自分を奮い立たせるた…

周回遅れでもWebGLを事始める!canvas大地に立つ!!

ブラウザでの3D(3次元)を表現する「WebGL」。ほぼ全てのブラウザに対応し、機はとっくに熟している。 かつては3Dを始めるには3D作成ソフトを購入する必要があったが、現在はやりたくなった「今」、始められます。そう、CodePenがあればね!*1 時は来た!そ…

ざっくりWordPress:PHP書式とテンプレートタグの識別-後編

WordPressをカスタマイズしようとした時に見慣れぬコード郡に戸惑った方(私もです)向け!「PHP書式」と「テンプレートタグ」が識別できるとコードが読みやすくなるよ、という記事です。 「前編」の続きになります。 前編ではWordPressのファイル構成と、デ…

ざっくりWordPress:PHP書式とテンプレートタグの識別-前編

「PHPの基本を理解するためにJSと比較する」でWordPressは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されていると書きました。そしてPHPの基本書式について解説しました。 これを踏まえてWordPressのコードを見直すと、「テンプレートタグ」が…

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

「サーバサイドの中でのWordPressの位置付け」で書いたようにPHP*1はサーバサイドのプログラミング言語です。現在、CMSの定番となっているWordPressはPHPで作られています。 WordPressのコードは「PHP書式」とWordPress独自の「テンプレートタグ」で構成され…

サーバサイドの中でのWordPressの位置付け

WordPressは無料のCMS(コンテンツ・マネジメント・システム)です。 CMSはページの構造(仕組み)とコンテンツ(内容)が分離されており、ブラウザの管理画面でブログのように記事を更新できます。 また、様々な開発者が作成したテーマ(デザインテンプレー…