タグ

Web制作に関するpicnicgraphicのブックマーク (75)

  • 音声ブラウザと相性の良いHTMLを作る(1)。 | Junnama Online

    先週から「音声ブラウザ用にできるだけ読み上げやすいHTMLに変換するゲートウェイ」なるものを少しずつ書いている。 関連エントリー 音声ブラウザができるだけ読み上げやすいページに変換しようと試みるゲートウェイ(β)。 音声ブラウザができるだけ読み上げやすいページに変換しようと試みるゲートウェイ(続き)。 音声ブラウザと相性の良いHTMLを作る(2)。 音声ブラウザと相性の良いHTMLを作る(3)。 音声ブラウザと相性の良いHTMLを作る(4)。 音声ブラウザと相性の良いHTMLを作る(5)。 毎日少しずつ修正しているのだけれど、どうやって読み上げやすいHTMLへ変換するかについての考え方を(これも少しずつ)書いてみよう。 画像に関する問題 画像には等価なaltテキストが指定されている筈、という前提に立たないで考えないといけないから、どんな条件の場合にはどんな画像が利用されるかについて考えて処

    音声ブラウザと相性の良いHTMLを作る(1)。 | Junnama Online
  • Styling form controls | 456 Berea Street

    A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across platforms. Most of the time, the question is asked by someone who has just tried to do that, and noticed the difference in rendering across browsers and operating systems. The short answer is probably disappointing to many: you can’t. Some also argue that you sho

  • 優雅なWeb制作のためのテクニック

    自己紹介 中村享介 株式会社ロクナナ/ディレクター 月刊『web creators』 すぐに使えるCSSデザインテクニック 連載中 mixiコミュニティ 【優雅な】Web制作者の会 管理人

    picnicgraphic
    picnicgraphic 2007/06/19
    フォトショでアクション・CSSはモジュール化・時間の確保(できると思う時間の3倍で考える)。#常に一式作るのは大切。+url.jsについて参考「http://で始まるリンクは別ウインドウで開く/window.openでstrictにやさしい」。
  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

    picnicgraphic
    picnicgraphic 2007/06/19
    #やったことのない形式があるので助かるです。アリガトゴザイマス。
  • DSブラウザ実験ページ

    縦画面モード 縦画面モードは通常のページは独自のレイアウトに変換されるが、media=handheldを指定したcssは有効になる。 縦画面モード用テンプレ 縦画面モードを上と下の2画面固定で使うためのテンプレ イベント ボタンとタッチパッドによるイベント処理 イベントテスト タッチでdiv動かす 無意味デモ 昔のこんぴゅーた グラデーション ←top

  • 開発/html仕様 - ニンテンドーDSブラウザーWiki

    html,javascript,css等の仕様いろいろ癖がある、htmljavascriptの仕様をまとめましょう PC版Operaの[表示]->[スモールスクリーン表示]モードが、縦長モードにかなり近い。 フォントサイズ等の違いをのぞけばレイアウト法則はほぼ同じと思われる。デバッグはまずPCでやるのが吉。 html,javascript,css等の仕様 関連リンク html 縦長モード時の特殊な挙動 縦長モード向けCSS関連について。 2画面モードで大きな画像を表示する際の注意 フォント table 表示領域 CSS width,height,margin,padding仕様 縦長モード時に無視されるっぽいプロパティ javascript(DOM) Ajax 関連リンク Opera > スモール・スクリーン・レンダリング(SSR)技術向けオーサリング http://jp.oper

  • ウノウラボ Unoh Labs: ニンテンドーDSブラウザーにあわせてサイトを作るときの軽い覚書

    こんにちは。matsudaです。 以前、こちらでも紹介させていただきました犬・写真でカワイイか投票する「Cute or Not」ですが、これはもともとNintendoDSで遊べるように作っていました。DSブラウザはいまさらな感が否めないですが、上画面に写真・下画面に投票ボタンにして、タッチパネルでポチポチできて、暇つぶしにはもってこいな気がしたからです。 簡単にデザインできるだろう…とはじめは思っていましたが、実はそうでもなく、ちょっと苦戦したところがあったので、メモ程度に残しておきます。 ※以下、DSブラウザー特有の“縦長モード”での場合です。 ■画面のデザインは1画面:縦176px×横247pxNintendoDS の液晶は1画面192px×256pxになっています。そのうち上画面は上16pxがURL表示、下画面は下16pxが機能表示に利用されています。横幅はスクロールバー用に9px

    picnicgraphic
    picnicgraphic 2007/06/13
    画面のデザインは1画面:縦176px×横247px/CSSはhandheld(media="handheld"を入れる)/CSSのfont-sizeは3段階(x-small、small、mediumのみ)
  • ほぼ日刊イトイ新聞 - ほぼ日刊イトイ新聞について

    ほぼ日の見方 ブラウザの設定について 「ほぼ日」をご覧いただく場合、 お使いのブラウザのJavaScriptCookieの設定を ONにしておいてください。 *JavaScriptをONにする方法 *CookieをONにする方法 (JavaScriptとは、 ホームページにさまざまな機能や効果を 加えることができる仕組みのこと、 Cookieとは、 Webサイトの提供者がWebブラウザを通じて 訪問者のコンピュータに 一時的にデータを書き込んで 保存させる仕組みのことです) 推奨環境について 「ほぼ日」をご覧いただく上で、下記の環境を推奨しています。 (2021年8月現在) パソコン Windows 10 Chrome 最新版、Firefox 最新版 Microsoft Edge 最新版 MacOS 10.15以上 Safari 最新版、Chrome 最新版、Firefox 最新版 *上

    picnicgraphic
    picnicgraphic 2007/06/09
    親切なヘルプページ。
  • 第20回 “使いやすいURI(URL)”の設計を考える

    今回は「URIの使いやすさ」について考えてみたいと思います。URIの使いやすさ,というのは,ウェブサイトやウェブ・アプリケーションにおいて,どういうURIでそれぞれのページにアクセスできるようにすると,利用者は使いやすいのか,ということです。つまりは,どのようにURIを設計するのがいいんだろう,ということです。URIの設計については,これまでもいろいろなところで議論がなされていますので,それらの議論や動向などを見ながら,考えていきたいと思います。 URIを話題として取り上げようと思ったのは,4月の4,5日に行われたYAPC ASIA 2007(YAPCはYet Another Perl Conferenceの略)で,Six Apartの創業者でMovable Typeの生みの親であるBen Trott氏がSix Apartのサービス「Vox」について発表を行ったとき,「Voxの出力するRS

    第20回 “使いやすいURI(URL)”の設計を考える
    picnicgraphic
    picnicgraphic 2007/05/29
    「見てすぐに内容がわかるURIにすることで,ページにアクセスしてきた人は,すぐにそれがどんなページであるのかがわかります/ああ「apple」は商品なんだな,とか,「/info/company」なら会社情報なんだな,というように」
  • 1日最大500ページのコーディングに対応! Web標準対応の高品質HTMLコーディングサービス | Web担当者Forum

    ゴーフィールドは5月23日、ウェブ標準に対応した大量、高品質なHTMLコーディングをスピーディーに低価格で代行制作するサービス「Go-factory」を開始した。 「Go-factory」は、大量HTMLの制作、チェック、納品までをライン化した“大量HTMLコーディング専門工場”を開発。工場内のそれぞれのラインがひとつの制作タスクに集中して取り組むことで、高品質、短納期でのサービスの提供を実現した。 「Go-factory」では、高松社に編成されたコーディングチームにより1日100ページの大量制作に対応。さらに生産性を高めたい場合は関連会社である中国法人(大連)のコーディングチームを用意しており、日・大連両コーディングチームの利用で1日500ページの大量制作が可能だ。 大連での制作作業は、現地に常時5名以上常駐している日人スタッフの指導のもと行われ、日語レベルも高い、優秀な中国人ス

    1日最大500ページのコーディングに対応! Web標準対応の高品質HTMLコーディングサービス | Web担当者Forum
    picnicgraphic
    picnicgraphic 2007/05/29
    「大量HTMLの制作、チェック、納品までをライン化した“大量HTMLコーディング専門工場”/工場内のそれぞれのラインがひとつの制作タスクに集中して取り組むことで、高品質、短納期でのサービスの提供を実現」
  • 窓の杜 - 【NEWS】ローカルやWebサイト上の複数HTML/CSSを一括して文法チェック「bkhvalid」

    ローカルやWebサイト上の複数HTML/CSSファイルを一括して文法チェックできる「bkhvalid」v0.2.0が、23日に公開された。Windows Me/2000/XPに対応する寄付歓迎のフリーソフトで、利用は個人目的に限られる。現在、作者のホームページからダウンロードできる。 「bkhvalid」は、HTML 2.0~4.01およびXHTML 1.0/1.1、CSS 1/2/2.1に対応する文法チェックソフト。複数のファイルを一括してチェック可能なほか、タグの色分け表示やエラー箇所へのジャンプができるテキストエディターを内蔵しており、多数のHTML/CSSを効率よくチェック・修正することが可能だ。 チェック対象のHTML/CSSは、ローカル上のファイルをソフト上のファイル一覧へドラッグ&ドロップしたり、WebページのURLを列挙して複数登録できる。あとはツールボタンから一括して全

    picnicgraphic
    picnicgraphic 2007/05/29
    複数ファイルを一括チェック/タグの色分け表示/ツールボタンから一括して全ファイルの文法チェック/エディター画面は複数同時に開いてタブで切り替え/エラー項目WクリックでHTML/CSSソース上の当該位置へ。
  • インターネットチャンネル向けのウェブページを作りたいのですが…。 : Q&A - Wii

    インターネットチャンネルのユーザーエージェントは、次のとおりです。 (お客様がダウンロードされた時期により異なります。) ●日 Opera/9.10 (Nintendo Wii; U; ; 1621; ja) ●英語 Opera/9.10 (Nintendo Wii; U; ; 1621; en) ●ドイツ語 Opera/9.10 (Nintendo Wii; U; ; 1621; de) ●スペイン語 Opera/9.10 (Nintendo Wii; U; ; 1621; es-ES) ●フランス語 Opera/9.10 (Nintendo Wii; U; ; 1621; fr) ●イタリア語 Opera/9.10 (Nintendo Wii; U; ; 1621; it) ●オランダ語 Opera/9.10 (Nintendo Wii; U; ; 162

  • ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum

    Web担編集部の安田です。Web担のはてブ件数1万件超え()を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」(IEの場合)または「このリンクをブックマーク」(Firefoxの場合)してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか?」とのセキュリティ警告が出ま

    ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
  • 印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]

    約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ?」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th

    印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
    picnicgraphic
    picnicgraphic 2007/05/12
    width:100%よりauto(paddingやmarginが外れた場合のリスク回避)・印刷時のリンク表示(属性セレクタにafter擬似要素 または JSで印刷用ページのリンク先にナンバーを振りリンク先を文末に←#いいかも!)を参考。
  • 正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ::::::STOPN' LISTEN::::::to the silence:::::::

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

    picnicgraphic
    picnicgraphic 2007/05/09
    テキストをタグ付け(この工程でデザイン見ない)→div要素グルーピング(グルーピングされた要素同士は依存関係持たないように)→id/class設定→CSS→HTML検証→CSS再編集(なるべく同じclassやid、コード短くコメントたっぷり)
  • tlbox - Web Design Tools

    Hundreds of Web Design and Programming ToolsThis site contains an application to help web site and graphic designers, interior decorators etc. pick color schemes - combinations of colors that are pleasing to the eye. The tool is based on a color wheel, and it generates monochromatic, contrast, triad, tetrad, and analogic color schemes.

    picnicgraphic
    picnicgraphic 2007/05/05
    「ウェブデザイナー・プログラマに便利なツール集 tlbox/via*DesignWalkerさん」
  • CSS Layouts: Grid and CSS Layouts

    NameBright.com - Next Generation Domain Registration ironmyers.com is coming soon

    picnicgraphic
    picnicgraphic 2007/05/04
    「IE7もサポートしているCSSレイアウトがダウンロードし放題/via*P O P * P O Pさん」
  • もう、そんなミスに陥らないんだからっ!!

    どーも。最近密かに主婦に人気が有るんじゃないか?と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ? で、題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる(やった)初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、

    もう、そんなミスに陥らないんだからっ!!
    picnicgraphic
    picnicgraphic 2007/03/25
    「スペルはミスってない?/そのid(class)、適用させたいのと違うんじゃない?/width指定忘れてない?/line-heightの影響を受けてるんじゃない?/font-sizeの影響を受けてるんじゃない?」を参考。
  • スペシャルベスト

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

    picnicgraphic
    picnicgraphic 2007/03/20
    「単純に工場制手工業に習ってそれぞれの工程を分業して大人数でやったら効率上がるんじゃない?」の作業例。#作業前はルールが相当必要と感じたのだけどどかな?
  • px*blog | ドット線テーブル

    ドット線で出来ているテーブル【cssだけで作ると…】 ドット線のcssで作るのが手っ取り早いですが、Internet ExplorerとFirefoxで、見え方が違うんですよね。 Firefoxではサンプル図のように点々になるけど、 table { border-top:dotted 1px #999; border-left:dotted 1px #999; } table td { border-right:dotted 1px #999; border-bottom:dotted 1px #999; } Internet Explorerではこんな感じに→、 点々ではなく破線になってしまう。 このリンクをIEとFirefoxで見比べてみてください。 ドットテーブル cssで作った場合(ポップアップ) (/別窓) 破線がいいときはいいんですが、点々にしたいときは、背

    picnicgraphic
    picnicgraphic 2007/03/17
    ドット線で出来てるテーブル(背景利用編)。「点々にしたいときは、背景画像とcellspacing="1"を使って出す」大事なポイント:2px四方のドット画像・cellspacing="1"・奇数のwidth。透過画像で背景にするのはIEで重くなる。