HTML5 – link

2016-06-25 / tau / コメントする

link要素の配置

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

link要素の属性

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

必須属性

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

任意属性

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

雛形

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

HTML5 – メディア・クエリ

2016-06-25 / tau / コメントする

概要

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

メディア・クエリの要素

メディア・タイプ

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

メディア特性

width

表示領域の幅。min-/max-前置詞使用可。

[min-/max-]width:[XXX]px

1	[min-/max-]width:[XXX]px

height

表示領域の高さ。min-/max-前置詞使用可。

[min-/max-]height:[XXX]px

1	[min-/max-]height:[XXX]px

device-width

出力デバイス(画面や印刷用紙)の幅。min-/max-前置詞使用可。

device-height

出力デバイス(画面や印刷用紙)の高さ。min-/max-前置詞使用可。

orientation

縦表示(portrait)／横表示(landscape)を指定。

orientation:[portrait/landscape]

1	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以下のコンピュータ・スクリーンに限って、スタイルシートを適用する場合

用する場合 
<link rel="stylesheet" href="mycss.css" type="text/css" media="only screen and (min-width:300px) and (max-width:900px)">

1 2	用する場合 <link rel="stylesheet" href="mycss.css" type="text/css" media="only screen and (min-width:300px) and (max-width:900px)">

メディアクエリの実装例

HTML – MIMEタイプ

2016-06-25 / tau / コメントする

概要

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

2016-06-25 / tau / コメントする

書式

<meta="viewport" content="プロパティ1、プロパティ2, ...">

1	<meta="viewport" content="プロパティ1、プロパティ2, ...">

プロパティ

980

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

使用例

以下の設定の表示例

<meta name="viewport" content="width=device-width">

1	<meta name="viewport" content="width=device-width">

HTML5 – meta

2016-06-25 / tau / コメントする

meta要素の配置

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

metaタグの属性

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

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

charset属性

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

<meta charset="エンコーディングの値">

1	<meta charset="エンコーディングの値">

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

utf-8
shift_jis
euc-jp

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

<meta http-equiv="Content-Type" content="text/htmll;charset=UTF-8">

1	<meta http-equiv="Content-Type" content="text/htmll;charset=UTF-8">

name属性

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

<meta name="メタデータ名" content="値">

1	<meta name="メタデータ名" content="値">

メタデータ名の一覧

keywords

文書の内容に関するキーワードを値に記述。複数のキーワードを指定する場合はcomma”,”で区切る。ここで指定される値は検索エンジンで利用される可能性がある。

description

文書の説明を短文で値に記述。指定した値は検索結果に表示されるなど検索エンジンに利用される。

robots

検索エンジンのクローラ(ロボット)に対しての無効指定(noindex,nofollow)を値に記述。この情報を参照する検索エンジンに対してのみ有効。W3Cの仕様には記載されていない。

author

文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。

generator

文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。

application-name

HTML4.01からHTML5へのバージョンアップで追加。Webアプリケーションの名前を示すもので、ページがWebアプリケーションの場合のみ使用し、一つの文書に一つだけ指定。

<meta name="application-name" content="Gmail">

1	<meta name="application-name" content="Gmail">

viewport

文書の表示領域を設定。スマートフォン向けの機能であり、表示幅の画面へのフィッティングやスケーラビリティを設定。

format-detection

・・・・・

http-equiv属性

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

<meta http-equiv="値1" content="値2">

1	<meta http-equiv="値1" content="値2">

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

content-language

コンテンツ言語の指定。contentの値2に指定する言語は、ja(日本語)、en(英語)、zh(中国語)、zo(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語)など。

<meta http-equiv="content-language" content="ja">

1	<meta http-equiv="content-language" content="ja">

content-type

HTMLやCSSなどのファイルタイプや文字エンコーディングの指定。charset属性の代わりに、contentの値の中で文字エンコーディングを指定可能。

<meta http-equiv="content-type" content="text/html">
<meta http-equiv="content-type" content="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style

デフォルトスタイルの指定。この指定により、link要素で複数のCSSを指定している場合に、その中で優先して利用するCSSファイルをブラウザに伝達可能。

refresh

