Illustrator – 画像の配置～リンク/埋め込み

2016-12-14 / tau / コメントする

概要

単に画像ファイルをレイヤにドラッグ・アンド・ドロップすると、画像のリンクが埋め込まれる。

これに対して画像ファイルそのものを埋め込みたい場合は「配置」メニューから画像を配置する。

手順

メニューから「ファイル」→「配置」でダイアログ起動
配置したいファイルを選択
下方の「リンク」チェックボックスを選択
- on→リンク配置(link)
- off→埋め込み配置(embed)

Linuxコマンド – ln

2016-12-09 / tau / コメントする

概要

ファイル／ディレクトリへのリンクを作成する。リンクにはハード・リンクとシンボリック・リンクの2種類がある。

ハードリンク

ハードリンクは、ソースのiノード番号をターゲットとして持ち、ソースが移動されたり、名前が変更されても有効。

ln [ソース] [リンク名]

1	ln [ソース] [リンク名]

実行例

$ ls -l work/
-rw-r--r--  1 taustation  users  20 12月  9 15:52 source
$ cat work/source 
This is the source.
$ ln work/source hard_link
$ ls -l hard_link
-rw-r--r--   2 taustation  users    20 12月  9 15:52 hard_link
$ cat hard_link
This is the source.
$ mv work/source work/renamed
$ cat hard_link 
This is the source.
$

$ ls -l work/

-rw-r--r-- 1 taustation users 20 12月 9 15:52 source

$ cat work/source

This is the source.

$ ln work/source hard_link

$ ls -l hard_link

-rw-r--r-- 2 taustation users 20 12月 9 15:52 hard_link

$ cat hard_link

This is the source.

$ mv work/source work/renamed

$ cat hard_link

This is the source.

1～4行目でソースとその内容を確認
5行目でハードリンクを作成
6～7行目でリンクを確認
8～9行目でリンクで参照されるソースの内容を確認
10行目でソースの名前を変更
11～12行目、変更後もハードリンクは有効

シンボリックリンク

シンボリックリンクでは、リンクファイルにリンク先にソースへのパスが保存され、これを参照してソースがアクセスされる。

ソースの位置や名前が変更されてもリンクファイルのパスは変わらないため、変更後のソースにはアクセスできなくなる(デッド・リンク)。

ln -s [ソース] [リンク名]

1	ln -s [ソース] [リンク名]

実行例

$ cat work/source
This is the source.
$ ln -s work/source soft_link
$ ls -l
lrwxr-xr-x   1 taustation  users    11 12月  9 15:57 soft_link -> work/source
$ cat soft_link
This is the source.
$ mv work/source work/renamed
$ cat soft_link 
cat: soft_link: No such file or directory
$

$ cat work/source

This is the source.

$ ln -s work/source soft_link

$ ls -l

lrwxr-xr-x 1 taustation users 11 12月 9 15:57 soft_link -> work/source

$ cat soft_link

This is the source.

$ mv work/source work/renamed

$ cat soft_link

cat: soft_link: No such file or directory

1～2行目でソースの内容を確認
3行目でソフトリンクを作成
4～5行目でソフトリンクを確認(パスが表示されている)
6~7行目でソフトリンクからソースの内容を表示
8行目でソースの名前を変更
9～10行目、変更後はソフトリンクからアクセスできない

HTML5 – IE互換性

2016-12-07 / tau / コメントする

CSSの指定前の処理(IE対応)

IE8以下ではHTML5に対応していないため、新要素は無視されてしまう。IEをHTML5に対応させるJavaScriptがhtml5shivサイトで公開されており、これを最初に読み込んで対応する。

<!--[if lt IE 9]>
<script type="text/javascript"
           src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href~[ファイル名]">

<!--[if lt IE 9]>

src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

新要素に対してCSSの設定をしている場合、スクリプトがCSSの設定をオーバーライドしないよう、スクリプトの記述をCSS呼び出しの前に置かなければならない。
IEの判定部分を<!–[if IE]>としている例もある。
HTML5ではscript要素のtype属性の初期値は”text/javascript”として設定されているので省略可能。

IEの条件付きコメント

Microsoft Internet Explorer (MSIE)において、HTMLソースコード中にある条件付きのステートメント。 IE5で初めて導入され、IE9までサポートされた。IE10以降この機能は廃止され、単なるコメントとして扱われる。

コメントの種類	記述
標準のHTMLコメント	<–コメント–>
下の階層が隠れる	<!–[if expression]>HTML<![endif]–>
下の階層が見える	<![if expression]>HTML<![endif]>

