“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
二本線からバツ印へ
Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、高さを6%とした。サイズと位置は全て%で統一したので、コンテナーの幅と高さを指定すれば以下のCSSは変えることなくスケールする。 .sandwich::before, .sandwich::after { box-sizing: border-box; display: block; position: absolute; left: 25%; width: 50%; height: 6%; content
反論
好きなものや気に入っているものについて否定された時に、そうじゃないだろと反論したい気になるのはわかる。しかし、往々にして反論のための論理で食ってかかることが多く、それでは溝を広げる結果にしかならない。溝を埋めることは難しいが、食ってかかってわざわざ溝を広げる必要もない。 反論のための論理で展開される記事でありがちなのは、否定された点についてすべて反論するような形のものだ。対象のトピックについて気に入ってはいてもパーフェクトであることはまずないので、それらのいくつかは自分が今までまったく気にしていなかった点や我慢していた点が必ず含まれるはずだ。そういった点に対しても反論しようとすると、反論のポイントがずれやすい。 そういった反論は埋めたい溝とは見当違いのところを埋めようとする作業に他ならない。そのため溝を埋めるどころか、周辺の味方に迷惑をかけることになる。 そのような記事は、最終的に反論する
CSS的・ウェブ標準的
Vertical align anything with just 3 lines of CSSと横に水平線のあるテキストというCSSテクニックを扱った記事を最近読んだ。どちらも有益なテクニックだが、前者はCSS的で後者はウェブ標準的という印象を持った。 最初に軽く前者のテクニックについて書いておく。後者は日本語の記事なので読めばわかる。 .element { position: relative; top: 50%; transform: translateY(-50%); } Vertical align~はこのようにtransformプロパティーでtranslate()を利用して、縦方向のセンタリングを実現するテクニック。topプロパティーが親要素の高さが基準になるのに対して、transformプロパティーのtranslate()では要素の高さが基準になることを上手く利用している。
::first-letterをぶら上げる
ぶら上げるってなんだ。段落の一文字目だけを左に飛び出して配置するというテキスト・レイアウトの話。margin-leftプロパティーで負の値を使っても良いのだけど、文字によって要調整なので面倒くさい。position: absoluteを使う場合は、親でposition: relativeが必須になるのでこれもちょっとアレ。他にもいくつかあったと思うけど、floatとmargin-right: 100%を組み合わせて行うのが一番位置合わせが簡単になる。 Demo: Hanging :first-letter 英文ではメジャーなドロップキャップをアウトデントするもの。たまに見る気がするけど気のせいな気もする程度のタイポグラフィー知識……。 .test::first-letter { margin-right: 100%; margin-bottom: -999em; float: right;
Facebookページの管理ができなくなった
先週末あたりから自分の所持しているFacebookページ(例えばhail2u.net)の管理ができなくなった。同じタイミングで同様の不具合に遭遇している人をそこそこフォーラムでは見かける。今のところKnown Issuesでは取り上げられていない。一部の人は稀に管理UIにアクセスできたりとか挙動不審らしい。 Facebookページ自体はちゃんと存在していて、そのページを見ることもできるんだけど、自分が管理者として認識されないという感じ。プロファイルのページに出てくるFacebookページへのリンクはWebサイトへのリンクになってしまっている。管理しているFacebookページの一覧やInsightsとかは一応見れるので、Facebookページとアカウントの関連付けが完全に切れたとかそういうことはなさそう。 むしゃくしゃしたのでこのWebサイトからいいねボタン消してやった。 追記 エントリ書
Google Web Fontsにある等幅フォント - Hail2u
2011-11-21現在、Google Web Fontsで提供されているWebフォントには等幅フォントが8つあります。目で探したので漏れはあるかも。良いのがあったらここで使おうかと思って探したんですが、まぁ使うことはなさそうですね。 Demo: Monospace Fonts from Google Web Fonts Anonymous Pro Cousine Droid Sans Mono Inconsolata Lekton Nova Mono Ubuntu Mono VT323 使用に耐えるのはかろうじてInconsolataくらいでしょうか。Lektonはコロンビアで絶大な人気を誇るらしいですが……。 WindowsのChromeでは以下のように非常に……なんていうか……その……。 まぁこんなものですよね！
CSS LintのVim compilerスクリプトを書いた
CSSのコードの最適化を指南してくれるCSS Lintを使い始めたので、ちょろっとVimのcompilerスクリプトを書いておきました。CSS Lintは「セレクタでIDを使うのはやめましょう」とか怒られるナイスなツールです。ですよねー。 Download: csslint.vim ~/.vim/compiler/以下にコピーして、.vimrcで autocmd FileType css compiler csslint とするだけです。これでCSSファイルを開いている時に:makeすればエラーや警告がある時にQuickFixリストに登録されます。 WindowsへのCSS Lintのインストールは結構なイバラの道でした。まぁCSS Lintそのものではなく、npmのインストールがアレな感じ。僕の環境にWindowsネイティブの様々なコマンドラインツールとMSYSがまぜこぜになっているのが
16pxは大きすぎますか？
35はアラフォーらしいのでアラフォーです。10年前にはまったく苦ではなかった11px程のサイズはもうアレですね。そんなこんなで「もう16px以下はダメじゃないの？」というSmashing Magazineの記事は興味深く読ませてもらいました。12pxにtext-shadowプロパティとか殺す気か！ みたいな。 印刷物との比較あたりでは横に並べて比較して「同じ！」とか言ってますけど、ディスプレイと印刷物では目からの距離が大きく違うと思うのでさすがに暴論気味な気がします。また「サイトの製作依頼者の金を無駄遣いしてるよ！」みたいなお金の話からスタートする所がもにょもにょ。 こういったアクセシビリティ的な観点に加えて、世の潮流としてタッチデバイス向けに様々なパーツが巨大化していることもありますし、今後は16px前後が主流になっていくことは間違いなさそうです。日本語においてはline-heightに
rel="canonical"はhead要素の先頭に置いてね
Googleでのrel="canonical"の扱いについての中の人の話。rel="canonical"が適切ではないURLを指していた場合に、Googleとしては無視したいし、多くの場合無視するので、万全を期すのなら(「If you really want to be safe」)head要素の先頭に書けと言っている。わかるけどHTMLの書き方が検索エンジンの意向に左右される世の中は嫌だなぁ……。 こういったネガティブなURL評価だけでなく、rel="canonical"のhref属性の値がスラッシュで始まる相対URLで書いてあれば信用してくれるとか、そういうポジティブなURL評価も欲しいですね。要は違うドメインを指しているrel="canonical"の評価を下げてくれれば、場合によっては無視してくれれば、良いんじゃないかとかそんな感じです。まぁユーザーのページがサブドメインで切られて
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
リデザイン @ 2011-02-07
へるべちかにゅ～！ CSSが20KBオーバーと肥大化してきたのでダイエットしようと思ったらいつの間にか全部書き換えていた。でも頑張っても13KBにしかならなかった。 以下、覚書。 Reset CSSの変更 リクエストの削減のためにYUIのCSS ResetとCSS Fontsを使うのをやめ、CSSファイルにEric MeyerのReset CSSを参考にしたものをベタに書くことにした。Reset部分はパブリック・ドメイン。欲しかったらCSSのソースからコピペでどうぞ。meyerwebのReset CSSとの違いは、 address, caption, cite, code, dfn, em, strong, th, var { font-style: inherit; font-weight: inherit; } h1, h2, h3, h4, h5, h6 { font-size: 1
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
使用しているプラグイン
43 Foldersの中の人がWordpressで使用しているプラグインをdel.icio.usでwordpress+pluginsiuseというタグを付けることによってまとめていた。簡単なコメントも付けられるし、URLの変更なんかの修正も簡単でメンテしやすそう。ということで真似して、このblosxomで使っているプラグインをまとめてみた。 他に同じことをやってくれる人が多数いると仮定すると、tag/blosxom+pluginsiuseを見れば、 どんなプラグインが人気かわかる コメントを見ればプラグインの逆引き的に使える 新しいプラグインが追いかけやすい 未知との遭遇 とか便利そう。blosxomはユーザーの絶対数が少ないので、そううまくはいかないと思うけど。 また、JSONPで引っ張ってこれるので、サイドバーに使用しているプラグインの一覧を載せるとかもやりやすい。blosxomのプラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
