ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

情報をキャッチアップする際に活用する手段の一つとして『RSS』があります。こちらについてはブログ側で(自動)生成されているものについてはそのまま活用出来ますが、『任意のカテゴリやテーマ等での範囲で』となると中々全てはカバーし切れないというのが現状ですし、そもそもその(任意のウェブサイトの任意の)ページにはRSSフィードが設置されていない、というケースも往々にしてあるかと思います。 私自身も改めて情報収集体制を整理・一新しようと思い立ち幾つか情報を漁っていたところ上記の状況にぶち当たり、この状況を解決・改善すべき妙案は何か無いものか…と調べてみると『Feed43』なるサービスが良さ気な感じでしたので、当エントリでその内容と作成手順について紹介してみたいと思います。 Feed43とは Feed43による独自RSSフィードの作成手順 まとめ Feed43とは Feed43 : Convert a

ウェブサイトの読み込み最適化は、開発者たちを悩ませる永遠の課題です。特にページ遷移時の読み込みに関しては、開発者側からなかなか手を出せない状態でした。そんな状況も、Resource Hintsを使えば大きく変わります。 Resouce Hints Resource Hintsはlink要素を利用したリソース先読みのための仕組みです。使い方は簡単で、head要素内に、該当するlink要素を置くだけでブラウザが自動的に読み込みを行ってくれます。 <link rel="dns-prefetch" href="//example.com"> Resource Hintsの種類は以下の4種類で、状況によって使い分けることができます。 dns-prefetch preconnect prefetch prerender 対応ブラウザ 対応ブラウザに関しては、現在のところあまり多くはありません。詳しくは

2015/04/30追記　この方法は必ずしも安全ではないように思われてきました。しかし実質的に私はこの方法を講じてから被害を受けていないので、少なくとも何も対処しないよりは次善の策を講じるということでお読み下さい。 JavaScriptでもメールアドレスが破られるという例： http://mailrobo.7jp.net/mrobo3.html 簡単にできるロボットスパム対策 掲示板、ブログ、メールフォームなどを設置したものの怒濤のスパム投稿に閉口して、閉鎖したとかコメントを受け付けないようにしている人は結構いるのではないでしょうか。私は古い良き時代の掲示板がスパムによって閉鎖あるいはスラム化したまま放置されているのを見ると寂しく残念に思います。 スクリプトやテンプレートを２～３行書き換えるだけの簡単な改造でほとんどのスパムを弾けてしまう方法があります。それはロボットはJavaScript

はじめに こんにちは、ピクトリンク事業部開発部サーバサイド開発課のkitajimaです。弊社サービスピクトリンクは、システム再構築の一環として

半角スペースがあると意味不明のテキスト折り返し：半角スペースを&nbsp;に リンクをタップしたときのグレーのハイライトを無効に：-webkit-tap-highlight-color Safariの明朝をゴシックに：font-family iOS（iPhoneやiPad）やMacのSafariやChromeにSan Franciscoフォント：-apple-system-bodyとBlinkMacSystemFont GoogleのNoto Sans Japaneseはヒラギノに近い：@import ヒラギノ（Hiragino Sans）フォントのW3とW6：@font-face iPhoneなどで縦横画面でフォントサイズが変わる：-webkit-text-size-adjust リンク長押しのポップアップ：-webkit-touch-callout iPhoneなどのフォーム：-web

