サーバへsshでリモートログインできたら、色々設定しておいた方がいいことがあります。
本来ちりじりになってる情報なので、こんな風にまとめてました。
2016年2月7日日曜日
CGIでリダイレクトする
サーバにあるフォルダのファイル一覧を見せないようにするには、.htaccessを設置すれば良いですが、せっかく最近Rubyを触ってるので、CGIでリダイレクトさせてみました。
はじめてのリモートログイン
htmlなんかを編集してアップロードするみたいな場合はFTPを使えばいいのですが、主にサーバ上の環境構築をするにはsshでリモートログインしないとできない事なんかがあります。最近rubyを使っていて、ローカルだけではなくサーバで動かしてみたくなったのでsshでリモートログインしてみることにしました。
emを使用したフォントサイズ指定
ブラウザのデフォルトサイズは多くは16px。
BODY {font-size:62.5%}
で、10pxに設定される。
1em は 10px, 0.8em は 8px, 1.6em で 16pxとなり、pxで考える際にわかりやすくなる。
...
...
#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
こういうレイアウトがあるとして、#navigationと#side_bar は 10px, #main_contentは12px、#footerは9pxでそれぞれの
テキストが表示される。
#main_contentは12pxに設定されていて、その中の要素は,それをもとに計算される。
H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */
まとめると、まず16pxがデフォルトでそれを10pxに設定する。
16 x 0.625 = 10
子要素/親要素で設定。
child pixels / parent pixels = child ems
12 / 10 = 1.2
しかしこれだと
#main_content LI {font-size:0.8333em}
リストがネストしている場合、どんどん小さくなっていくので、それを防ぐために
LI LI {font-size:1em}
のように設定する。
混乱を防ぐために、あらかじめ設定しておくのが良いだろう。
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}
cssセレクターまとめ
1 *
* {
margin: 0;
padding: 0;
}
全称セレクタ。テスト用としてはいいが、本番では使わない方が良い。全ての要素を対象にするため、ブラウザに負担をかける。
#container * {
border: 1px solid black;
}
子セレクタにも使えるが、使用しない方が良い。
2 #X
#container {
width: 960px;
margin: auto;
}
id指定。その要素にidを指定する必要があるか考える必要あり。
3 .X
.error {
color: red;
}
クラス指定。
4 X Y
li a {
text-decoration: none;
}
子孫セレクタ。X Y Z A B.errorのようになっているのは間違い。
5 X
a { color: red; }
ul { margin-left: 0; }
型セレクター。全ての要素を指定する時使用する。
6 X:visited X:link
a:link { color: red; }
a:visted { color: purple; }
疑似クラスセレクタ。
8 X > Y
div#container > ul {
border: 1px solid black;
}
標準のXYとX> Yの違いは、後者は直接の子のみを選択する。
この場合、#container直下のulのみ対象になる。それ以外のulには適用されない。
9 X ~ Y
ul ~ p {
color: red;
}
この例ではul以後のp要素全てを対象にする。
10 X[title]
a[title] {
color: green;
}
属性セレクタ。この例ではタイトル属性を持つaのみ対象になる。
11 X[href="foo"]
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
例では、http://net.tutsplus.comにリンクする全てのaタグを対象にする。
他のアンカータグは影響を受けない。
12 X[href*="nettuts"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
正規表現で指定できる。文字列の先頭と末尾を参照するには、^および＆を使用します。
13 X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
この場合httpで始まるurlへのリンクを持つaタグ。
http://を探していないことに注意してください。それは不要だし、https://で始まるURLを考慮しません。
14 X[href$="jpg"]
a[href$=".jpg"] {
color: red;
}
.jpgで終わるリンクを持つaタグ
15 X[data-*="foo"]
a[data-filetype="image"] {
color: red;
}
リンク先のデータタイプが画像のものを指定している。
色々な画像形式のリンクを指定する時、
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
このようにするのは効率が悪い。そういう時に使う。
使用する場合は、要素にdata-filetype属性を指定する。
data-filetype属性のない物には適用されない。
Image Link
16 X[foo~ = "bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
" Click Me, Fool
external属性を持つ要素はcolor:redになり、externalとimage両方を持つ要素はcolor:redと border: 1px solid black;
の両方を持つことができる。
* {
margin: 0;
padding: 0;
}
全称セレクタ。テスト用としてはいいが、本番では使わない方が良い。全ての要素を対象にするため、ブラウザに負担をかける。
#container * {
border: 1px solid black;
}
子セレクタにも使えるが、使用しない方が良い。
2 #X
#container {
width: 960px;
margin: auto;
}
id指定。その要素にidを指定する必要があるか考える必要あり。
3 .X
.error {
color: red;
}
クラス指定。
4 X Y
li a {
text-decoration: none;
}
子孫セレクタ。X Y Z A B.errorのようになっているのは間違い。
5 X
a { color: red; }
ul { margin-left: 0; }
型セレクター。全ての要素を指定する時使用する。
6 X:visited X:link
a:link { color: red; }
a:visted { color: purple; }
疑似クラスセレクタ。
8 X > Y
div#container > ul {
border: 1px solid black;
}
標準のXYとX> Yの違いは、後者は直接の子のみを選択する。
- List Item
- Child
- List Item
- List Item
- List Item
9 X ~ Y
ul ~ p {
color: red;
}
この例ではul以後のp要素全てを対象にする。
10 X[title]
a[title] {
color: green;
}
属性セレクタ。この例ではタイトル属性を持つaのみ対象になる。
11 X[href="foo"]
a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
例では、http://net.tutsplus.comにリンクする全てのaタグを対象にする。
他のアンカータグは影響を受けない。
12 X[href*="nettuts"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
正規表現で指定できる。文字列の先頭と末尾を参照するには、^および＆を使用します。
13 X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
この場合httpで始まるurlへのリンクを持つaタグ。
http://を探していないことに注意してください。それは不要だし、https://で始まるURLを考慮しません。
14 X[href$="jpg"]
a[href$=".jpg"] {
color: red;
}
.jpgで終わるリンクを持つaタグ
15 X[data-*="foo"]
a[data-filetype="image"] {
color: red;
}
リンク先のデータタイプが画像のものを指定している。
色々な画像形式のリンクを指定する時、
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
このようにするのは効率が悪い。そういう時に使う。
使用する場合は、要素にdata-filetype属性を指定する。
data-filetype属性のない物には適用されない。
Image Link
16 X[foo~ = "bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
" Click Me, Fool
external属性を持つ要素はcolor:redになり、externalとimage両方を持つ要素はcolor:redと border: 1px solid black;
の両方を持つことができる。
よりよいCSSを書くためのTips
cssを書く上での参考のため。
http://www.admixweb.com/2010/11/09/tips-to-code-better-css-for-in-your-projects/
わかりやすい名前をつける
idではなく、classを使う
#formExample1{
border:1px solid gray;
padding:20px;
}
#formExample2{
border:1px solid gray;
padding:20px;
}
これは別要素に同じようなスタイルを適用している。無駄が多く、再利用性にかける。
共通するスタイルはクラスで再利用できるようにする。
.form{
border:1px solid gray;
padding:20px;
}
再利用性にかけるもうひとつの原因は、単純なスタイルを特定のセレクターに適用する場合。
div.error-message{
color:red;
}
この場合は単に.error-messageとする。
これで全てのセレクターにクラスを適用できるようになる。
継承とカスケードプロパティーを使う
.odd{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
不要なスタイルを作成している。
この場合、親の継承を使用する。
table tbody{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
親要素の背景色を設定し、縞の部分のみクラスを使う。
名前空間
.widget{
width:300px;
height:200px;
border:1px solid gray;
}
.widget > h3{
color:white;
background:black;
padding:10px;
}
名前空間を使うことでクラス内の要素のみに適用できる。
Better Markup to Avoid Classitis and Divitis
インラインスタイルを使わない
CSSハックを避ける
CSSをリセットする
コメントを入れる
/* Reset */
..Restet the browser default..
/* Layout */
..Code for Layout only, including Forms..
/* Pages */
..Code that is used for specific page or pages.
/* Miscellaneous */
..Code for messages div, alerts, lightbox, etc.
shorthandsを使う
自分にとって最適なスタイルを選択する
コードの繰り返しを探す
プロジェクトが完成した後に、反復的なコードやパターンを探し、クラスに変換する。たとえば、プロジェクトのさまざまな部分に同じ背景と色を使用して、クラスにこれらのプロパティを追加し、それらを再利用すると良いでしょう。これは反復的なコードを避け、簡単に維持することができる。
Spriteを使う
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
オブジェクト指向CSS
http://www.slideshare.net/stubbornella/object-oriented-css
名人から学ぶ
Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, and a bunch of sites to help you to learn CSS.
http://www.admixweb.com/2010/11/09/tips-to-code-better-css-for-in-your-projects/
わかりやすい名前をつける
idではなく、classを使う
#formExample1{
border:1px solid gray;
padding:20px;
}
#formExample2{
border:1px solid gray;
padding:20px;
}
これは別要素に同じようなスタイルを適用している。無駄が多く、再利用性にかける。
共通するスタイルはクラスで再利用できるようにする。
.form{
border:1px solid gray;
padding:20px;
}
再利用性にかけるもうひとつの原因は、単純なスタイルを特定のセレクターに適用する場合。
div.error-message{
color:red;
}
この場合は単に.error-messageとする。
これで全てのセレクターにクラスを適用できるようになる。
継承とカスケードプロパティーを使う
.odd{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
不要なスタイルを作成している。
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
この場合、親の継承を使用する。
table tbody{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}
親要素の背景色を設定し、縞の部分のみクラスを使う。
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
| Lorem | Ipsu |
名前空間
.widget{
width:300px;
height:200px;
border:1px solid gray;
}
.widget > h3{
color:white;
background:black;
padding:10px;
}
名前空間を使うことでクラス内の要素のみに適用できる。
Better Markup to Avoid Classitis and Divitis
インラインスタイルを使わない
CSSハックを避ける
CSSをリセットする
コメントを入れる
/* Reset */
..Restet the browser default..
/* Layout */
..Code for Layout only, including Forms..
/* Pages */
..Code that is used for specific page or pages.
/* Miscellaneous */
..Code for messages div, alerts, lightbox, etc.
shorthandsを使う
自分にとって最適なスタイルを選択する
コードの繰り返しを探す
プロジェクトが完成した後に、反復的なコードやパターンを探し、クラスに変換する。たとえば、プロジェクトのさまざまな部分に同じ背景と色を使用して、クラスにこれらのプロパティを追加し、それらを再利用すると良いでしょう。これは反復的なコードを避け、簡単に維持することができる。
Spriteを使う
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
オブジェクト指向CSS
http://www.slideshare.net/stubbornella/object-oriented-css
名人から学ぶ
Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, and a bunch of sites to help you to learn CSS.
登録:
投稿 (Atom)