CSS3で背景領域の幅のパーセンテージで背景画像のサイズを設定する

CSS3では、背景領域の幅や高さのパーセンテージをbackground-size属性を使って指定できます。

background-size: 幅％ 高さ%;

例：
幅80%、高さ90%の場合：

#main {
  background-image: url(./images/image01.jpg");
  background-size: 80% 90%;
}

タグ：CSS3 HTML5 background-size

デバイスの画面サイズや向きに応じてCSSの設定を変える方法

CSSファイルで@media( ) { }を使用して、デバイスの画面サイズや向きに応じて設定値を切り替えて指定することができます。

例えば、スマートフォンとタブレットとで画面レイアウトを切り替えたい場合は、以下のように指定します。

#navigation { /* スマートフォン向け */
  display: none;
}

@media (min-width 480px) { /* タブレット向け */
  #navigation {
    display: block;
  }
}

スマートフォンとタブレットの切り替えを画面の幅480pxで行う感じです。
（min-width: 480pxは、最低でも480pxまでの幅の場合を意味します。）

デバイスの向きは、orientationを指定します。

@media (orientation: portrait) {
...
}

@media (orientation landscape) {
...
}

この手法は、Media Queryと呼ばれます。

タグ：CSS Media Query @media

CSSでfloatで横並びにさせたulのリスト全体をセンターリングさせるには

ulタグを持つコンテナをid="navigation"とすると、
以下のようにCSSを設定します。

#navigation {
  position: relative;
  overflow: hidden;
}
            
#navigation ul {
  position: relative;
  float: left;
  left: 50%;
  list-style-type: none;
}
            
#navigation ul li {
  position: relative;
  float: left;
  left: -50%;
  text-align: center;
}

タグ：CSS UL 横並び センターリング float属性

Webフォントを使う

CSS3では、Webフォントが指定できます。
実際Webフォントが使えるのはブラウザの対応状況によりますが、
最新のメジャーのブラウザならほとんど対応しているようです。

CSSには、以下のように@font-faceを指定します。

@font-face {
  font-family: "WebFont";
  src: url("http://xxxx.com/fonts/webfont.ttf") format("truetype");
}

#display {
  font-family: "WebFont";
  font-size: 64pt;
  font-weight: bold;
}

srcのurlには、フォントファイルのURLを指定し、formatにはフォントフォーマットを指定します。
フォントフォーマットは、ブラウザによりますが、"truetype"、"opentype"、"woff"等が指定できます。

タグ：CSS Webフォント WebFont

CSSでブロックの高さの最小値を設定するには

CSSのブロックでコンテンツがない場合は、ブラウザは高さ0でブロックを表示します。
コンテンツがない場合でも最小の高さで表示したい場合は、
min-heightプロパティを指定します。

例：

#result {
  min-height: 20px;
}

また、ブロックの幅の最小値の設定は、min-widthを指定します。
最大値の設定は、max-height、max-widthを使用します。

タグ：max-width max-height min-width min-height CSS

CSSでブロック内で自動改行を禁止する

CSSでブロック内の文字列を自動的に改行をさせるのを禁止するには、
white-spaceプロパティにnowrapを設定する。

#block {
  white-space: nowrap;
}

タグ：CSS