技術情報

Webに関しての技術情報をご紹介しています。

技術情報

gulp-footerを使ってcssファイルの最後の行にコメントを入れる

gulp-footer gulpでscssのファイルなどを結合している場合、統合先のcssファイルの最後の行にコメントを記述していても、さらにその下に出力されてしまう場合があります。 そんなときにgulp-footerを使ってcssファイル...
技術情報

モバイルファーストでレスポンシブ+フレキシブルレイアウトで1カラムの入力フォームを作る

レスポンシブでのメディアクエリを考えるとき、いつもこれという感じがしなかったのですが、モバイルからPCへと共通のデザインが多いときに限り、納得のいくスマートな記述ができました。 というわけで、今回は入力フォームを例にモバイルファーストでレス...
技術情報

CSSでフローティングラベルを行う

下記の記事で紹介されているフローティングラベルが気になったので、CSSで出来るだけ再現してみました。 html 入力のテキストフィールドと対応するラベルを記述しています。 <div class="floating-box"> <input ...
技術情報

CSSで円の外側へ向かってボーダーを徐々に表示して消す

最近CSSのアニメーションが気になり始めてきたので、円の外のボーダーを徐々に表示して消すというものを作ってみました。 ソースコード html ブロック要素をひとつ作っておきます。 <div class="ripple"></div> css...
技術情報

CSSでスクロール時に要素をコンテンツ横に固定する

スクロールする際、要素を固定する時の表示はCSSだとブラウザの基準からしかできないものだと思いこんでいましたが、コンテンツに沿って表示することができたのでご紹介いたします。 ソースコード html 親のコンテンツ内に固定する要素を入れておき...
技術情報

FLOCSSについて疑問な点を考えてみた

以前、「GulpとFLOCSSで始めるモバイルファースト的なCSS設計」でFLOCSSをご紹介いたしました。 FLOCSSを使う機会があり、疑問に思ったことがあったので考えてみました。 FLOCSSで組んでいて疑問に思ったこと 命名規則や詳...
技術情報

Laravelに搭載されているBladeテンプレートを使ってみる

Blade Templates - Laravel - The PHP Framework For Web Artisans 以前、VagrantとVirtualBoxでWindowsにLaravelの開発環境を構築する方法をご紹介いたしま...
技術情報

VagrantとVirtualBoxでWindowsにLaravelの開発環境を構築する

Laravel - The PHP Framework For Web Artisans PHPのフレームワークだとLaravelが人気とのことで、WindowsにLaravelの開発環境を構築してみました。 Laravelを導入する La...
技術情報

「Snap.svg」を使ってSVGをアニメーションしてみた

Snap.svg - Home JavaScriptでのSVGのアニメーションを楽にしてくれる「Snap.svg」というライブラリを知り、気になったので使ってみることにしました。 「Snap.svg」を導入する トップページから「Snap....
技術情報

WordPressテーマのSimplicityにマストドンのシェアボタンを設置してみた

mastodon.social - Mastodon 以前に何度かマストドンという分散型のSNSをご紹介いたしました。 そのマストドンのシェアボタンの機能を作成した方がいたので、当サイトでも設置してみることにしました。 sns-button...
技術情報

WordPressで利用しているAMPにWebフォントのFont Awesomeを導入してみた

Font Awesome, the iconic font and CSS toolkit 前回、Simplicityに設置したAMPテンプレートにamp-lightboxで行うメニュー表示をご紹介いたしました。 amp-lightbox自...
技術情報

Simplicityに設置したAMPテンプレートにamp-lightboxを導入してメニューとして使ってみた

以前ご紹介したAMPでいろいろできることが増えたようなので、当サイトで利用しているAMPテンプレートの「Simp」に「amp-lightbox」を導入してメニューを表示するようにしてみました。 amp-lightboxを導入する amp-l...
技術情報

レスポンシブで画像を表示するにはどうすればよいか調べてみた

スマートフォン、タブレット、PCでレスポンシブなWebサイトをコーディングする際に、画像もレスポンシブにする必要がある場合、どういった要素を使って、どのように画像を切り分けるか悩みます。そこで自分なりに調べてみました。 img要素のsrcs...
技術情報

VCCWにphpMyAdminを入れる

phpMyAdmin 以前に何度かVCCWを利用したWordPressの開発環境をご紹介いたしました。 ご紹介した方法でコマンド一発でデプロイができたり、ローカルと本番を同期させることができるのは便利ですが、DBをUIで見れないことが唯一の...
技術情報

GulpとFLOCSSで始めるモバイルファースト的なCSS設計

hiloki/flocss: CSS organization methodology. WebでフロントをされているみなさんはCSSを書いていて命名規則が面倒、何かまんじりとしない、そんなことはありませんでしょうか。私はあります。 CSS...
技術情報

テンプレートエンジンのPugで使うクラス名をページ、ディレクトリなどで任意に変える

以前、テンプレートエンジンのPugをご紹介いたしました。 今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。 変数を使ってクラス名を変える pug 下記のように「include ../commo...
技術情報

CSSのactive疑似クラスでクリック時にアイコンを変える

最近疑似クラスを少し調べることがあったので、勉強がてらactive疑似クラスでクリック時にアイコンを変えるようなCSSを作ってみました。 ソースコード html div要素のみで作っています。 <div class="sun-moon"> ...
技術情報

「CreateJS」を勉強してWordPressテーマのSimplicityに適用してみた

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5 「CreateJS」というJavaScriptのライブラリで作られたと...
技術情報

GulpでテンプレートエンジンのPugを使ってみた

Getting Started – Pug 前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。 EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。 P...
技術情報

GulpでテンプレートエンジンのEJSを使ってみた

EJS - JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSと...