Minory

CSS のみで実現する 背景 グラデーション は既に世の中に知れ渡っていて 作成 ツール までありますが、その 色 が次々と 変化 させることもできます。 CSS 詳しい方なら想像できると思いますが、 グラデーション に アニメーション をミックスします。 CSSの書き方 以前からリスペクトしているWebクリエイターボックスさんのサイトがすごく参考になります。 ソースコード も付いていますので、とてもわかりやすと思います。 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本 美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ - Webクリエイターボックス CodePenを拝借。 See the Pen Colourful gradient animation by Mana ( @manabox ) on CodePen . サンプル 実際に4月1日の記事で利用している サンプル がありますのでご覧ください。 April Fool Generator - demo.minory.org 作成ツール 参考サイトにも紹介されていた、こちらのサイトで簡単に作成できます。 背景 にしたい 色 と、 角度 、それから変更 スピード を選択するだけで作成できます。 A CSS generator to create beautiful animated gradients for use on your website. CSS Gradient Animator - http://bit.ly/1pEurpP グラデーション の 背景 に 画像 を入れたり、 透過 も駆使することで、あなたのサイトをもっとカッコイイ 背景 に変更しましょう！

あまりない状況かもしれませんが、画面の 縦と横の比率 （ アスペクト比 ）を変えずに、 拡大 ・ 縮小 したいことがありました。 よく考えてみると、画像の幅を 100% で表示すると似たような動きになりますよね？ しかし、画像だけではなく、コンテンツ領域全体の アスペクト比 を 固定 する方法をご紹介します。 アスペクト比を固定する方法 単純に 縦横比 を固定するだけなら、以下のように書けば良いです。 HTML <div class="content">ここにコンテンツが入ります</div> CSS .content { width: 100%; height: auto; padding-top: 75%; } 75% がどこから来たかと言いますと、 [高さ] / [横幅] × 100 の計算式で求めることができます。 つまり、 4:3 で固定したい場合は、 3 / 4 * 100 = 75% となります。 CSSのcalc()関数を使うと楽 padding-top の値を計算するのは面倒という方に、 CSS 内で計算ができる calc() 関数を使えば、わざわざ計算しなくても 縦横比 だけで設定できます。 使い方は簡単！ 上記の計算式をそのまま括弧内に入れてあげれば完成です。 padding-top: calc(3 / 4 * 100%); CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 length, frequency, angle, time, percentage, number, integer が利用できる場所ならば使用できます。 calc() - MDN Web Docs コンテンツも加えたい もうお気付きかと思いますが、 padding-top を使っているので、このままでは アスペクト比 を固定した領域に コンテンツ を追加することはできません。 せいぜい、バックグラウンドで画像を表示するくらいしか使い道がありません。 そこで、「 position 」プロパティと擬似要素の「 :before 」を利用して解決します。 HTML 先程のコ...

近年の レスポンシブ や フレキシブル デザイン の流行と共に、すっかりお馴染みとなった animate.css と wow.js の組み合わせ。 スクロール する度にコンテンツが アニメーション 付きで表示される手法です。 しかもその アニメーション は Flash や 動画 を使わず、 CSSのみ で実現できるのでとても簡単かつエコです。 Animate.css まずは、 Animate.css の公式サイトでどういった アニメーション がある確認しておきましょう。 Animate.css - daneden.github.io プルダウンから効果を選んで「 Aminate it 」ボタンを押すだけで確認できます。 WOW.js 上記の Animate.css に WOW.js を組み合わせると、 WOW.js の公式サイトのような”動き”を付けることができます。 WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend. Reveal Animations When Scrolling — WOW.js - www.delac.io 下に スクロール していくと、その効果が確認できます。 動作サンプル CodePen に全部入りの サンプル がありましたので、ここでは敢えて使い方を紹介しません。 これであなたの WEBサイト も賑やかになりますね！

