Web サイト制作に役立つ情報や小技などをまとめています。
皆さんはどんなブラウザを使っているでしょうか？開発者はもとより一般ユーザもGoogleChromeを使っている方が非常に多いですよね。そんなGoogleChromeのレンダリングエンジン「Chromium」(正確には少し違いがあります)を搭載したMicrosoftのEdgeブラウザが発表されました。少し前に"MicrosoftInternetExplorer"の使用をMSが正式にやめるよう発表したこともあり、独自規格の多かったMS系統のブラウザが根絶されそうです。開発者にとってはとても嬉しいニュースです。開発者向けにChromium搭載Edgeがリリースされたので紹介します。
グリッチエフェクト、いわゆるアナログノイズが乗った映像の乱れのような効果があります。動画では良く利用されておりちょっとオシャレな演出ですよね。シンプルなページにもちょっとしょた動きが欲しいという時に役に立つこの「グリッチエフェクト」は、CSSだけで簡単に実装できますので紹介していきます。
平成最後のGWは10連休のようで、ダラダラと過ごしていますでしょうか？時間が出来たら、ちょっとずつやればいいやと思いなかなか手につかないことも多いでしょう。Webの世界にも時が来れば・必要になれば実行しよう、という怠惰な動作をするものがあります。それが「LazyLoad」(遅延読込)という画像などが表示領域内にスクロールされてから読み込む技術です。色々なライブラリが公開されていますが、カスタムデータ属性(任意に設定できるdata-***というHTML要素に付ける属性)が必要です。新規で構築する場合は良いですが、既に作ってしまったページに適応するのはかなり面倒です。そこで、カスタムデータ属性を使わないで既存ページに追加するだけで使える超軽量コード(542B)を作ってみました。そこそこ汎用性があると思いますので、是非ご検討下さい。
カードデザインというデザインを検討したことがある方は多いのではないでしょうか？レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。
Webサイトに簡易的なコメント機能を実装してみましたので、紹介します。SQLは使用せずにテキストでデータ管理します。ログインなども必要とせずにただちょっとコメントするだけという簡単なもので多くのコメントを捌くような使い方は想定していません。また、返信機能なども特にありませんので必要なら改造してみて下さい。
Instagramの投稿をWebサイトに組み込むために「InstagramAPI」を使用しているWebデザイナー・ビルダーの方は多いと思います。しかし、2020年の初めまでに「InstagramAPI」は使用することができなくなることがアナウンスされています。そこで今回は、2020年以降でもInstagramの情報を取得できる「InstagramGraphAPI」の使用方法についてまとめます。「InstagramAPI」の使い方は既に記事にまとめていますが、これから開発される場合はこの記事を参考にして下さい。
シームレスなWebサイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。JavascriptやCSSを使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。そんな時にページ遷移が発生してしまうとユーザに大きなストレスを与えてしまいます。フォームなどでユーザから入力を受け付けていた場合にはその影響は大変大きなものです。前の状態に戻すこと＝ブラウザの「戻る」ボタン、という認識で操作してしまうことは良く見かけます。そこで今回は、ページ遷移はしないけどブラウザの「戻る」ボタンは有効にできる小技を紹介していきます。CSSだけでは実現できませんので、悪しからず。
お問い合わせフォームなどで電話番号を入力してもらいたいことがありますよね。見やすさや管理のしやすさから3つの入力欄を設けている場合が多いです。しかし、ユーザの観点から云えば入力欄を切り替えなければならず入力が面倒だと感じます。そこで今回は、入力された電話番号をハイフン(-)区切りに変換する方法を紹介します。また不要な文字は削除して半角の整形された電話番号を返すようにしてユーザの負担を最小限にしょましょう。SQLなどのDBに保存する際に「市外局番、市内局番、識別番号」と分けたい場合にも区切り文字があるので簡単に分けて保存しておくこともできます。では、実際にやっていきましょう。
立体的なボタンをデザインした時、マウスオーバーで色を変えたいことがあります。しかし、背景にグラデーションを使用している時はtransitionプロパティで徐々に変化させることができません。そこで今回はそんなグラデーションの掛かった背景色を徐々に変化せる方法についてまとめます。
PHPには良く似た命令や関数が複数用意されていることがあります。その中でも良く使う"echo"と"print"の違いってなんだろうと疑問に思った方も多いはずです。そこで、"echo"と"print"の違いをまとめます。また、一般的に"echo"の方が早いって言われてますが、本当かどうか検証したいと思います。
スマートホンに最適化させたWebデザインを設計する時、メニューをどのように配置しようか悩ましいですよね。PCと違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。
「パンくずリスト」というものをご存知でしょうか？Webサイト上で現在のページがどんな階層のどのカテゴリに属するのかを表示したナビゲーションを指しています。あなたのページに訪れてくれたユーザの方にカテゴリを教えて分かりやすくするだけでなく、実は検索エンジンにも好まれるのです。いわゆる「SEO対策」として有効な手段ということです。そこで今回はパンくずリストの構造と作り方、Wordpressでの表示方法についてまとめます。まだ導入されていない方は是非この機会に導入しておきましょう。