タグ

2016年7月29日のブックマーク (3件)

  • CSSのみで作るドロップダウンメニュー(シングル&多階層&メガ) | UNORTHODOX WORKBOOK | Blog

    jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ

    CSSのみで作るドロップダウンメニュー(シングル&多階層&メガ) | UNORTHODOX WORKBOOK | Blog
    heatman
    heatman 2016/07/29
  • 横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info

    HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;

    横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
    heatman
    heatman 2016/07/29
  • 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]|クロノドライブ

    新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 1.半角英数字のみを使用する。 「日語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 2.記号は「-」(ハイフン)、「_」(アンダースコア)のみ使用する。 「\」(エンマーク)、「/」(スラッシュ)、「:」(コロン)、「*」(アスタリスク)、「?」(クエスチョン)、「”」(ダブルクォーテーション)、「<」(左アングルかっこ)、「>」(右アングルかっこ)、「|」(パイプ

    新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]|クロノドライブ
    heatman
    heatman 2016/07/29