タグ

displayに関するshuuuuunyのブックマーク (6)

  • 「OS X Mavericks」で外部ディスプレイの解像度を調整する方法 | ゴリミー

    【img via Mac OS X installation by Janitors】 僕は昨年発売された「MacBook Pro (Retina Late 2013)」の13インチモデルを愛用している。多少カスタマイズしていて、CPUは2.8GHz Core i7、メモリ(RAM)は16GB、ストレージは256GBにしている。 Retinaディスプレイのピクセル数を活かし、最高解像度モードで利用しているのだが、それでも作業環境が狭いと感じる場合は外部ディスプレイを接続している。先日そのような状況になったのだが、どうもディスプレイの解像度に最適化しない。そもそもディスプレイの解像度が選択しとして表示されない。なぜ! 当初はディスプレイとの相性かと思っていたが、調べたところによるとこれは「OS X Mavericks」の仕様となっていて、外部ディスプレイの最適な解像度に変更することも簡単にで

    「OS X Mavericks」で外部ディスプレイの解像度を調整する方法 | ゴリミー
  • display: inline-block の隙間を詰める方法 | Soraxism

    今日会社の後輩くんから「display: inline-blockを使ってliを横並びにしてるんですけど、隙間ができてしまうんですが…」との質問。 彼は最近HTMLを学び始めたばかりなんですが、自分も昔これでmarginとかいじくり倒して悩んだことがあり、みんな同じ壁にぶち当たるもんなんだなぁとしみじみ…。 display: inline-blockでliを横並びに <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul> li { display: inline-block; /* IE 6/7 */ /display: inline; /zoom: 1; width: 100px; height: 100px; border: 1px solid #ccc; list-style: none; text-align: center; li

    display: inline-block の隙間を詰める方法 | Soraxism
  • CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア

    以前にtable-cellを使ってfloatを使わずに要素を横に並べる方法をご紹介しました。 この方法便利なんですが、marginを使って隙間を空けることができないんですよね。 というわけで、margin以外の方法で隙間を作る方法をご紹介します。

    CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア
  • 【CSS】floatを使わずtable-cellを使って横並びにする方法 - ディレイマニア

    目次 6回に渡る短期連載記事です。明日以降の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 ←今回はこれ 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像+テキスト+ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 table-cellを使って横並びにするメリット 要素を横並びにしたいとき、floatを使ったり、display: inline-bloc

    【CSS】floatを使わずtable-cellを使って横並びにする方法 - ディレイマニア
  • スタイルシートをめぐる冒険: inline-blockの奇妙な世界

    inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;

  • spanタグの幅を指定してすることはできますか? - ----------<divstyle="margin-left:20px;... - Yahoo!知恵袋

    ・・・・・当たり前のことです・・・・。 HTMLでのspanはインライン要素です・・・・・・。 CSSでspan要素に適用されるdisplayプロパティは、初期値inlineです。 CSSでインラインボックスには、 幅と高さの概念はありません。 W3Cで明確に定義されております。 インラインボックスには、 行内ボックスがあり、ここには内容域+パディング+ボーダーが適用されます(背景が適用される部分。) しかし、幅と高さの概念はありません。ブロックボックスのパディングとボーダーと違い、高さにならない。 そのため隣の行に割り込むように表示される。 その外にある、インラインボックスには、左右マージン、line-heightが適用されてます。 インラインボックスには幅と高さの概念はないですが、インライン要素はブロック要素で囲まれていると思うので、そのブロックボックスのline-heightがインラ

    spanタグの幅を指定してすることはできますか? - ----------<divstyle="margin-left:20px;... - Yahoo!知恵袋
  • 1