Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days
NHKの紅白歌合戦2018の出場歌手が発表になり、 出場歌手｜第69回NHK紅白歌合戦 この一覧でジャニーズの「Hey! Say! JUMP」の名前だけが画像だということが話題になった。 第69回NHK紅白歌合戦の出場歌手のページhttps://t.co/Z6lbjpIbMY "Hey! Say! JUMP" の文字がどうも選択できない。 HTML ソースを見た時、NHK の 「"Hey! Say! JUMP" を絶対にテキスト選択させまい！」 とする意地を感じた。 何で？ pic.twitter.com/dil9k9LVCA— nipotan (@nipotan) 2018年11月14日 しかも、ただの画像ではなくてこういうSVGが指定されている。 Web技術が使われててすごい。 なんでこういうことをやっているかというと、どうも a の字形にこだわっているためではないかという。 公式的に
Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
高齢者に対してパソコンの大先生をした知見を共有したい
70歳過ぎの高齢者にフリーWiFiの接続方法について尋ねられた。 ここはショッピングモールのカフェ、「WiFi接続無料」を売りにしている。 自分も、通信容量節約のためによく使っている。 いつも通りradikoを聴きつつ、増田ブラウジングをしていたら、あるご老人から話しかけられた。 「このへんってWiFiつながるんですか？」 しかし、カフェでいきなりこの質問をされたら大抵の人は戸惑うんじゃないか？ 今オレが、この話の前提とこれから起こることを先に提示したから「この老人はフリーWiFiにつなぎたいんだな」と分かるだろう。 だが、何の前提もなくこの質問をされたら一体何のことかと思うだろう。 （WiFiって、どのWiFi？） （つながるって、電波強度の話？） 先読みエスパーならシチュエーションと文脈から分かるのかもしれない。 人工知能ならフレーム問題で機能停止を起こすところだ。 （ためしにSiri
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
dev.toと阿部寛のホームページについてちゃんと計測させてくれ - Qiita
Twitter見てたら、以下のツイートを見た。 数時間後、dev.toと阿部寛のホームページどっちが速いですか？というブログがTLに現れた。 GoogleのPageSpeed Insightsで測って阿部寛のホームページの方が早かったという結論付けてよいのかという疑問が浮かび、webpagetest.orgで計測することにした。 設定 阿部寛のホームページに関しては、Tokyoリージョンにあるものとする。 そして、dev.toはNY発らしいので、サーバーの設定をNYにして測定する。 The platform was created in 2016. The twitter account, @ThePraticalWeb 評価結果 Webpagetest - 阿部寛のホームページ Webpagetest - dev.to
誰がインフルエンサーだったのか
Introduction SNSの情報発信源として強い影響力を持つ人をインフルエンサー（influencer）と呼ぶ。日本でツイッター投稿が盛り上がった10月の衆院選を分析すると、選挙のインフルエンサーの意外な姿が浮かび上がった。 データ出所：NTTデータ。リツイート含む。年代はNTTデータが推定した もっとも注目されたTweetは トランプ氏の４倍衆院選期間中の「選挙」にかかわるつぶやきをリツイート数の多い順にランク付けしたところ、トップ5はすべて4万を超え、最も多いもので9万近くに上った（10月下旬）。頻繁なツイッター発信で知られるアメリカのトランプ大統領でも、11月の来日時のつぶやきでみればリツイート数は多くて2万台。ランキング上位のつぶやきはトランプ氏の倍以上の影響力があったことになる。上位に並んだのは、投票を呼びかける前向きなつぶやきだ。 RANK Tweet DATE RT 1
dev.toと阿部寛のホームページどっちが速いですか？ - くうと徒然なるままに
dev.toと阿部寛のホームページどっちが速いですか？— あれからのぐりだけど (@_guri3) 2017年11月15日 という内容のツイートを見つけたので計測してみる。 ずっとパソコンに向かってて飽きてたので息抜きで。 dev.to というのは、 Qiita の海外版みたなやつです。一番の特徴はナビゲーションの速さ。 対抗するのは、 THE Traditional Web Site というたたずまいで有名？な 阿部寛のホームページ 計測 今回は、Google の PageSpeed Insights を利用していきます。 dev.to まずは、dev.to から 86/100 です！ 阿部 寛 のホームページ 92/100 です！ まとめ 伝統的ウェブサイトの方が早かった！
「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
ダークウェブの片隅で現在起こっていること ――児童ポルノサイト摘発事件とその周辺｜kzwmn｜note
■"Childs play"とは ダークウェブ上に存在した巨大児童ポルノサイト"Childs Play"が、11ヶ月間に渡ってオーストラリア警察（Task Force Argos）によって運営されていた、という事実がノルウェーのタブロイド紙"Verdens Gang"（以下VG）によって公表されたのは記憶に新しいと思います（記事）。 警察機関が児童ポルノサイトをおとり捜査の名目でハッキングした上で運営を継続させるケースは、例えば2015年にもFBIが児童ポルノサイト"Playpen"を2週間に渡って運営していた等前例があるのですが、今回は運営が11ヶ月間という長期に渡っていたこと、さらにサイトの運営者なき後も警察自らが運営者を装いサイトの維持に努めていたこと、さらにそのために児童ポルノの投稿さえしていたこと、等の事実から火種を撒く要素を大いに含んでいると思われます。 ところで、そもそも今回
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
DMCA悪用はなぜ問題なのか - ウォンテッドリー社の悪評隠蔽事例 - SEO辻正浩のブログ
ビジネスSNS、Wantedlyを運営するウォンテッドリー社のDMCA悪用が話題になっています。 同社のIPOに向けた資料を解説したブログ記事「Wantedly（ウォンテッドリー）のIPOがいろいろ凄いので考察」に対して、ウォンテッドリー社によってDMCAに基づく削除申請が行われました。 その結果、記事はGoogleの検索結果から消され、その記事を言及したツイートは非表示にされています。 DMCA申請は画像の著作権違反を問題視してとのことですが、インターネット上で多く流布されているような画像へのDMCA申請であって、実際は悪評隠蔽の意図であることは明白です。 このことが大きな話題になった今もメディアの取材に対して、悪評封じの意図は無く「弊社が著作権を有する画像の無断使用はやめていただきたいとの判断」と、あくまでも画像の無断利用を問題視しただけ、と主張しています。 私はこれが許されるべきこと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)
サービス終了のお知らせ - Yahoo!ジオシティーズ
最近の10～20代は欲しい情報を都度、検索しない。若年層の中で流行っている情報収集術とは？｜【公式】ModuleApps 2.0
http://career-panda.com/design-website-2017
