ウェブデザインにおいて、コンテンツの配置は見た目と使いやすさに大きな影響を与えます。今回は、画面の左下に追従するブロックを作成する手法を紹介します。このスタイリッシュなデザインは、ブログやウェブサイトのアクセントとして素晴らしいものにな...

スマホの普及で、今やレスポンシブデザインは当たり前になりましたね。今回は、使用しているデバイスの画面の横幅に応じて、CSSで特定の要素を表示したり、非表示にする方法をご紹介します。デモならAdminLTEのサイドバーが参考になります。 https://minor...

今回は、Electronというソフトを使い、HTMLやCSS、JavaScript等のWEB技術のみでWindowsやMacのデスクトップアプリが作れるというお話です。以前からそういった技術はあったようですが、知らなかったのは私だけ？中でも特に今回紹介したいのは、既に公開し...

以前から、PWA（Progressive Web Apps）に興味があり、実は密かにウェブアプリを開発しています。 しかし、できあがったPWAを客観的に、しかもツールを使って簡単に評価できないかと思って見つけたのが、Google社製の「Lighthouse」というウェブアプリ評価...

どこかの技術系サイトのソースを利用したい場合、当然エディタにコピペしてから編集していますが、WEBサイト上に掲載されているコンテンツをその場で書き換えることができるのが、HTML5のcontentEditable属性です。もちろん表面上の話で、データそのものを...

近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。スクロールする度にコンテンツがアニメーション付きで表示される手法です。しかもそのアニメーションはFlashや動画を使わず、CSSのみで...

以前からお世話になっている管理画面のテンプレート「AdminLTE」の3つ目のバージョンが公開されていました！ベースで使用しているCSSのフレームワークが、Bootstrap 4になったのが、AdminLTEのバージョン2から大きく変更になった点でしょう。 https://mino...

やっと、iOS 11.4（Safari 11.1）からPWA（Progressive Web Apps）に対応しました！簡単に何ができるかと言うと、WEBアプリをオフラインでも動作するネイティブアプリのように振る舞うことができるようになりました。これを利用すると、Appleに開発者の年...

Apache（xampp）を利用したローカル環境で、静的なHTMLを開発中に不思議な現象に遭遇しました。IE 11で表示テストをしていたら、なぜかCSSを読み込まなかったお話です。ちなみに、Apache経由ではなく、HTMLファイルをブラウザにドラッグ＆ドロップした場合...

皆さん、こんにちは！突然ですが、正規表現っていつも悩ませてくれちゃいますね。今回はHTMLのimgタグからPHPの正規表現を使ってsrcの値、つまりURL(パス)を取得しようって話です。なぜ悩むかと言うと、様々な書き方があり、場合によっては上手く取得でき...