とりあたまログ

idiomatic-css/translations/ja-JP at master · necolas/idiomatic-css · GitHub

[0回]

Media Type

以下のような記述でスタイルシートの対象メディアタイプを特定する。

@import url("fancyfonts.css") screen;
@media print {
  /* 印刷用のスタイルシートがここに入る */
}

<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css" />

認識されるメディアタイプ

handheld：携帯端末
print：ページ素材を対象とした、または印刷プレビューモードの画面表示
screen：主としてコンピュータのカラー画面
他にall, braille, embossed, projection, speech, tty, tvがある。

Media types - CSS 2.1 spec (ja)

Media Queries

メディアクエリは、メディアタイプと、特定のメディア特性に関する条件を比較する0以上の式から構成される。

記述例

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(color.css) screen and (color);

カンマは論理式のORを表し、‘and’キーワードは論理式のANDを表す。

@media screen and (color), projection and (color) { … }

論理式のNOTは、‘not’キーワードで表すことができる。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

古いユーザーエージェントにスタイルシートを解釈させないために、‘only’キーワードを使用できる。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

メディア特性

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

ほとんどのメディア特性は‘min-’または‘max-’といったオプションの接頭辞を受け入れ、"～以上"や"～以下"という制限を表現できる。

Media Queries (ja)

IEへの対応

css3-mediaqueries.jsを使えばIEでもMedia Queriesが使える。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

[0回]

オブジェクトをパスに変更する

円/弧ツール(F5)で円を描く。


「パス」→「オブジェクトをパスへ」(Shift + Ctrl + C)

分割する

縦に分割する場合、上下のパスをノードツール(F2)で選択して「選択ノードでパスを切断」をクリック。


「パス」→「分解」で分解する。

好きな場所でカットする

たとえば鉛筆ツールで線を引いて統合して、


切断、分解したりもできる。


Inkscape 0.48

関連記事

• Inkscapeで図形を回転させる
• Inkscapeで矢印を書く

[2回]

矢印にする

線を選択し、「フィル/ストローク」(Shift + Ctrl + F)→「ストロークのスタイル」の「マーカー」を設定する。

矢印の色を変更する

マーカーの色を変更するには、「エクステンション」→「パスの変形」→「マーカーの色をパスに合わせる」をクリックする。


Inkscape 0.48

関連記事

• Inkscapeで図形を回転させる
• Inkscapeで円を分割する

[0回]

回転の準備

選択ツール(F1)で対象の図形を選択する。


図形をクリックすると、まわりの矢印が回転やゆがみのコントロールに変化する。


回転の中心を移動させるには中心に表示された十字のマークをドラッグで移動させる。このマークが回転の中心になっている。

回転させる

角の矢印をドラッグすると図形を回転させることができる。Ctrlキーを押しながらドラッグすると「回転スナップ単位」で設定された角度単位で回転させることが可能。

回転スナップ単位の設定


指定した角度に回転させるには「変形」メニューの回転で角度を入力して適用ボタンをクリックする。


Inkscape 0.48

関連記事

• Inkscapeで矢印を書く
• Inkscapeで円を分割する

[1回]