タグ

cssに関するtechnote7のブックマーク (7)

  • css-lecture.com

  • コーディングのスピードを上げる為の6つの方法

    2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の

    コーディングのスピードを上げる為の6つの方法
    technote7
    technote7 2010/11/02
    超めも。手書きのレイアウト表示が自分のかってくらい似ていてビビったw
  • 風のように生きる: IE6のバグ:画像の下に隙間ができる

    technote7
    technote7 2010/09/10
    また無駄な時間を使ってしまった
  • 無駄なdiv要素やclassだらけのマークアップから卒業する方法

    グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク:960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ

  • cssの情報・まとめ

    cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日語版RoundedCornr / 角丸のHTMLCSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of

    cssの情報・まとめ
  • a:hoverで背景を設定したらIEでバグが発生したのでメモ

    久々に、なんだこれ!?っていうバグにぶちあったった。 グローバルナビゲーションに:hoverを設定したところ、 なぜかその下に設定していたイメージも動いた・・・ しかもIEだけ・・・なぜなんだ!? ってことで自分の解決策のメモ代わりに書いておく。 バグが発生したときのソース ◎ HTML <!-- ●wrap --> <div id="wrap"> <!-- ●header --> <div id="header"> <h1>ろご</h1> <p>せつめいぶぶん</p> <ul> <li><a href="#">ほーむ</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li class="last-

    a:hoverで背景を設定したらIEでバグが発生したのでメモ
  • メガドロップダウンメニューをjQueryとCSSで作る:via Mega Drop Down Menus w/ CSS & jQuery

    twitter facebook hatena google pocket サイトが巨大化するにつれ、多くの情報を一度に見せられる方法が運営者に求められています。 それを解決する一つの手段がメガドロップダウンメニューです。 一見、ユーザビリティ上好ましく見えないかもしれませんが、ユーザビリティの第一人者「Jakob Nielsen」はAlertbox: メガドロップダウン式のナビゲーションメニューは効果あり(2009年03月23日)と述べています。 今回はjQueryを利用して、メガドロップダウンメニューを作成してみたいと思います。 via:Mega Drop Down Menus w/ CSS & jQuery sponsors 使用方法 ※長いので、先にサンプルを見る まず以下のようなメニューが記述されているとします。 <ul id="topnav"> <li><a href="#"

  • 1