まだ アルファ版 ではありますが、いつもお世話になっている 管理画面 の テンプレート 「 AdminLTE 」の 3 つ目 の バージョン が公開されていました。 以前、当サイトで紹介した バージョン2 から大きく変わった点としては、ベースで使用している CSS の フレームワーク が、 CSSBootstrap 4 になったことでしょう。 世の中には、これ使っておけば間違いないものって、たくさんありますよね？いわゆる、デファクトスタンダード(de facto standard)ってやつです。jQueryやBootstrapのような定番中の定番です。今回は管理画面のデファクトスタンダードと言えるテンプレート「AdminLTE... シンプルで高機能な管理画面テンプレートは「AdminLTE」で決まり！ - Minory 著者の感覚では、色合いもモッサリとした感じから、くっきりと鮮やかになった気がします。 AdminLTE 3 AdminLTE 3 | Dashboard 3 まだ試していませんが、興味がある方はぜひ AdminLTE 3 で作成してみてください！

jQuery の呼び出す時の 書き方 が何通りかあります。 皆さんも何度か目にしたと思います。 どれも同じように見えますが、実際には 書き方 にって 動作 が違います。 jQueryの書き出し 例えば、以下のようによく見かける 3つ の 書き方 があります。 $(function(){}); $(document).ready(function(){}); $(window).load(function(){}); 他にも、 $() を jQuery() と書くこともありますが、ここでは割愛します。 結論から言うと、 $(function(){}); と $(document).ready(function(){}); は同じ動きをしますが、 $(window).load(function(){}); は 実行 タイミング が違います。 参考にしたサイトがとても詳しく解説されていたので引用しています。 引用： jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry 実行する順番 ready と load に絞って話を進めます。 基本、プログラムは上から下に実行されますが、ここでは ready が先、 load が後に読み込まれるということを紹介しておきます。 具体的な順番は次のようになります。 ページの読み込みが始まる HTMLの読み込みが終わる $(document).readyが実行 画像など含めすべてのコンテンツの読み込みが終わる $(window).loadが実行 引用： 【jQuery】処理実行タイミング $(document).readyと$(window).load – Qiita 2つの決定的な違いは？ どちらも HTML の読み込みが終わった状態ですが、 画像 など コンテンツ 全体の読み込みが終わった後に実行されるのが load です。 しかし、単純に順番の問題ではなく、適切に使い分けることが重要です。 例えば、 ready の場合は画像が読み込み終わっていないので、 CSS で指定していない大きさが可変の画像に対して、幅や高さを取得しようとするとおかしくなります。 以下、使い分け方の例です。 [ready] htmlを...

例えば、メニューに active や current などの クラス を追加したい、特定のページだけ CSS の クラス を切り替えたくなることが多々あります。 そんな時は、 Laravel の Request::is() 関数を使って条件分岐させましょう。 現在のURLを判定する 使い方はとっても簡単です。 @if(Request::is('admin')) true @elseif false @endif URL が http(s)://www.example.com/home だったら「 true 」、それ以外なら「 false 」を返します。 Blade 内でなければこのように書きます。 if ($request->is('admin/*')) { // } Blade内でCSSの切り替え 今回は CSS の クラス を切り替えることを前提に書いていますが、もちろん他の要素やテキストや画像のコンテンツを分岐するのにも応用できます。 以下は、現在の URL が home の時だけ class="active" を追加する例です。 <li {!! (Request::is('home') ? 'class="active"' : '') !!}> <a href="/home"><i class="fa fa-dashboard"></i> ホーム</a> </li> このような書き方もできます。 <li @if(Request::is('home')) class="active" @endif> <a href="/home"><i class="fa fa-dashboard"></i> ホーム</a> </li> また、 ワイルドカード による パターン 指定もできます。 以下のよう...

特殊なメガネをかけて見る3Dテレビや、裸眼で立体的に見えるゲーム、スマホが流行ってきた頃、WEBデザイナーやAppleは3Dなんて必要ないと言わんばかりに”視差効果“を使ったデザインが流行りだした […] http://ift.tt/2ninWAe

近年、特にスマホなどの回線の細い端末では、高速化することが重要視されるようになり、CDNの存在がが広まって認知されるようになってきています。 私もCDNを利用する機会が増え、WEBサイトの高速化だけでなく開発が少し楽にな […] http://ift.tt/2zkQgYa

最初、WordPressのテーマを自分で作ろうと思ったら、何から手を付けていいかわかりませんでした。 WordPressのテーマを自作する人のために、「ブランクテーマ」というベース的なテーマが存在します。 今回は利用した […] http://ift.tt/2xAue4E