HTML5 – link

link要素の配置

meta要素は文書にリンクさせる外部ソースを指定する際に使用し、<head>~</head>の間に配置する。

link要素の属性

link要素には必須属性と任意属性がある。

必須属性

rel リンク先のリンクタイプを指定。CSSの場合はstylesheet
href リンク先のURL

任意属性

type MIMEタイプを指定
media メディアクエリ(初期値は”all”)
hreflang 外部リソースの言語を指定。
sizes アイコンなどのサイズを指定。

雛形

スタイルシート
<link rel="stylesheet href="cssファイルのURL">

 

HTML5 – メディア・クエリ

概要

link要素のmedia属性の値として使用。メディアタイプやメディア特性で指定。演算子を使って複数の条件を指定可能。

メディア・クエリの要素

メディア・タイプ

screen コンピュータ画面
tty テレタイプなどの字幅が固定の機器
tv テレビ
projection プロジェクタ
handheld モバイル機器
print プリンタ
braille 点字出力機器
aural 音声出力機器
all 全てのメディア

メディア特性

width
表示領域の幅。min-/max-前置詞使用可。
height
表示領域の高さ。min-/max-前置詞使用可。
device-width
出力デバイス(画面や印刷用紙)の幅。min-/max-前置詞使用可。
device-height
出力デバイス(画面や印刷用紙)の高さ。min-/max-前置詞使用可。
orientation
縦表示(portrait)/横表示(landscape)を指定。
aspect-ratio
表示領域のアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ(/)区切りで指定。min-/max-前置詞使用可。
device-aspect-ratio
出力デバイスのアスペクト比。考え方はaspect-ratioと同じ。min-/max-前置詞使用可。
color
出力デバイスのカラーコンポーネントあたりのビット数。カラーデバイスでない場合の値は”0″。min-/max-前置詞使用可。
color-index
出力デバイスのカラールックアップテーブルのエントリ数。min-/max-前置詞使用可。
monochrome
モノクロデバイス上のピクセルあたりのビット数。モノクロデバイスでない場合の値は”0″。min-/max-前置詞使用可。
resolution
出力デバイスの解像度。min-/max-前置詞使用可。
scan
テレビ型出力デバイスの操作方式。

progressive プログレッシブ方式
interlace インターレース方式
grid
出力デバイスがグリッド又はビットマップであるかどうかを調べる。

演算子

and AND演算子
not NOT演算子
, (comma) OR演算子
only メディアクエリ非対応ブラウザからスタイルシートを隠す

実装例

表示領域の幅が300px以上900px以下のコンピュータ・スクリーンに限って、スタイルシートを適用する場合

メディアクエリの実装例

 

HTML – MIMEタイプ

概要

MIMEでデータ形式を識別するためのコード体系。

“type/subtype”の形式で記述され、たとえばHTML文書は”text/html”。JPEG画像は”image/jpeg”と表す。typeに指定できるものの例として、text(文字)、image(画像)、video(動画)、audio(音声)、application(アプリケーション固有)、message(メールメッセージ)、multipart(複数形式が混在)など。

MIMEタイプ一覧

ファイル形式 拡張子 MIMEタイプ
HTML、テキスト
 テキスト .txt  text/plain
HTML .html, .html text/html
XHTML .xhtml application/xhtml+xml
XML .xml text/xml
RSS .rss, .xml application/rss+xml
application/xml
text/xml
CSS、スクリプト
 CSS .css text/css
CGI .cgi application/x-httpd-cgi
PHP .php application/x-httpd-php
JavaScript .js. text/javascript
VBScript .vbs text/vbscript
画像
GIF  .gif image/gif
JPEG .jpeg, .jpg image/jpeg
PNG .png image/png
ico .ico image/vnd.microsoft.icon
動画
 Flash  .swf application/x-shockwave-flash
MPEG .mpeg, .mpg video/mpeg
MP4 .mp4 video/mp4
WebM .webm video/webm
Ogg .ogv video/ogg
QuickTime .mov, .qt video/quicktime
AVI .avi video/x-msvideo
音声
 MP3  .mp3  audio/mpeg
AAC .m4a audio/aac
Ogg .ogg audio/ogg
MIDI .midi, .mid audio/midi
RealAudio .ra audio/vnd.rn-realaudio
WAVE .wav audio/wav
その他
ZIP .zip application/zip
PDF .pdf application/pdf
Word .doc application/msword
Excel .xls application/msexcel

 

HTML5 – viewport

書式

プロパティ

980

