タグ

css3に関するmega-ne0221のブックマーク (4)

  • Bootstrap - Wikipedia

    BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。 GitHubで四番目に人気があり[2]、アメリカ航空宇宙局やMSNBCなどに採用されている[3][4]。 HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。 Ver2.0以降では

    Bootstrap - Wikipedia
  • Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

    ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

    Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
  • CSSで要素を横並びにする方法まとめ | HALAWATA.NET

    CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;

  • 【CSS3】HSL色空間による色指定のすゝめ

    CSS3では、上記の色指定の方法に加えて、HSL色空間による色指定を行うことが可能になりました。 HSL色空間とは、色相(Hue)、彩度(Saturation)、明度(lightness)の3つの成分からなる色空間のことで、色相を0〜360度の範囲(赤を0度に置き、時計回りに赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の順に変化)で、彩度を純色から灰色の範囲で、明度を白から黒の範囲で(中間が純色)表すものです。 色相のイメージ 色相、彩度、明度の関係 色相の角度による色の把握がわかりやすく、また、色の鮮やかさや明るさを数値で指定することで増減することができるため、rgbを用いた色指定の方法よりも、直感的に色の指定が行える方法になっています。 CSS3でHSLによる色指定を行うには、hsl関数(透明度を指定する際には、hsla)を用いて指定します。 引数は、色相(0〜360までの数値)、彩

    【CSS3】HSL色空間による色指定のすゝめ
  • 1