システム学院
 

AptanaStudioでの開発でEmmetは欠かせない。

最大限に効率を上げるためによく使われる省略記号を列挙しておく。

html

! <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><title>Document</title></head>

<body>

 

</body>

</html>

 link:css <link rel=”stylesheet” href=”style.css” />
 a  <a href=””></a>
 a:link  <a href=”http://”></a>
 br  <br />
 hr <hr />
hdr <header></header>
ftr <footer></footer>
mn  <main></main>
 ol+ <ol>
<li></li>
</ol>
ul+ <ul>
<li></li>
</ul>
table+ <table>
<tr>
<td></td>
</tr>
</table>
tr+ <tr>
<td></td>
</tr>

 css

Visual&Formatting
pos:a position: absolute;
 pos:r  position: relative;
t  top: ;
 t:a  top: auto;
 r  right: ;
 r:a  right: auto;
 b  bottom: ;
 b:a  bottom: auto;
 l  left: ;
 l:a  left: auto;
 fl  float: left;
 fl:n  float: none;
 fl:r  float: right;
 cl  clear: both;
 d:b  display: block;
 d:i  display: inline;
 d:ib  display: inline-block;
 v  visibility: hidden;
 v:v  visibility: visible;
 ov  overflow: hidden;
 zoo, zm  zoom: 1;
 Margin&Padding
 m  margin: ;
 m:a  margin: auto;
 mt  margin-top: ;
 ml:a  margin-left: auto;
 mr:a  margin-right: auto;
 p  padding: ;
 font
 f  font: ;
 f+  font: 1em Arial,sans-serif;
 fw  font-weight: ;
 fw:b  font-weight: bold;
 fz  font-size: ;
 ff:a  font-family: serif;
 Text
 va  vertical-align: top;
 va:m  vertical-align: middle;
 va:b  vertical-align: bottom;
 va:bl  vertical-align: baseline;
 ta  text-align: left;
 ta:l  text-align: left;
 ta:c  text-align: center;
 ta:r  text-align: right;
 ta:j  text-align: justify;
 td  text-decoration: none;
 tsh:ra  text-shadow: h v blur rgba(0, 0, 0, .5);
 BackGround
 bg  background: ;
 bg+  background: #fff url() 0 0 no-repeat;
 bgi  background-image: url();
 bgr  background-repeat: ;
 bgr:n  background-repeat: no-repeat;
 bgr:x  background-repeat: repeat-x;
 bgr:y  background-repeat: repeat-y;
 Color
 c  color: #000;
 c:r  color: rgb(0, 0, 0);
 op  opacity: ;
 Tables
 tbl  table-layout: ;
 tbl:f  table-layout: fixed;
 Border
 bd  border: ;
 bd+  border: 1px solid #000;
 bds:n  border-style: none;
 Lists
 lis  list-style: ;
 lis:n  list-style: none;

 

AptanaStudioだけでも開発の効率がよいのにemmetを導入するとさらに高効率が期待できる。
AptanaStudioが日本語化されていると仮定して以下を実行する

AptanaStudioへEmmetを導入するには
1. メニューの「ヘルプ」|新規ソフトウェアのインストール
2. 作業対象:「Emmet – http://emmet.io/eclipse/updates/」と入力|追加ボタンをクリック
3. リポジトリー|名前:「emmet」と入力|「ローカル」をクリック
4. ロケーション:「http://emmet.io/eclipse/updates/」と入力|アーカイブをクリック|OKボタンをクリック
5. インストール|すべて選択をクリック|次へをクリック|
6. 同意しますを選択
7. 完了をクリック
メニューバーに「emmet」が表示されれば導入の成功

まずはこのアドレスからインストールファイルを保存します。
http://www.aptana.com/index.html

WS000000

AptanaStudio3

ページ内の次のボタンからファイルをダウンロードします。

WS000001

ダウンロードボタン

ダウンロードが始まらない場合はclick here の文字をクリックします。

WS000002

click here

 

設定|テーマ

設定|テーマ

Aptana Studioのエディタではコメント文などキーワードの色を自由に変えることができる。
ウィンドウ|設定|テーマ
の順で自由に変えられます。

 

 

 

 

 

 

 

 

今回のホームページではディタとしてAptanaStudioを使うことにしました。

このエディタは日本語化されていないので、まずは日本語化から開始です。

今日はとりあえずエディタの設定とホームページのアップです。

今後、さらに見やすいページに改造していきます。