Nexus 7 の Chrome でインターネットしてると、サイトによっては欧文フォントが等幅になっていることに気づいた。例えばこのようなサイト（とスクリーンショット）。 [](http://ascii.jp/) あとこれとか。 [](http://www.forest.impress.co.jp/docs/review/20140410_643367.html) ※ 適当にブラウジングしてた

今までサイトの読み込み速度を速くする手法の一つに、遅延ロードや非同期読み込みが一般的でした。LazyLoadなどの遅延ロードを行ったり、Ajaxで非同期にscriptを読みこんだり。これらはjsをゴリゴリ書いたりすることで実現することができましたが、Resource Hintsに記載されているlinkタグのrel属性を使うことで、事前にコンテンツを読みこませることができます。今回はResource Hintsの仕様とlinkタグでの使い方をご紹介していきます。 Resource HintsとはResource Hintsに記載されている内容としては、主にリソースの事前読み込みについて書かれています。この仕様を使ってリソースの取得をタイミングを制御し、ユーザへ素早くコンテンツを配信させることができます。 This specification defines the dns-prefetch,

一言まとめ LightBoxは時代にそぐわなくなってきた。その最有力候補として浮かび上がってきた PhotoSwipe だが、導入する作業が煩雑なため、jQueryプラグインにした。 JavaScriptのギャラリーライブラリといえば「LightBox」です。むしろ「LightBox」が一種の代名詞にもなったくらい一世を風靡したのです。 しかし、時は2016年。もっとモダンな「Lightbox」はないのか…　と、誰もが願うものです。 そして、そんな願いを完璧に応えてくれるライブラリが現れた… それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。 圧倒的な人気度 GitHubで言語をJavaScriptに絞って、「gallery」で検索した後、さらにソート順を「Most stars」にした結果。 「PhotoSwipe」のスター数

日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。 Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。 Macでは問題なく游ゴシックが利用できるので、ヒラギノ

Ajaxいいねボタンは、「いいねボタン」をウェブページに簡単に設置できる、無料のPHPスクリプトです。 facebookのようなサイトに頼らず、独自のオリジナルいいねボタンを実装したい方にお勧めです。 多数の項目に一つ一つ、いいねボタンを付けたいといったケースを想定して設計されました。 一枚のウエブページ内に多数のいいねボタンを効率的に設置できます。

前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは

概要 Preprosは、Sass、Pug、Haml、Slim、CoffeeScript、TypeScriptなどをコンパイルするGUIコンパイラです（macOS/Windows/Linux対応）。コンパイル以外にもPreprosには開発に便利な機能が用意されており、HTMLやCSSを更新すると自動でブラウザがリロードされたり、スマートフォンからも確認できるようにローカルサーバが内蔵されています。 他のコンパイラと比較してインストール、設定が簡単なのもポイントです。 Preprosの主な機能・特徴 ウォッチ対象（HTMLやCSS）のファイルを更新するとブラウザが自動でリロードするSassやLessなど豊富な対応言語HTML/CSS/JSの圧縮画像最適化ローカルサーバーを内蔵しており、スマホやタブレット端末なども同期して確認が出来るFTP/SFTP転送も可能npmを使って機能の追加が可能 Ja

ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。 単体で動作し、しかも1KBの超軽量スクリプトです。

Intro Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。 https://w3c.github.io/resource-hints/ 主に以下がある。 dns-prefetch preconnect prefetch prerender 今回は本サイトでこれを適用した話。 投機的なリソース取得 例えば、ログインページの次には、そのサービスのメインページに遷移する頻度が高い。 そして、メインページでは、以下のような追加のリソースが必要になるだろう。 追加の JS 追加の CSS 追加の Image 追加の API アクセス それぞれを DNS 解決 -> TCP 接続 -> リソースのフェッチ、と繰り返していくと、イニシャル表示は必然的に時間がかかる。 ところが、この遷移に

Webサイトにおいて、お問い合わせフォームやアンケートフォームを作る機会は多いでしょう。 フォームは一般的に、CGIやPHPのようなプログラム言語で作られ、ゼロから作るとなるとデザイナーやコーダーのようなWeb制作者は、ちょっと苦手だったりましますよね。 そんな時に重宝するのが、素晴らしき技術者によって提供されている無料＆商用利用可能なメールフォームです。 htmlとcssの知識があれば、容易にデザインをカスタマイズしてサーバーに設置できます。 今回は、そんなサーバー設置型のメールフォームをCGI版とPHP版に分けてまとめました。 サーバーや要件によって、使えるものとそうでないものがあると思います。いろいろと試してみてください。 ※無料＆商用利用可能でも、著作権者表示が必要なものもあります。 ※自動返信、確認画面、入力必須設定、デザインカスタマイズなど、基本的な機能はどのフォームにも付いて

Resource Hintsとは？ 下記4つのAPIから構成される。IEについては10以降にはなるが、大体のブラウザでサポートされている。 - DNS-Prefetch - Preconnect - Prefetch - Prerender 詳しくはResource Hints参照。 DNS-Prefetch ソーシャルボタンの設置やCDNの利用など、外部サイトからリソースを読み込む場合、「DNSルックアップ（ドメインをIPアドレスに変換すること）」が複数発生します。下記のように指定することで、あらかじめドメインの名前解決を行うことが可能です。 (function(document) { var servers = [ /* evernote */ "static.evernote.com" /* pocket */ ,"d7x5nblzs94me.cloudfront.net" ,"wi