Expression Web 4を使ってコード入力でページを作成する時、登録しておくと便利なスニペット

カーソル位置に挿入する場合は、登録時に、挿入方法に置き換えるを選択します。カーソル位置に指定したコードが挿入されます。選択している場合は、置き換わります。

もう1つの指定方法は、コードが選択範囲の前後に挿入されます。選択していない場合は、カーソル位置にそのまま挿入されます。登録方法に、囲むを選択すると選択した場所の前に挿入するコードと後ろに挿入するコードを入力する枠が現れます。

記事中で、htmlやcss、あるいは、プログラミング言語のコードを掲示する際、コードを色分けしたい時があります。その際に、私は、「google-code-prettify」を使用しています。

google-code-prettifyのJavaスクリプトをheadタグ内に入れておき、記事内で、シンタックス・ハイmaライトを適用したいコードを<pre class="prettyprint">と</pre>の間に記述します。

コードの例

表示の例

<!-- html -->
<div class="SideBySide">
 <p><img src="画像のファイル名" alt="画像の説明"></p>
 <p>テキストを配置<p>
</div>

改行もスペースもタブも無視されずに表示されます。 また、html内で使用するため、「<」「>」「&」は エスケープ・シーケンス「&lt;」「&gt;」「&amp;」で表現する必要があります。

<pre class="prettyprint"><code>|</code></pre>

ハイパーリンクを挿入機能がありますが、コード入力からは、機能が有効なときもありますが、無効ときが大いのでその場合は、デザイン入力側から入力する必要があります。コード側では、文字を選択し、デザイン入力に変更して、ハイパーリンクの挿入を使う必要があります。

サイト内のリンクで相対パスで指定する場合は、自動で相対パスの位置が変更されるので便利ですが、ほかのサイトのURLを絶対パスで指定する場合は、ハイパーリンクの挿入機能は、タブで切り替えるデザインモードに移行する必要があるので面倒です。そこで、スニペットの挿入機能で、リンクタブを入力すると便利です。（emet入力アドインが存在していたようなのですが、現時点での入手先は不明なので使えません。そのため、スニペット挿入機能で、リンクタグ（aタグ）をスニペットで挿入すると便利です）

<a href="|">

</a>

合わせて、別のタブで開くリンクも登録しておきます。

<a target="_blank" href="|">

</a>

囲み枠も登録します。文書で注釈を入れる時に使用します。色を変えていくつか登録しておきます。使う用途ごとに同じ色を使うと統一感を演出できます。

<div class="title-boder-up-lightblue">注釈</div>
<div class="title-boder-bottom-lightblue">

</div><!-- title-boder-bottom-lightblue -->

cssを使ってスタイルを指定しています。

/* タイトル付き枠 */

  /* 水色 注釈 */
  .title-boder-up-lightblue{
  color: #fff; 
  background: #6ab0de;
  margin-top: 10px;
  padding-left: 10px;
  text-indent: 0;
  }
  
  .title-boder-bottom-lightblue{
  border: 2px solid #6ab0de; 
  background: #e7f2fa; 
  margin-bottom: 0 10px;
  padding: 0 10px;
  }
  
  .title-boder-bottom-lightblue ul{
    margin: 0;
  }

囲み枠は、いろいろな表現があります。cssを使って、いろいろな囲み枠を表現できます。

<!-- 黄色の２重線の角丸囲み枠 -->
<div class="double_roundbox_yellow">

</div>

cssを使ってスタイルを指定しています。

/* 黄色の２重線の角丸囲み枠 */
.double_roundbox_yellow{
  border: double Orange 10px; 
  border-radius: 20px;
  padding: 10px;
  border: 10px;	
}

囲み枠は、穏やかに協調するさいに適しています。いろいろな、スタイルの囲み枠を活用しましょう。

文字の色やスタイルを使って、文章内の文字を修飾するために使用します。あまり多くのスタイルを使わずに、いくつか決まったスタイルを使用したほうがすっきりしたデザインになります。そのためには、属性を直接指定せずに、スタイルをクラスにまとめ、クラスでスタイルを指定します。

赤文字

<span class="FontColorRed">

</span>

cssを使ってスタイルを指定しています。

蛍光ペン

<span class="marker_yellow">

</span>

cssを使ってスタイルを指定しています。

/* 蛍光ペンのような文字装飾 */

/* 黄色の蛍光ペン */
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

ショートカットキーの囲み

Ctrl+C[コピー](Copy)のような、ショートカットキーなどのキー入力を表す時に使う文字の囲みです。

<span class="key-border">

</span>

cssを使ってスタイルを指定しています。

/* ショートカット・キーの枠 */
.key-border{
border-style: solid; 
margin: 0 5px; 
border-width: 1px; 
padding: 0 3px; 
border-radius:5px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;
}

テキストを配置

<div class="clearfix">
	<div class="inner clearfix">
	<!--画像はここに貼り付けます-->
    </div>	
	<p>|</p>
</div>

cssを使ってスタイルを指定しています。

img { /* 画像は、画面サイズに合わせて変化させます。 */
  max-width: 100%;
  height: auto;
}

/*clearfix*/	/* 回り込みを終了します。 */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;	
}