CSS– tag –
-
Google Maps APIでHUD用のカーナビアプリを作ってみた
今回は、Google Maps APIを使ってHUD（ヘッドアップディスプレイ）対応のカーナビを作成します。今や無駄に高価なカーナビに頼らずとも、スマホさえあればルート検索から音声付きの道案内までしてくれます。特にGoogleマップはあらゆるデバイスで無料で利... -
jQueryプラグイン「iziModal.js」でモーダルウィンドウをオシャレに！
今回は、モーダルウィンドウを簡単に表示できるjQueryプラグイン「iziModal.js」を紹介します。今やCSSでもBootstrapなどのフレームワークを利用するのが当たり前な時代ですが、JavaScriptにもスポットを当ててみると、もっとアニメーションをオシャレに演... -
不安定なWordPressのoEmbedをPz-LinkCardプラグインにした！
WordPress 4.4以降の標準機能として、URLを書くだけでブログカード（リンクカード）を表示してくれる「oEmbed」というものがあります。有名な画像や動画またはSNSといった世の中を代表するソーシャルメディア（YouTube、Twitterなど）の場合は、問題なく表... -
シンプルで高機能な管理画面テンプレートは「AdminLTE」で決まり！
今回は管理画面のデファクトスタンダードと言えるテンプレート「AdminLTE」を紹介します。AdminLTEとは、jQueryやBootstrapのような管理画面の定番中の定番です。世の中には、これ使っておけば間違いないものって、たくさんありますよね？それが、デファク... -
次世代のアイコンになるか？CSSのみで作られたPure CSS Icons
当サイトの記事にFont Awesom Iconsというフォントで作られたアイコンが度々登場していますが、今回ご紹介するのはPure CSS IconsというCSSのみで作られたアイコンです。 https://minory.org/font-awesome-content.html CSSアイコンのメリットとデメリット... -
jQueryの3つの書き方で実行タイミングの呼び出し順が違う
jQueryの呼び出す時の書き方が何通りかあり、それぞれ実行タイミングが違います。今回は、皆さんも何度か目にしたと思われる書き方について、どのタイミングで呼び出されるのかをご紹介します。どれも同じように見えますが、実際には書き方によって動作が... -
Bootstrap StudioでWEBデザインをコーディング不要で簡単に！
世の中には様々なCSSフレームワークがありますが、最も有名なのはBootstrapだろう。Bootstrapだけでも効率よく構築できるようになったが、更にほぼコーディングせずにもっと簡単かつ素早く構築できるツールが「Bootstrap Studio」ですスマホが広まり始めた... -
WordPressのWPtouchとAMPプラグインでモバイルフレンドリーになる！
当サイトではWordPressで配布されているレスポンシブテーマを利用しているが、Google先生から言わせると、「ページがモバイルフレンドリーではありません。」だそうです。見た目はめっちゃフレンドリーなのですが。そこで、これまたGoogle先生が提供してい... -
LaravelのBladeでURLによってidやclass属性を動的に切り替える方法
例えば、メニューなどのclass属性に、特定のページが表示された場合に[active]や[current]などのCSS要素を動的に切り替えたくなることが多々あります。そんな時Laravelでは、Blade内でRequest::is()関数を使い、遷移したページのURLによって条件分岐させる... -
Font AwesomeをCSSの擬似要素のcontentで使用する方法
今やフォントアイコンの定番になった「Font Awesome Icons」をCSSの擬似要素（:before、:after）のcontentプロパティで使用する方法をご紹介します。Font AwesomeとはHTMLタグにクラスを指定するだけで、フォントアイコンが表示できる優れものです！Bootst...