タグ

ブックマーク / weboook.blog22.fc2.com (5)

  • CSSで作ったドロップダウンメニューのドロップの動きいろいろ

    CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu

    CSSで作ったドロップダウンメニューのドロップの動きいろいろ
    kenzy_n
    kenzy_n 2015/02/13
  • アイコン型WebフォントをCSSでデザインしたボタン10個

    アイコン型WebフォントCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので1つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i

    アイコン型WebフォントをCSSでデザインしたボタン10個
  • CSSだけで作る「多階層」なドロップダウンメニュー

    以前書いた「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>

    CSSだけで作る「多階層」なドロップダウンメニュー
  • CSS3で追加されたセレクタ「:not()」について考えてみました

    CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい|Webpark 保存版!CSS3セレクタの説明書|Webpark では、「:not()」について考えてみます。これから紹介する簡単なサンプルたちはWindows7Chromeで動作確認しています。他のブラウザの場合うまく対応していない場合も考えられますのでご注意ください。 「:not()」の基 Selectors Level 3では、「E:not(s)」という風に説明されています。日語で説明すると、「sでないセレクタを持つE要素」という感じになります。 また、「Negation pseudo-class」というグループ

    CSS3で追加されたセレクタ「:not()」について考えてみました
    kenzy_n
    kenzy_n 2013/09/25
    どうでもいいことだが、横にしてみるとかわいい小人さん風に見える。
  • 私がよく使っているWebサイト作成に役立つブックマークレット

    ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。 XRAY クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。 ColrGrabr そのサイトにどのような色が使われている

    私がよく使っているWebサイト作成に役立つブックマークレット
  • 1