ネットで話題のニュースを紹介

レンダリングブロックするjsファイルを非同期化して、ページの読み込みスピードを速くする方法

コードが書かれたモニター
GoogleのPageSpeed Insightsでサイトをチェックすると、読み込みスピードを速くする方法として「レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください」と提案されることがあります。 ...
続きを読む

SVGファイルを初めて設定する時につまずきやすいポイント!リンクの設定とカラーの変更方法

SVGファイルイメージ
画像ファイルと言えば、JPEGやPNG(ビットマップデータ)を扱う機会が多いと思いますが、高解像度ディスプレイで見るとぼやけてしまう欠点があります。 そのため、スマートフォンの普及もあり、今ではSVGなどベクターデータを使う方が都合いいことが多くなりました。SVGは軽くて画質の劣化がな...
続きを読む

Twitterで最も拡散されやすい時間帯は?100万ツイートを分析した結果…

「あんま可愛くなくない?」元彼の今カノのSNSを見てほくそ笑む女性
WebマーケティングやSEO関連の情報を取り扱っているメディア「ferret」で、「ツイートの投稿時刻」と「リツイート数の相関関係」を調べた調査結果が紹介されていました。 調査はランダムで100万ツイートを分析し、Twitterで拡散されやすい時間帯を算出しています。かなり信ぴょう性の...
続きを読む

フォント選びの参考に!Webデザインでもっとも人気が高いフリーフォントは?

Webでもっとも人気の高いフリーフォント
Webでもっとも人気があるフリーフォントなど、Webの様々なトレンドについてAvocode 2016 Web Design Reportでまとめられていましたのでご紹介します。 レポートは、PSDのプレビューや書き出しができるツール「Avocode」で利用されたファイルを元に作成された...
続きを読む

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

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

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

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

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

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

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

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