タグ

2010年4月26日のブックマーク (9件)

  • 無駄な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のフレームワ

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • ツイナビ | ツイッター(Twitter)ガイド

    ツイナビはX(旧Twitter)で話題のポスト(ツイート)まとめや、ポスト(ツイート)検索が楽しめるサイトです。注目のニュースや画像、使い方や人気アカウントなどを総合的に紹介。X(旧Twitter) ユーザーなら毎日チェック!

    ツイナビ | ツイッター(Twitter)ガイド
  • 渡辺友太のWebな日常 » 5.#ハッシュタグ-Twitterガイド

    これまでのTwitterガイド 1.Twitterとは? 2.フォローする 3.リプライする 4.Twitterクライアント twhirl ツイール編 TweetDeck ツイートデック編 今回は、5.#ハッシュタグです。 前回までで、つぶやく、フォローする、リプライするをマスターした上で、便利なTwitterクライアントを 使用することによって、よりTwitterを使いやすく、楽しく利用することが出来るようになりました。 今までの説明の中で、何度か後ほど説明しますとしてきた#ハッシュタグとRTリツイート。 今回はそのうちの#ハッシュタグについて解説します。 5.#ハッシュタグ #ハッシュタグは、つぶやきに付加することによって、そのつぶやきが何の話題に関するものなのか、 何のイベントに対するつぶやきなのかなどを指定するのに使います。 ブログに記事やソーシャルブックマークに付けて

  • 時間管理の仕方でも変わる?あなたの「集中力」をアップさせる方法 - はてなニュース

    仕事や勉強など、やらなければいけない作業がある時に限って、他のことに気がいってしまうことはありませんか?今回は今すぐ使えるものから時間管理のコツまで、「集中力をアップさせる方法」についてのエントリーをご紹介します。 ■気が散らない工夫をしよう 気が散って作業が進まないと、イライラして余計に気が散ってしまいますよね。まずは気が散らないための工夫をしてみましょう。 ▽気が散る自分とつきあう9つの方法 : ライフハッカー[日版] こちらのエントリーでは、気が散る自分と付き合う方法として次の9つを紹介しています。 1.気が散ってしまう自分を受け入れる。 2.途中で気が散ることを想定する。 3.他の人に託すか、後にするか考える。 4.短めにタイマーをかける。 5.寄り道の原因になりそうなものを分散する。 6.刺激になるものを排除する。 7.分散して発信する。 8.周囲に協力を求める。 9.寄り道し

    時間管理の仕方でも変わる?あなたの「集中力」をアップさせる方法 - はてなニュース
  • [CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス

    CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装:HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>

  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集
  • [JS]jQueryのプラグイン33+1選 -2010年3・4月

    紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま

  • webデザイナが使いそうな48px四方の究極のアイコン750個を無料でダウンロード

    思わず音速でクリップしてしまった究極系エントリー。 配布している方が究極だというのだから、きっと究極なんです。 webデザイナーが使いそうなアイコンパック ダウンロードは以下から。 どんなのが入ってるの? ちょいと量が量なので小さく表示してますが、サイズは48×48pxです。 興味のある方は是非。 The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources) - Smashing Magazine こちらとあわせてどうぞ。 ハイクオリティ無料アイコンまとめ100パック2009年最新版*ホームページを作る人のネタ帳 それでは、また。

    webデザイナが使いそうな48px四方の究極のアイコン750個を無料でダウンロード