webOpixel

CSS3のFlexboxでグリッドレイアウトしてみる

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

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

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

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

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

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

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

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

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

WordPressに限らないと思いますが、MySQLのデータをインポートしたとき「Unknown or incorrect time zone: 'Asia/Tokyo'」みたいなエラーが表示されうまくインポートできなかったときの解決方法