“Responsive Line Breaks,” an article by Dan Mall
You’re on an old version of this site. Please visit danmall.me for the latest. Responsive Line Breaks I create a lot of mobile-first, responsive designs. It’s the way SuperFriendly builds websites, as many suggest (unless, of course, there’s a good reason not to do so). Perhaps because responsive design is still relatively new or perhaps because of my history and affinity towards fixed-width pixel
mf2md
本気のメモです。メモなのでタイトルをわかりづらくしておきました。SEO対策ですね。 hAtom From: <article class="hentry"> <h2 class="entry-title"> <a rel="bookmark" href="/blog/webdesign/document-structure.html"> 文書構造を見なおした(ている) </a> </h2> <footer> <p> Posted on <time datetime="2011-11-09T19:31:06+09:00" pubdate class="published"> 09 Nov, 2011 </time> in <a rel="tag" href="/blog/webdesign/"> Web Design </a> </p> </footer> <div class="entry
HTML5の新要素「data要素」に繋がる Microdataのプロパティについて - kojika17
time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。 またHTML5 の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、 Microdataで利用できるプロパティを紹介致します。 Microdata とは HTML5の独立した仕様です。 HTML文章に、コンピュータが可読できるデータにすることができ、RDFやJSONなどの多数の他のデータ形式と互換性を持たせることができます。 記述方法は以前の記事を参照して下さい。 MicroformatsとMicrodataの違いについて : Web Design KOJIKA17 なぜコンピュータが可読できるデータにする必要があるのか？？ HTMLでは、人や時間、場所など細かくマークアップすることができません。 例として、機械翻訳したカンナダ語を見てみまし
Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute | HTML5 Doctor
NOTE: (6/11/2013) The definitions of cite and blockquote in HTML have changed. For the latest advice on using these elements refer to cite and blockquote – reloaded Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elements <blockquote> and <q>, with their optional cite attribute. In addition, there’s the <cite> element, which over the last
Meta Descriptionで正しく遊ぶ方法について調査してみた。
Meta Descriptionで正しく遊ぶ方法について調査してみた。 2011-09-25 SEO Japanさんの記事を見ていた時に、Meta Descriptionをアスキーアートで表示しているサイトがあり、 ちょっと気になったので、GoogleのMeta Descriptionの出方について調べてみました。 Meta Descriptionの調査 複数のテストページを作成し、Googleさんにインデックスさせてみました。 Meta Descriptionのテストページのリストを見る 英数、記号の200文字 <meta name="description" content="abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ ! '§ $%& /() =? * '__ |; ²³~ @`´ ©«» ¤
Convert a Menu to a Dropdown for Small Screens | CSS-Tricks
The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick
hAtomに対応した
フィードの将来を模索してるとやはりhAtomは避けて通れないかなーという感じなので、今更ながら対応した。blosxomのビルトイン変数とフレーバーで実現できるのでそんなに面倒でもない。 <div class="hentry" id="$fn"> <h3 class="entry-title"><a rel="bookmark" href="$url$path/$fn.$default_flavour">$title</a></h3> <div class="entry-content">$body</div> <p> Posted on <abbr class="published" title="$yr-$mo_num-$da6$ti:00+09:00">$da $mo, $yr</abbr> in <a rel="tag" href="$url$path/">$path</a>
[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実
CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。 Fade Image Into Another (within a Sprite) デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 最初の方法：妥当 二番目の方法：理想 三番目の方法：現実 デモでは、上から順番に実装されています。 最初の方法：妥当 HTML 元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。 <a href="#" class="arrow">Arrow<span></span></a> 矢印画像はテキストを画像に置換して配置します。 .arrow { display:
こらない - prevとnextと「前へ」「次へ」とAutoPagerizeとMicroformats
自分のサイトを、AutoPagerizeに対応させるにあたって、の話。 AutoPagerizeが何なのか、については、日を改めて。 AutoPagerizeに対応させるには、「次へ」のリンクのアンカータグに「rel="next"」を設定しておけばいい。 それ自体は簡単。 しかし。 ブログで、「次へ」「前へ」って言われても、どっちがどっちだかよく分かんない。 例えば、こらないのトップページを上から順に見ていくと、下へ行くほど古い記事になっていく。 で、下まで辿り着いて、もっと読みたいと思ったら、「次へ」をクリックする。 すると、さっき読んだ一番古い記事より、もうひとつ古い記事が表示される。 これはこれでいいと思う。 直感的だよねえ？ で、その「もうひとつ古い記事」のページ下部に、「次へ」ってあったら、「ああ、さらに古い方へ遡るんだな」と思いそう。 その場合、「前へ」ってあったら、「さっき読
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 5 Outliner