タグ

ブックマーク / blog.asial.co.jp (3)

  • CSSだけで作るアイコン付きボタンの作り方

    こんにちは、鴨田です。 近頃はボタンのデザインに限らず、CSSで実現できるものは、 グラフィックにせず、CSSだけで書いています。 ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、 最近はあまりPhotoshopを開くこともなくなってきています。 ということで、日はCSSだけで作るアイコン付きボタンの作り方です。 アイコン付きというのがポイントです。 ● アイコンなしボタン とりあえず、アイコンなしで作りましょう。 HTML body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; margin: 0; padding: 0; } a { /* サイズ指定 */ width

    CSSだけで作るアイコン付きボタンの作り方
  • CSSだけで簡単に吹き出しを作成する方法4つ!

    こんにちは、橋です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し(ボーダー付き) ぽわわーんとした吹き出し 丸い(曲線の)吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp

    CSSだけで簡単に吹き出しを作成する方法4つ!
    zetfs
    zetfs 2013/03/06
  • 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

    という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ~ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま

    3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
  • 1