webOpixel

GulpでVue+SASSの開発環境を構築する

VueはJavaScriptを読み込むだけお手軽に始めることはできますが、プラグインとか使おうと思ったとき require で読み込むのが前提になっているので、やっぱり開発環境からやらないといけないんですよね。

Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。

Web動画は以前はPCからの視聴がほとんどでしたが、モバイル回線の高速化や、スマートフォンやタブレットの普及により様々なデバイスから動画を視聴する機会が増えました。そこで今回は動画コンテンツの効果について見ていきたいと思います。

CSSで設定するだけですぐに使えるアイコンフォントセットをまとめてみました。

Vue.js 2.0 を使用してTableで並べたリストの検索フィルターとかソートなどをやってみます。

最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。
ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。

チェックボックスをCSSでカスタマイズしてカードタイプ風にしてみます。
ついでにチェックした時のアニメーションも作ってみます。

WordPressは Contact Form 7 という有名なフォームプラグインがあります。通常使用する分にはメールアドレスの形式をチェックしてくれますが、RFC準拠も弾きたい場合のカスタマイズ方法です。

コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。

WordPressはブログ記事の管理がメインとなっているので、階層のあるページを管理しようとすると不便な部分があったりします。
Nested Pages プラグインを導入すればドラックで並び替えや階層の移動ができるので、ページの管理が簡単になります。