CSS– tag –
-
CSSでデバイスの横幅に応じて要素の表示・非表示を切り替える
スマホの普及で、今やレスポンシブデザインは当たり前になりましたね。今回は、使用しているデバイスの画面の横幅に応じて、CSSで特定の要素を表示したり、非表示にする方法をご紹介します。デモならAdminLTEのサイドバーが参考になります。 https://minor... -
Electronで公開中のWEBアプリをデスクトップアプリにする！
今回は、Electronというソフトを使い、HTMLやCSS、JavaScript等のWEB技術のみでWindowsやMacのデスクトップアプリが作れるというお話です。以前からそういった技術はあったようですが、知らなかったのは私だけ？中でも特に今回紹介したいのは、既に公開し... -
WordPressを高速化するプラグインとCSS・JavaScriptの見直し
前回ご紹介したPageSpeed Insightsの分析結果を受けて、WordPressを高速化したいと思います！ 課題に挙げた通り、WordPressを高速化するために、CSSやJavaScript、画像サイズの見直しを行いました。 WordPressを高速化するプラグインもご紹介しますので、... -
PageSpeed InsightsでWebページの読み込み時間を分析する
ページの読み込み時間には、SEOの観点からも非常に重要視されています。特に昨今では、スマホでWEBサイトを閲覧する機会が多くなっているため、利用者が待ち時間にイライラしたり、パケット代を気にするようにもなりました。まずは、自分のサイトの読み込... -
CSSのみで色が変化する背景グラデーションを作成する方法
CSSのみで実現する背景グラデーションは既に世の中に知れ渡っていて作成ツールまでありますが、その色が次々と変化させることもできます。 CSS詳しい方なら想像できると思いますが、グラデーションにアニメーションをミックスします。【CSSの書き方】以前... -
CSSで縦横比を維持したまま拡大・縮小できる領域を作成
あまりない状況かもしれませんが、画面の縦と横の比率（アスペクト比）を変えずに、拡大・縮小したいことがありました。よく考えてみると、画像の幅を100%で表示すると似たような動きになりますよね？しかし、画像だけではなく、コンテンツ領域全体のアス... -
animate.css＋wow.jsで手軽にかっこいいスクロールエフェクトを！
近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。 スクロールする度にコンテンツがアニメーション付きで表示される手法です。 しかもそのアニメーションはFlashや動画を使わず、CSSのみ... -
AdminLTEのバージョン3がいつの間にか公開されていた！
以前からお世話になっている管理画面のテンプレート「AdminLTE」の3つ目のバージョンが公開されていました！ベースで使用しているCSSのフレームワークが、Bootstrap 4になったのが、AdminLTEのバージョン2から大きく変更になった点でしょう。 https://mino... -
ローカルサイトをIEで開くとCSSを読み込まない場合の2つの対処法
Apache（xampp）を利用したローカル環境で、静的なHTMLを開発中に不思議な現象に遭遇しました。IE 11で表示テストをしていたら、なぜかCSSを読み込まなかったお話です。ちなみに、Apache経由ではなく、HTMLファイルをブラウザにドラッグ＆ドロップした場合... -
Google Maps APIでHUD用のカーナビアプリを作ってみた
今回は、Google Maps APIを使ってHUD（ヘッドアップディスプレイ）対応のカーナビを作成します。今や無駄に高価なカーナビに頼らずとも、スマホさえあればルート検索から音声付きの道案内までしてくれます。特にGoogleマップはあらゆるデバイスで無料で利...