Analog Studio

Tips

Web サイト制作に役立つ情報や小技などをまとめています。

全カテゴリ

記事一覧

CSSのbox-shadowを滑らかにtransitionさせる方法【カクカクさせない】

概要

カードデザインというデザインを検討したことがある方は多いのではないでしょうか?レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。

PHPでSQLを使わない簡易的なコメント機能を実装しよう!

概要

Webサイトに簡易的なコメント機能を実装してみましたので、紹介します。SQLは使用せずにテキストでデータ管理します。ログインなども必要とせずにただちょっとコメントするだけという簡単なもので多くのコメントを捌くような使い方は想定していません。また、返信機能なども特にありませんので必要なら改造してみて下さい。

「Instagram API」が廃止に!代替の「Instagram Graph API」に移行しよう!

概要

Instagramの投稿をWebサイトに組み込むために「InstagramAPI」を使用しているWebデザイナー・ビルダーの方は多いと思います。しかし、2020年の初めまでに「InstagramAPI」は使用することができなくなることがアナウンスされています。そこで今回は、2020年以降でもInstagramの情報を取得できる「InstagramGraphAPI」の使用方法についてまとめます。「InstagramAPI」の使い方は既に記事にまとめていますが、これから開発される場合はこの記事を参考にして下さい。

ページ遷移しないけど、ブラウザの戻るボタンを有効にする方法【pushState】

概要

シームレスなWebサイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。JavascriptやCSSを使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。そんな時にページ遷移が発生してしまうとユーザに大きなストレスを与えてしまいます。フォームなどでユーザから入力を受け付けていた場合にはその影響は大変大きなものです。前の状態に戻すこと=ブラウザの「戻る」ボタン、という認識で操作してしまうことは良く見かけます。そこで今回は、ページ遷移はしないけどブラウザの「戻る」ボタンは有効にできる小技を紹介していきます。CSSだけでは実現できませんので、悪しからず。

Javascriptで電話番号をハイフン区切りに整形する方法

概要

お問い合わせフォームなどで電話番号を入力してもらいたいことがありますよね。見やすさや管理のしやすさから3つの入力欄を設けている場合が多いです。しかし、ユーザの観点から云えば入力欄を切り替えなければならず入力が面倒だと感じます。そこで今回は、入力された電話番号をハイフン(-)区切りに変換する方法を紹介します。また不要な文字は削除して半角の整形された電話番号を返すようにしてユーザの負担を最小限にしょましょう。SQLなどのDBに保存する際に「市外局番、市内局番、識別番号」と分けたい場合にも区切り文字があるので簡単に分けて保存しておくこともできます。では、実際にやっていきましょう。

PHPのechoとprintの違いとは?「echoが早い」はホントなのかも検証!

概要

PHPには良く似た命令や関数が複数用意されていることがあります。その中でも良く使う"echo"と"print"の違いってなんだろうと疑問に思った方も多いはずです。そこで、"echo"と"print"の違いをまとめます。また、一般的に"echo"の方が早いって言われてますが、本当かどうか検証したいと思います。

スマホ用のメニューをどうするか?使いやすいメニューを考える

概要

スマートホンに最適化させたWebデザインを設計する時、メニューをどのように配置しようか悩ましいですよね。PCと違いスマホでは表示領域に余裕がなくメニューに表示面積を割いてしまうとメインコンテンツが窮屈になってしまいます。かといってメニューをなくしてしまうとユーザの利便性が低下してユーザが離れてしまう可能性があります。そこでユーザの利便性を確保しつつメインコンテンツを圧迫しないメニュー例を紹介していきます。

パンくずリストを表示させよう!ユーザにも検索エンジンにも優しいナビゲーション!

概要

「パンくずリスト」というものをご存知でしょうか?Webサイト上で現在のページがどんな階層のどのカテゴリに属するのかを表示したナビゲーションを指しています。あなたのページに訪れてくれたユーザの方にカテゴリを教えて分かりやすくするだけでなく、実は検索エンジンにも好まれるのです。いわゆる「SEO対策」として有効な手段ということです。そこで今回はパンくずリストの構造と作り方、Wordpressでの表示方法についてまとめます。まだ導入されていない方は是非この機会に導入しておきましょう。

【2019年で廃止予定】インスタのタイムラインを表示させる方法!「Instagram API」の使い

概要

この記事で紹介している「InstagramAPI」は2020年初めまでに廃止される予定です。代替APIはFacebookが提供する「InstagramGraphAPI」になります。これからインスタグラムのタイムラインを表示しようと考えている方は、以下の記事を参考にして下さい。・「InstagramAPI」が廃止に!後継の「InstagramGraphAPI」に移行しよう!Webサイトを制作していると公式インスタグラムのタイムラインを表示したくなります。しかし、インスタグラムにはタイムラインを簡単に表示できるようなものは用意されていません。もちろんタイムラインを表示させる仕組みが存在しないわけではないです。開発者ツールを使ってタイムラインの表示に必要な情報を取得してきて自分で作ることで実現できます。今回はそんな開発者ツールを使ったタイムラインの表示方法を紹介します。

郵便番号から自動で住所を検索する方法【Javascript】

概要

Webサイトに訪れてくれた方からのお問い合わせにフォームを使うことは多いと思います。メールクライアントソフトを起動させることなく、ブラウザ上から手軽に送信できる利点は大きいです。また、必要な項目が予め表示されているので記載すべき内容をユーザが考えなくても良いというところも大事ですね。さてそんな便利なフォームですが、住所の入力をお願いしたいという管理者の方も多いのではないでしょうか?しかし住所の入力は億劫な方が多いのも事実です。少なくとも私は好きではありません(笑)せっかくお問い合わせしようとしても面倒な項目が必須だと送信を躊躇ってしまうこともあります。そこで、Javascriptを用いて郵便番号から自動的に住所を検索してユーザの利便性を上げる方法を紹介します。コンセプトは「ユーザの手間を少しでも減らす」です。また、どこにでも軽量に組み込めるようにjQueryは使いません。