リダイレクト／再読み込みの指定。リフレッシュ／リダイレクトまでの遅延時間)と、リダイレクト先のURLを指定。URL指定がなければ、そのページをリフレッシュする。遅延時間の単位は秒。

<meta http-equiv="refresh" content="5; url=another_page.html">
<meta http-equiv="refresh" content="180">

1 2	<meta http-equiv="refresh" content="5; url=another_page.html"> <meta http-equiv="refresh" content="180">

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

2016-06-25 / tau / コメントする

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

.main {
  font-size: 2em;
  color: #00f;
}

.main.sub1 {
  color: #f00;
}

.main.sub2 {
  font-size: 1.5em;
}

.sub1 {
  color: #0f0;
}


　上記の例では、mainクラスでフォントサイズ

<!-- box-sizing属性の例示用style／本ページ専用 -->

.main {

font-size: 2em;

color: #00f;

}

.main.sub1 {

color: #f00;

}

.main.sub2 {

font-size: 1.5em;

}

.sub1 {

color: #0f0;

}

　上記の例では、mainクラスでフォントサイズ

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

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

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

<div class="main">.mainのスタイル</div>

<div class="main sub1">.main.sub1のスタイル</div>
<div class="sub1 main">.main.sub1のスタイル</div>

<div class="main sub2">.main.sub2のスタイル</div>
<div class="sub2 main">.main.sub2のスタイル</div>

<div class="sub1">sub1のスタイル</div>
<div class="sub2">sub2のスタイル</div>

<div class="main">.mainのスタイル</div>

<div class="main sub1">.main.sub1のスタイル</div>

<div class="sub1 main">.main.sub1のスタイル</div>

<div class="main sub2">.main.sub2のスタイル</div>

<div class="sub2 main">.main.sub2のスタイル</div>

<div class="sub1">sub1のスタイル</div>

<div class="sub2">sub2のスタイル</div>

実行結果は以下の通り。

.mainのスタイル

.main.sub1のスタイル

.main.sub2のスタイル

sub1のスタイル

sub2のスタイル

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

CSS3～覚え書き

2016-06-25 / tau / コメントする

文法

セレクタ

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

div {
  //divタグ全てに反映される
}

#example_id {
  //たとえばdiv id="example_id"の部分に反映される
}

.example_class {
  //たとえばp class="example_class"の部分に反映される
}

div {

//divタグ全てに反映される

}

#example_id {

//たとえばdiv id="example_id"の部分に反映される

}

.example_class {

//たとえばp class="example_class"の部分に反映される

}

入れ子のタグの指定

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

div#example_id p {
  //div id="example_id"の中のpタグ全てに反映される
}

div#example_id p {

//div id="example_id"の中のpタグ全てに反映される

}

一括指定

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

header, footer {
  //headerとfooterに同じ設定が反映される
}

header, footer {

//headerとfooterに同じ設定が反映される

}

padding

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

<div class="someclass">
  padding: 20px;
</div>

padding: 20px;

</div>

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

<div class="someclass">
  padding: 20px, 60px, 30px, 40px;
  /*
    top & bottom -> 20px
    left & right -> 40px
  */
  
</div>

padding: 20px, 60px, 30px, 40px;

top & bottom -> 20px

left & right -> 40px

</div>

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

<div class="someclass">
  padding: 20px, 40px;
  /*
    top    -> 20px
    right  -> 60px 
    bottom -> 30px
    left   -> 40px
  */
  
</div>

padding: 20px, 40px;

top -> 20px

right -> 60px

bottom -> 30px

left -> 40px

</div>

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

<div class="someclass">
  padding-top: 20px;
  padding-right: 60px;
  padding-bottom: 30px;
  padding-left: 40px;  
</div>

padding-top: 20px;

padding-right: 60px;

padding-bottom: 30px;

padding-left: 40px;

</div>

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


ブラウザ	プレフィックス
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属性を変えた例。

div.box {
  border-style:solid;
  border-color:black;
  width:300px;
  margin:20px;
  border-width:5px;
  padding:10px;
}

div.box {

border-style:solid;

border-color:black;

width:300px;

margin:20px;

border-width:5px;

padding:10px;

}

box-sizing:content-boxのとき

box-sizingテスト

box-sizing:border-boxのとき

