普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
word-break: break-all
英単語の間であっても自動改行されるように、word-breakプロパティーでbreak-allを採用しているウェブサイトが地味に増えているような印象だ。コスメティックな理由で見出しやサムネイルの付記などに使うのは悪くない妥協だと思うが、本文にもわりと気軽に使われていてかなり気になる。 日本語では特に単語の切れ目という論理的な箇所は存在せず、ブラウザーではどこでも自動改行される。せいぜい句読点が行頭にならないように制御されるくらいだ。word-breakプロパティーではこの自動改行における単語の禁則処理を制御できる。値としてbreak-allを指定すると禁則処理が解除され、現在のブラウザーの実装では以下のような事象が起こる。 英単語の間で改行される 行頭でも記号が許可される 前者がわかりやすく、これを目的としていることが多い。こうすることによってタイポグラフィーでいうところのflush le
リンクの下線の再発明
少し前までは「リンクの下線を消すな、いやでも消したい」みたいなことしか話題にならなかったのに時代は変わったなどということをMediumのためのリンクの下線の再発明といった趣向の記事を読んで思った。僕も以前これと似たような方法(後述)でリンクの下線の再実装を行ったことがあるので、楽しく読んだ。この辺りの制御を行うCSSプロパティー達の実装が後回しにされてる現状は悲しい。 僕はborderで線を引いた擬似要素を絶対配置するというような手法で行っていた。 .entry-content a { position: relative; color: inherit; text-decoration: none; } .entry-content a::after { border-bottom: 1px solid #f0f; display: block; position: absolute;
Sassの変数命名規則とBEM
$type-subtype-component-contextというような形でSassの変数を命名していたけど、これにもBEMを使うかという感じになってきた。ただでさえ長いのが、セパレーターで更に長くなるけど、元々そんなに短くないので気にしないことにした。BEMをクラス名で使うような形で単純に利用するケースと、3.3で導入される予定のマップを使って構造化して定義し、複雑に参照するケースを比較して検証している。 検索ボックスに使う、以下の8つの色の変数定義を例にする。 検索フォーム 背景色 入力フォーム 文字色 背景色 枠線色 フォーカス 枠線色 ボタン 文字色 背景色 オンマウス 枠線色 BEMを使った簡単な実装 $color-bg_searchbox: #f9f9f9; $color-fg_searchbox__input: black; $color-bg_searchbox__inp
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
text-overflow: ellipsisとリンク
text-overflow: ellipsisプロパティを使った三点リーダーによる省略は、テキストを格納するコンテナー要素に対して指定することが多い。例えばp要素であったりli要素であったり。ただしその内容がすべてa要素のようなケースの場合、Chrome 29とInternet Explorer 10では三点リーダーがクリックできなくなるので、a要素をinline-blockにしてそこでtext-overflowプロパティを使った方が良い使うとクリックできるようになるけどアレ(追記あり)。 Demo: text-overflow: ellipsis and Link Firefox 23ではいずれのケースでも三点リーダーの部分もリンクになる。対してChrome 29とInternet Explorer 10ではp要素に仕込んだ前者はリンクにならず、a要素に仕込んだ後者ではリンクになる。現在
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
