枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
FBMLアプリではインラインCSSに「-webkit-border-radius」を記述しても無視される
先日、フェイスブックに「aquapple」のファンページを開設しましたが、そのときに一緒に勉強することになった言語に「FBML」があります。FBMLはHTMLをFacebookが独自に拡張した言語で、一般にも公開されておりFacebookのサイト外で使うことも可能です。 例えば、上記のファンページへのリンクボックスはFBMLで記述されており、そのコードは次のようになっています。 <fb:like-box href="http://www.facebook.com/aquapple.fb" width="292" show_faces="true" stream="false" header="true"></fb:like-box>もちろん、FBMLはHTMLタグの多くが使用でき、上記のような特殊なタグを覚えなくとも十分デザインを行うことが可能です。 で、本題。フェイスブックのファンページ
第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回：引用（blockquote）を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 １）左上に「“」を表示させる まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleが検索結果ページの余白を広めに調整、ヘッダー周りを元に戻すuserContent.cssを公開します | aquapple (archives)