文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト
ブロックレベル要素 ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。 HTML4.01 Strictでは次の要素がこれにあたります。 p div table dl ul ol form address blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。 CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。 インライン要素 ブロックレベル要素に対し、文中の一部
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
float段組の基本
簡単なfloatの段組練習です。慣れて来たら、いろいろ応用してみて下さい。 注）floatを指定する場合はwidth指定で幅を指定するように心掛けましょう！ ボックスを並べる boxAとboxBを左右に並べます。形式上boxの幅と高さを指定しています。（本来の段組では、高さを指定する事はあまりありません。） パターン１ float:left;を指定してboxBを回り込ませます。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;height:100px;float:left; } パターン２ boxAにfloat:left;を指定、boxBにfloat:right;を指定。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;
Excel to HTMLが便利過ぎた！ブログで表（テーブル）を挿入するのなら一番簡単かも - 鈴木です。別館
本記事は移転しました。 約1秒後にリダイレクトします。 リダイレクトしない場合はここをクリックしてください。
パンくずリストの正しい使い方【サンプル有】
パンくずリストのメリットと正しい使い方を解説する。サンプルも用意した。 パンくずリストとは 下図のようにウェブページ内で自分が今どのページにいるのかを示すナビゲーションの事だ。 名前の由来は、童話「ヘンデルとグレーテル」の主人公が森で迷子にならないように、自分が通った道にパンくずを置いたエピソードに由来する。 設置するメリット ユーザビリティ 自分が、どこの階層のどこのページにいるのかを知る事ができる 自分が、どんな経由を辿って今いるページに辿り着いたのかを知る事ができる 自分が今いるページが、どのカテゴリーに分類されているのかを知る事ができる 階層構造・リンク構造・アンカーテキストのキーワードは、Googleアルゴリズムの200以上ある要素の中の3つだ。だから、パンくずリストを設置するとSEOの効果がある。 Googleは「検索エンジン最適化スターターガイド」で、パンくずリストの設置を推
バックページトップ (BPTリンク)
バックページトップとは ページを作成する際、見やすさを重視して横にスクロールをしないように横の幅を調整すると、どうしても縦長の画面になってしまいます。 このような縦に長い画面で構成されるページの本文を読んでいく場合、本文の一番下までスクロールした後、再度画面の最初のメニューが見える位置までスクロールをしながら戻るのは大変です。 一発で画面の最初に戻れるようにするには そこで一発で画面の最初に戻れるように考えられたのが、このBPT（バックページトップ）リンクです。 これを実現するのは意外と簡単です。 リンクのターゲット指定を用いて、画面の最初にリンクラベルを書き、本文の最後に「最初の画面に戻る」というようなリンクを付け足せば良いのです。 記入例 画面の最初に戻るには、ページの最初にラベルを付ける必要があります。 また、総合メニューが最上位にある場合には、メニュー付近にラベルを追加しても良いで
とほほのCookie入門 - とほほのWWW入門
Cookie とは、以下のようなことを実現するための機構です。 訪問者がそのページに何回訪れたか記録して表示する。 通常モード、フレームモードなど、訪問者の好みを記録しておき、次回訪問時にその好みのモードで表示する。 掲示板やチャットで入力したユーザー名を記録しておき、次回訪問時にユーザー名の入力を省略する。 ログインによるセッションを維持する。 下記の仕様書が公開されています。 RFC2109: https://tools.ietf.org/html/rfc2109 (1997年2月) RFC2965: https://tools.ietf.org/html/rfc2965 (2000年10月) RFC6265: https://tools.ietf.org/html/rfc6265 (2011年4月) 上記のようなデータは CGI などを用いてサーバー側に記録することもできますが、Co
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自身のIPアドレスやユーザエージェントを表示するページ : mwSoft blog
Components · Twitter Bootstrap