ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点
こんばんは。harukです。 DoCoMo編…となるはずですが、特に書くようなことがないので、今回はXHTMLについて少し書いてみます。 現在ではすべてのキャリアが3G端末がメインとなってきています。 ※2006年11月末現在 DoCoMo: 約60% au: 約90% SoftBank: 約35% ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。 XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。 今回はXHTMLを使用する上での、各キャリアの仕様の違いなどをまとめてみたいと思います。 対応機種 DoCoMo FOMA(初期の2001,2002,2101以外) au WAP2.0ブラウザ搭載端末 SoftBank W型、3GC型 DOCTYPE宣言(推奨) DoCoMo <!DOCTYPE html PUB
CSS 分割管理の実践編
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与:phpspot開発日誌
Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後
何かと役立つCSSの技 || Cool Web Window
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
【Dreamweaver】スニペット使わないと後悔するよ！::::::STOPN' LISTEN::::::to the silence:::::::
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
もっと手軽でオシャレに！Amazon アソシエイト支援ツール集 | *LOVE IS DESIGN*
2月1日から、購入に応じてポイントが溜まる Amazonポイントサービス が始まりましたね。ポイントサービスの開始を記念して、2月28日（水）まで最大10,000ポイントが当たるポイントプレゼントキャンペーンを実施しています。 そこで、Amazon の商品だってオシャレに見せたい！というわがままな願いを叶えてくれるツールをまとめてみました。 広告っぽいデザインが嫌いな人でもこれならブログに貼りたくなっちゃいませんか？ Amazon にもリンク作成は用意されていますが、支援ツールを使うと簡単にちょっと差のつくオシャレなデザインにすることができます。ブログのデザインやお好みに合わせてぜひ活用してみてください。 Amazonの画像をオシャレに見せたい人にオススメ！ Amazonリンクタグを簡単作成：Ama-Z Ama-Zは、短い URL の Amazon アソシエイト用タグリンクを作成したり、サ
MT & HTML Slidy でスライドを作る | WWW WATCH
プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用し... プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。 このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにし
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌
A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six (IEも動きます) Example seven (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
hail2u.net - Weblog - CSSで指定するフォント
CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。 Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
COULD：スクロールしたあとの見せ方