下の階層が隠れる条件付きコメント

ブラウザがIEの場合のみHTMLが解釈され、IE以外の場合はブラウザからHTMLが見えない。たとえば、ブラウザがIEの場合のみスクリプトを実行するような場合。

<!--[if IE 8]>
～IE8の場合のみ認識されるHTML～
<![endif]-->

<!--[if IE 8]>

～IE8の場合のみ認識されるHTML～

<![endif]-->

下の階層が見える条件付きコメント

以下は、Microsoftのデフォルトの記法で、ブラウザがIEの場合にはHTMLが解釈されず、IE以外のブラウザにはHTMLが見える記法。

<![if !IE]>
～IEでないブラウザで認識されるHTML～
<![endif]>

<![if !IE]>

～IEでないブラウザで認識されるHTML～

<![endif]>

の表現をIEから見ると、ブラウザがIEなのでifの中身は無視される。一方IE以外のブラウザからみると前後のタグ自体が無視されるため、ifの中身だけが見えて実行される。

この記法は正当な(X)HTMLに準拠したものではなく、IE以外のブラウザで前後のタグが無視されることを期待しているにすぎない。そこで、W3C標準を順守するため、以下のような表現が考えられる。

<!--[if !IE]>-->
～IEでないブラウザで認識されるHTML～
<!--<![endif]-->

～IEでないブラウザで認識されるHTML～

この記法は、正当な(X)HTMLである。ただし条件式のパターンによっては、条件が真となる場合に、HTMLの解釈の前に”–>”を表示してしまう。

<!--[if gt IE 6]><!-->
～IE以外のブラウザとIE7以降で認識されるHTML～
<!--<![endif]-->

～IE以外のブラウザとIE7以降で認識されるHTML～

HTML5 – 標準形・ひな形

2016-12-07 / tau / コメントする

全体構成

<!DOCTYPE html>

<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    [CSS設定]
  </head>

  <body>
    .....
  </body>

</html>

<!DOCTYPE html>

<head>

[CSS設定]

</head>

<body>

.....

</body>

</html>

DOCTYPE宣言で始める
html要素の中にhead要素とbody要素を記述
head要素の中には、meta要素、title要素と、必要に応じてスタイル設定のための要素を記述

DOCTYPE宣言

<!DOCTYPE html>

1	<!DOCTYPE html>

XHTMLに比べて簡略化
ブラウザなどにHTML5であることを明示
DOCTYPE宣言がないと、ブラウザによってはレンダリングモードが互換モードとなりCSSの解釈が意図と異なるレイアウトとなる場合がある
DOCTYPE宣言によって、主要なブラウザは標準モードとなる。

html要素

lang属性による言語の指定

<html lang="ja">

1	<html lang="ja">

htmlタグのlang属性で言語を指定し、ブラウザ・検索サイトなどに伝える。

head要素

文字コード指定

<meta charset="utf-8">

1	<meta charset="utf-8">

head要素内のmeta要素で文字コードを指定する
HTML4以前の記述も可能だが、HTML5ではより簡略な表現が可能
この宣言より前のものは文字化けの可能性があるため、head要素の冒頭に記述

title

<title>[タイトル]</title>

1	<title>[タイトル]</title>

head要素内のtitle要素で指定
[タイトル]がブラウザのタイトルバーに表示される
検索サイトでの検索結果のタイトルにも使われる

CSS設定

外部ファイル指定

<link rel="stylesheet" type="text/css" href="[ファイル名]">

1	<link rel="stylesheet" type="text/css" href="[ファイル名]">

head要素内のlinkタグの属性で指定
HTML5ではrel属性の値が”stylesheet”の場合のtype属性の値は”text/css”として設定されているので省略可能

CSSの直接記述

<style type="text/css">  
<!-- 
  ..... 
-->  
</style>

<!--

.....

-->

</style>

head要素内のstyle要素の中にCSSの文を直接記述

PHP – クエリによる結果の取得

2016-12-04 / tau / コメントする

Connection failed

TauStation

投稿者: tau

Illustrator – 画像の配置～リンク/埋め込み

概要

手順

Linuxコマンド – ln

概要

ハードリンク

シンボリックリンク

HTML5 – IE互換性

CSSの指定前の処理(IE対応)

IEの条件付きコメント

下の階層が隠れる条件付きコメント

下の階層が見える条件付きコメント

HTML5 – 標準形・ひな形

全体構成

DOCTYPE宣言

html要素

lang属性による言語の指定

head要素

文字コード指定

title

CSS設定

外部ファイル指定

CSSの直接記述

PHP – クエリによる結果の取得