第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
スタイルシートでおしゃれな横メニュー
CSSを使ったおしゃれな横メニューを紹介しているサイトを見つけたので紹介します。サンプルも提供されているので設置も簡単かと思います。 このような横メニューがたくさん紹介されています。一応ソースも載せておきます。まずはbody部分です。表示しているページにはclass="current"を入れておきましょう。 <div class="blue"> <div id="slatenav"> <ul> <li><a href="/" title="レッツFC2ブログ" class="current">Home</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-entry-56.html" title="ごあいさつ">ごあいさつ</a></li> <li><a href="http://weboook.blog22.fc2.com/ar
視覚的、はてなダイアリー文書構造サンプルHTML
[section] ■ [sectioncategory] 手入れしました15:37[h3要素] 長らく放置しておりましたが、色々変更点／足りない点があったりしたので、修正いたしました。アンカーは全て、CSS Tips for はてなダイアリーの該当箇所へのリンクとなっておりますので、「ここはどうなってるかよく解らない」と思っている部分のアンカーをクリックすると良い感じになると思いますが、解説は大して良い感じでもないので、その点はすみません*1。 また、一目で見た時の構造を第一に考えているので、配色とかセンスとか突っ込まれても泣き寝入りするばかりです。放って置いてください。ぷん。このカタチならアンチポップのスタイルをパクるべきだったなともチョト思いました。 [section] ■ [sectioncategory] もういっちょ16:00[h3要素] はてなダイアリーではエチィな背景画像を
CSSでおしゃれなグラデーションロゴを作成
CSSだけで作るおしゃれなグラデーションロゴを作成方法を紹介します。画像ではないので文字は自由に変更できます。グラデーションは2種類あるのでお好きな方をご利用ください。 フォントサイズやフォントカラーはCSSで自由に変更できます。ただ背景は白のみだと思います。CSSで指定している赤字の画像はこちらのサンプルより入手してください。 <STYLE type="text/css"> <!-- h1 { font-size:36px; line-height:1em; color:#8bb544; font-weight:bold; text-transform:uppercase; position:relative; } h2 { font-size:34px; color:#336699; font-weight:bold; letter-spacing:-.05em; position:r
画像の使用を極力控えてかっこいいCSSデザインをやってみよう
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
ボックスモデルハック - lucky bag
今更ですが、ボックスモデルハックって何？って言うCSS初心者の方へ。（偉そうですが、僕も全然です；） voice-familyハックを利用したBox Model HackをCSS Dencitieにて翻訳されていますので、ご覧になってみてはいかがでしょうか。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。ここでは、簡単に説明してみます。 例えば、ここに以下の様なブロックがあるとします。 div { width: 500px; padding: 10px; border: 5px; } OperaやIE6・NN6以上などのモダンブラウザであれば、ちゃんと500pxの幅で表示されるはずなのですが、CSS1を間違った解釈で表示するブラウザ（IE5.x）の場合、width500pxからpaddingとborderを引いた470pxと表示してしまいます。（
ブログテンプレート作成ツールで簡単ブログデザイン！ - CSSEZ
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
今回のmixiのリニューアルについて - 専門家に聞く [All About プロファイル]
Web制作・クリエイティブ どこがどう良くなったんでしょうか？ 一見のパッと見た目は印象が良くなったかもしれませんが、長時間使い続けるユーザーからすると、見づらく疲れるデザインで、メリハリがないため、エリア視認性がとても悪く、情報把握が非常にしづらいのですが。 専門的にどうなのか詳しく解説していただきたいです。 質問者│サリエル・東京都・男性・35歳 はじめまして クロスウェーブの鈴木です 最初に画面が公開された時は期待したのですが、確かに見づらいものがありますよね。 CSSでのコーディングが中心になり、今後の機能追加でのデザイン追加等が容易になるなどのメリットが運営者側にはあったと思いますが、これではユーザー側のメリットがわかりづらいものがありますよね。 今後の修正に期待していますが・・・ 私の環境でも崩れる場面があり使いづらいです。 評価ありがとうございます 「CS
コミュニティ（1） コミュニティに参加する｜FC2ブログ公式マニュアル
ブログコミュニティは、FC2ブロガー同士で繋がる機能です。 ブログの管理ページを介して、他のユーザと交流ができます。 趣味や話題を共有するFC2ブログの仲間で集まり、トピックを立てて相談しあったり、意見交換をしましょう。 公開コミュニティは誰でも見ることができますが、トピック作成やコメントは、ログインしているFC2ブログユーザに限られます。 ブログへのリンクや、ハンドルネームなどは、ログイン中のブログで設定している情報をそのまま引き継ぐので、ブログのエントリを通して知り合ったユーザとグループを作ることもできます。 コミュニティの中に、それぞれテーマとなるトピックを立てて、そこに参加者がコメントを付け足していきす。 誰でも新しいコミュニティを開設して、管理人になれます。 参加するコミュニティを探そう↓ コミュニティ概要↓ コミュニティに参加しよう！↓ トピックとコメント↓ 参加するコミュニテ
KDDI au: EZfactory
※お知らせ※ •2018年3月31日をもって、auの3Gケータイ向けの以下のサービスが終了となりました。 ・EZアプリ(B)の配信(ダウンロード・バージョンアップ) ・au世界サービス（旧：グローバルパスポート ※技術資料の中では「国際ローミング」と称しています） それに伴い、関連する技術情報を修正いたしました。 ・「公式コンテンツで提供するサービス」メニューおよびその配下の技術情報提供の終了 ・技術情報資料『【EZweb 全般】EZweb コンテンツ制作ガイド』の修正 •「WEBページ」メニュー配下にある「SHA-2対応ケータイアップデートについて」の項目を 「【EZweb全般】EZブラウザ搭載機のSHA-2対応について」に改称し、本文中の関連する記述も修正しました。
携帯電話対応 HTML 文書の作成 Ver.2
初稿：2003年12月31日 改訂：2006年1月6日 概説 趣味で Web サイトを作成する場合、携帯電話対応 HTML 文書の作成におけるポイントは次の3項目に集約されます。 マークアップ言語には XHTML Basic を用いること 実装状況によらず、論理構造のマークアップに手を抜かないこと CSS などの見た目を制御する技術は頭から追い出すこと チープな端末向けの専用コンテンツが必要になる理由 大きな図書館には、弱視者向けの大活字本が用意されています。この大活字本、文字が大きいのだから誰にとっても読みやすい? それが大違い。健常者が読もうとすると、たいへんな苦痛を覚えます。1画面に表示される情報量が少ないと、長大な文書を読むのは苦痛になるのです。往年の角川ミニ文庫が、中編小説の発行媒体として成功せず、エッセイ集などの短い文章を集めた本しか売れなかった理由も、ここにあります。 最近、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
｜FC2ブログ公式マニュアル
CSS Reference
HTMLクイックリファレンス