プロパティ 範囲 初期値
width 表示領域の幅 数値:ピクセル数 200~10000 980
device-width 端末の幅に合わせる
height 表示領域の高さ 数値:ピクセル数 233~10000 自動
device-height 端末画面の高さに合わせる
initial-scale 初期ズーム倍率 数値:倍率 minimus-scale~maximum-scale
minimum-scale 最小倍率 数値:倍率 0~10 0.25
maximum-scale 最大倍率 数値:倍率 0~10 1.6
user-scalable ズーム操作 yes:許可  yes
no:禁止

使用例

以下の設定の表示例

 

HTML5 – meta

meta要素の配置

meta要素はHTMLのメタデータで、<title>、<link>、<script>などのタグで表現できない様々なメタデータを定義し、<head>~</head>の間に配置する。

metaタグの属性

metaタグでは、以下の属性の少なくとも一つを指定する。

  • charset属性
  • name属性
  • http-equiv属性
    • この属性には、必ずcontent属性をセットで記述する
    • メタデータの定義とその内容が関連付けられる。

charset属性

meta要素のcharset属性で文字エンコーディングを指定する。charset属性を指定したmeta要素は、一つの文書に一つしか配置できない。

日本語のエンコーディングとしては以下を指定。
大文字と小文字の区別はされない。

  • utf-8
  • shift_jis
  • euc-jp

HTML4では、meta要素を指定する場合、以下の用に記述していた。

name属性

name属性でメタデータ名を定義し、content属性でその内容を指定する。

メタデータ名の一覧

keywords
文書の内容に関するキーワードを値に記述。複数のキーワードを指定する場合はcomma”,”で区切る。ここで指定される値は検索エンジンで利用される可能性がある。
description
文書の説明を短文で値に記述。指定した値は検索結果に表示されるなど検索エンジンに利用される。
robots
検索エンジンのクローラ(ロボット)に対しての無効指定(noindex,nofollow)を値に記述。この情報を参照する検索エンジンに対してのみ有効。W3Cの仕様には記載されていない。
author
文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。
generator
文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。
application-name
HTML4.01からHTML5へのバージョンアップで追加。Webアプリケーションの名前を示すもので、ページがWebアプリケーションの場合のみ使用し、一つの文書に一つだけ指定。
viewport
文書の表示領域を設定。スマートフォン向けの機能であり、表示幅の画面へのフィッティングやスケーラビリティを設定。
format-detection
・・・・・

http-equiv属性

meta要素が実行命令を指示する「プラグマ指示子」(pragma directive)となる。プラグマ指示子はブラウザに対して文書の状態・挙動を指示する。

nameの値1には、以下の4つを指定可能。

content-language
コンテンツ言語の指定。contentの値2に指定する言語は、ja(日本語)、en(英語)、zh(中国語)、zo(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語)など。
content-type
HTMLやCSSなどのファイルタイプや文字エンコーディングの指定。charset属性の代わりに、contentの値の中で文字エンコーディングを指定可能。
default-style
デフォルトスタイルの指定。この指定により、link要素で複数のCSSを指定している場合に、その中で優先して利用するCSSファイルをブラウザに伝達可能。
refresh
リダイレクト/再読み込みの指定。リフレッシュ/リダイレクトまでの遅延時間)と、リダイレクト先のURLを指定。URL指定がなければ、そのページをリフレッシュする。遅延時間の単位は秒。

 

CSS3~継承とオーバーライド

CSSのスタイルで、クラス間での継承・オーバーライドを行うことができる。

上記の例では、mainクラスでフォントサイズとカラーを指定し、sub1クラスではmainクラスのフォントサイズを継承しながらカラーを、sub2クラスではmainクラスのカラーを継承しながらフォントサイズをオーバーライドしている。

また、mainを継承したsub1クラスとは別に、単独でsub1クラスのスタイルを定義している。

これらのスタイルをHTMLで利用する場合、複数クラスをスペースで区切って指定する。その際、クラスの順番は問わない。

実行結果は以下の通り。

.mainのスタイル
.main.sub1のスタイル
.main.sub1のスタイル
.main.sub2のスタイル
.main.sub2のスタイル
sub1のスタイル
sub2のスタイル

 

  • 複数クラスの記載順序は影響しないことに注意。
  • 同名のクラスでも単独で定義されたsub1クラスとサブクラスとして定義されたsub1クラスは異なる
  • サブクラスとして定義されたsub2クラスは単独では適用できない

 

CSS3~覚え書き

文法

セレクタ

  • タグはそのまま記述
  • idの場合は”#”に続けて記述
  • クラスの場合は”.”に続けて記述

入れ子のタグの指定

