1文字だけの改行の拒否
日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
ShiroKuro Social Icons v1.5
このWebサイトのフッターで使用しているアイコン画像(PNG)の高解像度とPSDのセットをZIPにまとめました。白と黒それぞれ256pxのPSDと256/128/64/32pxのPNGが入っています。正方形に切り出してファイル名をちゃんと付けるのが面倒だったので縦長のスプライト画像です。 Download: ShiroKuro Social Icons v1.5 含まれるアイコンは、 フィード メール Webサイト Twitter はてなグループ GitHub Flickr Last.fm Delicious はてなブックマーク Facebook Wufoo Amazon Pinterest 以上の14種類です。増える予定はありません。 諸事情によりパブリック・ドメインやCreative Commonsにはできそうもなかったので、簡単な使用条件だけを同梱しておきました。リサイズとは言えない
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
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 スタイルシート 非
rev="canonical"
海の向こうで一気に議論が過熱したrev="canonical"ネタ。ざっくりまとめると、TwitterやSMS等の文字数制限のあるメディアで長いURLを投稿するためによく使われてるURL短縮サービスはアレだよね……というところから始まって、じゃぁ個々が自前で短いURLを用意してやって機械的に辿れる仕組み、rev="canonical"を使おうぜ！ という感じ。 URL短縮サービスの提供する短いURLは、on url shortenersで触れられているようにいくつもの問題点がある。一番身近なのはスパムの温床になっていること。インバウンドリンクの追跡が不可能であることなんかも気になる人が多いかもしれない。この話題が再燃した一番大きな原因はDiggBarの登場で、そこらへんの細かいところは短縮URLは必要悪か、単なる悪か。に詳しい。 「短縮URLは必要悪か、単なる悪か。」の最後で触れられている
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
