スマートフォン端末で電話発信するa要素「tel」をPC版で無効にする方法

新機種が出るたびに増えるスマートフォン
a要素に[href="tel:電話番号"]を指定すると、電話発信用のリンクを設定することができます。スマートフォンなどではタップするだけで直接電話をかけることが可能になるため、非常に便利な機能です。 しかし、レスポンシブWebデザインでサイトを構築している場合、パソコンで見ると[href="tel:電話番...
続きを読む

https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法

先輩への質問の返答が、全部「ググレカス」
ローカルやデモ環境で問題なく動作確認したファイルを本番環境にアップしたら、javascriptが動かない…こんな経験ないでしょうか? その本番環境が「https(SSL)」で通信している場合は、スクリプトの記述方法に原因があるかもしれません。今回は、https通信下でjavascriptが動かなくなった場...
続きを読む

カラーコードを取得したい時はGoogle検索が便利!カラーピッカー機能が簡単に使えちゃう!

四角いカラフルクレヨン
Web制作時に必ず利用する機能「カラーピッカー」。PhotoshopやIllustratorなど、画像編集ソフトに搭載されている色を選択できる機能です。 しかし、カラーコードを取得するためだけにソフトを起動するのはちょっと面倒だったりします。そんな時、便利なのがGoogle検索!実はGoogleで超簡単に...
続きを読む

ヘッダを[position:fixed]で固定した際、ページ内リンクの位置がずれるのを解消する方法

ノートパソコンで作業中
当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。 しかし、[position:fixed]でヘッダを固定している場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。今回はその場合の対処方法を紹介します。 ページ内リンクの位置ずれを解消する方法 C...
続きを読む

【CSS】floatで横並びさせたリスト(li)をセンタリングする方法

コードが書かれたモニター
フッタメニューやページングナビゲーションのコーディングで、liタグをfloatさせて横並びにすることはよくあると思います。しかし、そのリスト全体をセンタリングしようと「margin:0 auto;」や「text-align:center;」を使っても上手く中央に揃いません。 そんな時は「position:...
続きを読む

【SEO】Googleが「モバイルファーストインデックス」の導入実験を開始。スマホ向けページがますます重要に

Google トップページ
先日、Googleがモバイル ファーストのインデックス登録に向けた実験を開始することを正式にアナウンスしました。 つまり、将来的にGoogleのアルゴリズムはモバイル版のコンテンツを主として使用するようになるということです。今後はモバイル(スマホ)向けページの重要性がさらに高まることになりそうです。 ...
続きを読む

アドビ公式!作業効率が劇的に上がるPhotoshop&Illustratorのショートカット一覧

PhotoshopとIllustratorのショートカット一覧
日本法人のアドビシステムズより、PhotoshopとIllustratorの数あるショートカットの中から、デザイナーによく使われているものをピックアップした一覧表が公開されました。 シートは嬉しい日本語表記!こういったチートシートは英語表記のものが多いので地味に助かりますね。 関連記事:Photos...
続きを読む

このクオリティで無料!日本の美しい風景写真のフリー素材「PHOTO METI PROJECT」

PHOTO METI PROJECT
経済産業省が、日本各地の美しい風景写真を商用利用も可能なフリー素材として提供するサイト「PHOTO METI PROJECT」を公開しました。 無料の写真素材サイトは数多くありますが、「PHOTO METI PROJECT」で使われている写真は他の追随を許さない圧倒的なクオリティです。当ブログでもどんどん...
続きを読む