box-sizingテスト

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

* {
          box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

* {

box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

calc()ファンクション

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

.sidebar {
  float: left;
  width: 180px;
  background-color: #478384
}

.main-content {
  float: right;
  width: calc(100% - 180px);
  width: -webkit-calc(100% - 180px);
}

.sidebar {

float: left;

width: 180px;

background-color: #478384

}

.main-content {

float: right;

width: calc(100% - 180px);

width: -webkit-calc(100% - 180px);

}

ぶら下げインデント

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

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

.comment {
  padding-left: 1em;
  text-indent: -1em
}

.comment {

padding-left: 1em;

text-indent: -1em

}

position: ～で右寄せ

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

HTML

<div class="parent">
  <span class="child1">Child1</span>
  <span class="child2">Child2</span>
</div>

<span class="child1">Child1</span>

<span class="child2">Child2</span>

</div>

CSS

.parent {
  margin: auto;
  position: relative;
  width: 60%;
  height: 100px;
  background-color: #0cc;
}
.child1 {
  position: absolute;
  left: 20px;
  top: 30px;
}
.child2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.parent {

margin: auto;

position: relative;

width: 60%;

height: 100px;

background-color: #0cc;

}

.child1 {

position: absolute;

left: 20px;

top: 30px;

}

.child2 {

position: absolute;

right: 0;

bottom: 0;

}

Linuxコマンド – vi

2016-06-24 / tau / コメントする

機能

viエディタを起動する。

記法

vi [パス][ファイル名]

1	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

2016-06-24 / tau / コメントする

機能

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

記法

ls [オプション]

1	ls [オプション]

オプション

表示形式

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

表示対象

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

表示情報の付加

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

表示順序

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

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

2016-06-24 / tau / コメントする

ユーザディレクトリ

/home/アカウント名

設定ファイル

.login_conf

# $FreeBSD: src/share/skel/dot.login_conf,v 1.3.32.1 2008/11/25 02:59:29 kensmith Exp $
#
# see login.conf(5)
#
#me:\
#       :charset=iso-8859-1:\
#       :lang=de_DE.ISO8859-1:

# $FreeBSD: src/share/skel/dot.login_conf,v 1.3.32.1 2008/11/25 02:59:29 kensmith Exp $

# see login.conf(5)

#me:\

# :charset=iso-8859-1:\

# :lang=de_DE.ISO8859-1:

.chrc

# $FreeBSD: src/share/skel/dot.cshrc,v 1.14.6.1 2008/11/25 02:59:29 kensmith Exp $
#
# .cshrc - csh resource script, read at beginning of execution by each shell
#
# see also csh(1), environ(7).
#

alias h         history 25
alias j         jobs -l
alias la        ls -a
alias lf        ls -FA
alias ll        ls -lA

# A righteous umask
umask 22

set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin $HOME/bin)

setenv  EDITOR  vi
setenv  PAGER   more
setenv  BLOCKSIZE       K
setenv  PKG_DBDIR       ~/db/pkg

if ($?prompt) then
        # An interactive shell -- set some stuff up
        set filec
        set history = 100
        set savehist = 100
        set mail = (/var/mail/$USER)
        if ( $?tcsh ) then
                bindkey "^W" backward-delete-word
                bindkey -k up history-search-backward
                bindkey -k down history-search-forward
        endif
endif

# $FreeBSD: src/share/skel/dot.cshrc,v 1.14.6.1 2008/11/25 02:59:29 kensmith Exp $

# .cshrc - csh resource script, read at beginning of execution by each shell

# see also csh(1), environ(7).

alias h history 25

alias j jobs -l

alias la ls -a

alias lf ls -FA

alias ll ls -lA

# A righteous umask

umask 22

set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin $HOME/bin)

setenv EDITOR vi

setenv PAGER more

setenv BLOCKSIZE K

setenv PKG_DBDIR ~/db/pkg

if ($?prompt) then

# An interactive shell -- set some stuff up

set filec

set history = 100

set savehist = 100

set mail = (/var/mail/$USER)

if ( $?tcsh ) then

bindkey "^W" backward-delete-word

bindkey -k up history-search-backward

bindkey -k down history-search-forward

endif