タグ

WEBデザインとWeb標準化に関するt-murachiのブックマーク (14)

  • チャットソフトを複数使ってると『送らず改行してくれ!』の賭けが発生する→手間かけて防止・統一を望む声

    ちゅん🐤 @KotorinChunChun 頑張って調査したけど未だ改善されずwww 20200518 あらゆるチャットのEnterの挙動を徹底調査。~改行キーと送信キーは統一すべきである~ excel-chunchun.com/entry/20200518… twitter.com/nrslib/status/… 2022-05-29 16:44:54 リンク えくせるちゅんちゅん あらゆるチャットのEnterの挙動を徹底調査。~改行キーと送信キーは統一すべきである~ - えくせるちゅんちゅん チャットで改行しようと思ったのに送信されてしまった!!! そんな経験ありませんか? SNS・チャットソフトによって送信キーと改行キーがバラバラすぎなのが原因です。 いつも使っているソフトなのに、ショートカットキーがパッと出てきません。 数秒迷った挙げ句、 勇気を出してポチッと押したら送信されてし

    チャットソフトを複数使ってると『送らず改行してくれ!』の賭けが発生する→手間かけて防止・統一を望む声
    t-murachi
    t-murachi 2022/05/31
    RFCであるべき姿を勧告すべきだと思う(´・ω・`) Enterは改行、Ctrl+Enterが投稿であるべき(´・ω・`)
  • デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話

    こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN

    デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
    t-murachi
    t-murachi 2020/10/18
    Ubuntuユーザーのおいら的にはWebフォント一択なんですが… ていうかWeb標準化の理念に倣うならデファクトを前提にすべきではないし総称フォント指定で問題のない状況を各プレーヤが責任を持って維持すべきなんだよね('A`)
  • 本当に求めてるのはピクセルパーフェクトという「要件」ですか?|榊原昌彦

    個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました!2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな

    本当に求めてるのはピクセルパーフェクトという「要件」ですか?|榊原昌彦
    t-murachi
    t-murachi 2020/09/22
    ピクセルパーフェクトが要件になっているせいで、OSがLinuxだというだけで推奨環境ではないとアラート出したりエラー画面に遷移したりするサイトの如何に多いことか… Web標準とは何だったのか…(´・ω・`)
  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
    t-murachi
    t-murachi 2012/08/25
    <i></i> とか inline-block とかってそういう目的で使われてたのか…。 / Web フォントは実用的なものがもっといろいろ出てきてくれると嬉しいですね…。
  • キヤノンはなぜ達成等級「A」を満たせなかったのか | 水無月ばけらのえび日記

    7.2.4.1 ブロックスキップに関する達成基準 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利用可能でなければならない。 注記 この達成基準は,等級A の達成基準である。 以上、JIS X 8341-3:2010 7.2.4.1 より ……これで全てです。これだけではさっぱり分からないと思いますので、対応するWCAG2.0の解説を参照することをお勧めします。JIS X 8341-3:2010の達成基準7.2.4.1は、WCAG2.0の2.4.1に対応します。 Understanding WCAG 2.0 - Understanding Success Criterion 2.4.1 (www.w3.org)WCAG 2.0解説書 - 達成基準 2.4.1 を理解する (waic.jp)ここで注意する必要があるのは、何らかの方法でブロックスキップが

  • Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記

    はじめに みなさん、お元気ですか><リリースも終わって、一息ついたあまちゃんです! ヽ(´ー`)ノわー さて今日は、最近「お花サプライズ!」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 (今日のテーマはこの円グラフ) フェイスブック系のサービスはどのブラウザに対応すれば良い? よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか?」というものがあります。 「お花サプライズ!」でも、割と短い期間で実装することを目標としていたり、番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか?」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね?

    Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
  • Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot

    Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and

    t-murachi
    t-murachi 2011/07/22
    js 使わずに drop down とか作れるのは良いね。 / コード例見てると "-webkit" とか "-moz" とかで始まる行が多くて、標準化っていう意味ではまだまだだなと思わされる。
  • 結局どうすればいいの? - Dive Into HTML5

    Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で

    t-murachi
    t-murachi 2011/02/02
    必読。しかし原文でも "Kill it. Kill it with fire." ってなっててクソワロタw
  • JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現

    t-murachi
    t-murachi 2009/08/06
    ほんの 10年前までは、アニメ GIF がこんなにも廃れてしまうことになるなんて夢にも思わんかった。
  • 標準モードと互換モードについて

    汎用性を保たせるためのモード HTMLの形式が徐々に進化することに並行して、HTMLを装飾(デザイン)するスタイルシート(以下CSS)も変化し続けています。現在のブラウザはCSSの標準に準拠した解釈でページを表示するようになっていますが、ブラウザの種類やHTMLの形式によってその解釈が異なることがあります。従って、個々のブラウザでは古いHTMLのバージョンで書かれたページも表示できるように、互換モードが搭載されています。 現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。 従って、HTMLだけでなく、スタイルシートも使ってページをデザインするには注意が必要です。 モードの切り替えの判断は… 現在のWEBブラ

    標準モードと互換モードについて
    t-murachi
    t-murachi 2009/05/20
    「『古いブラウザでは表示されません。』などの記述をしておくと親切なページ作りになります。」<親切………なのか?
  • HTML 5では「article」タグでページの「本文」が取れる - モジログ

    次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事(末尾にまとめた)をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた(「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」)。HTML 5では、いくつか導入される新しい要素(タグ)の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「文」でも

    t-murachi
    t-murachi 2008/08/11
    現状主流になっているレイアウトに HTML 規格が迎合した格好。主要 CGM が対応していけば割とすんなり広まるんじゃないかなぁ。まぁ XOOPS とか未だにデフォルトでテーブルレイアウトだったりするけどw
  • 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

    という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ~ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま

    3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
    t-murachi
    t-murachi 2008/04/15
    UTF-8 で css 外部ファイルで png 使いまくりのサイト大量に作ってDoCoMo締め出そうぜまぢで。つか、これだけ気を遣わんといかんのか思うとイライラしてくる。絶対ケータイサイト請負の仕事なんて取らねーぞこん畜生(#`Д
  • [CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス

    TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は8つのステップで紹介されています。

    t-murachi
    t-murachi 2008/03/06
    ブラウザの読み込み・表示単位を考慮するなら <table> よりはましかな。意味としては、「所詮カラムはセッションのリストだ」とか…。やっぱり無理があるなぁ。
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

    t-murachi
    t-murachi 2007/07/30
    うちのブログのIEでだけ崩れちゃうの、直しておかないとなぁ。。。
  • 1