入れ子の中のタグを指定するときは、親要素と子要素の間に半角スペースを入れる。

一括指定

異なるセレクタに同じ設定を適用する場合は、”,”で区切って列挙。

padding

値を1つ指定すると、上下左右に同じ値でパディング。

値を2つ指定すると、1つ目の値で上下に、2つ目の値で左右にパディング。

値を4つ並べて指定すると、それぞれtop、right、bottom、leftのpadding値になる(上から時計回り)。

padding値を個別に指定することも可能。

 

ベンダー・プレフィックス

 
ブラウザ プレフィックス
FireFox -moz-
Google Chrome, Safari -webkit-
Opera -o-
Internet Explorer -ms-

box-sizing

要素のサイズには、margin、borderの幅、paddingは加味されないため、 サイズ指定が煩雑になり、時に意図しない結果になる。

たとえばHTML5のbodyとnavブロック、sectionブロックの幅を ピクセル単位で指定し、 mavとsectionがbodyの幅にピッタリ納まるようにしたいとき、 各々にmarginなどをを設定していると、 その分だけ意図するサイズから差し引いた値をwidthに設定しなければならない。

HTML5では、box-sizing属性をborder-boxにすることでこれを解消し、 paddingとborderを含めたサイズでwidthを指定できるようになる。以下の例は、 div要素のboxクラスに対して以下の属性を適用し、box-sizing属性を変えた例。

box-sizing:content-boxのとき
box-sizingテスト
box-sizing:border-boxのとき
box-sizingテスト

 

border-sizingをborder-boxにするため、デフォルトで読み込むCSSファイルに 以下を記述。この際、各ベンダーのブラウザに対応させるため、 ベンダー・プレフィックスをつけておく。

calc()ファンクション

CSS3で実装された機能で、動的にブロックの幅などを計算できる。 ブラウザによって実装状況が異なるので、ベンダー・プレフィックスを 付けて列挙するのが安全。

ぶら下げインデント

CSS3ではtext-indent属性にhangingスイッチが定義されているが、 Chromeのバージョン47.0.2526.73 mでは再現できなかった。

paddingとtext-indentを使って同じ効果を得る方法がネット上で紹介されている。 paddingで全体を右へ移動させ、text-indentに負の値を指定することで 先頭のみ元の場所へ戻す。

position: ~で右寄せ

親要素にposition: relativeを指定し、子要素でposition: absoluteとright: 0やbottom: 0などを指定すると、子要素を親要素の右端や下端に寄せることができる。要素の右寄せなどに簡易に使えるかもしれない。

HTML

CSS

 

Linuxコマンド – vi

機能

viエディタを起動する。

記法

モード間移動

コマンドモードと編集モード

vi起動直後はコマンドモードになり、以後、編集モードとコマンドモードを行き来する。

  • コマンドモードから編集モードへは、i, T, A, O, oのいずれかのコマンドで移行
  • 編集モードからコマンドモードへは[ESC]で移行。

終了

コマンドモードで:q, :q!, :wqのいずれかのコマンドでviを終了。なお、:wコマンドは終了せず保存。

モード間移動のまとめ

起動

コマンドモード
↓ (i,R,A,O,o)
編集モード
↓ [Esc]
コマンドモード
↓ (:q.:q!,:wq)
終了

viコマンドを参照

 

Linuxコマンド – ls

機能

ファイル、ディレクトリを表示する。

記法

オプション

表示形式

-l  詳細表示(パーミッション、タイムスタンプなど)
 -T  -lオプションの時、日付と時刻を完全表示する
-F  ファイル種類に応じた表示(/:ディレクトリ、*:実行可能ファイル、@:シンボリックリンク|:名前付きパイプ)
 -1  ディレクトリを一行ごとに表示
 -R  下層ディレクトリの内容も再帰的に表示
 -D format  -lオプションの時、formatに従って日付と時刻を表示
 -G  カラー表示

表示対象

-a ドットファイルを含めたすべてのファイルを表示
-L 引数がシンボリックリンクの時、リンク先を表示する

表示情報の付加

-s ファイル名の前にファイルサイズをキロ・バイト単位で付加
-i ファイル名の前にインデックス番号を付加

表示順序

-u ファイルの最終アクセス時刻の新しい順にソート
lsのデフォルト
-t ファイルの最終修正時刻の新しい順にソート
-c ファイルステータスの最終修正時刻を用いる
-r ファイルを逆順にソート
-f ソートしない(ディスクに格納された順)

 

さくらレンタルサーバーの初期状態

ユーザディレクトリ

/home/アカウント名

設定ファイル

.login_conf

.chrc