-
StyleNote5 ダウンロードから基本の使い方まで
公開日:2017年12月07日 最終更新日:2019年09月26日
「StyleNote」のダウンロードから基本的な使い方までを解説します。「StyleNote」は、HTMLやCSSなどの入力補完機能、オートコンプリート機能、カラーコード挿入、ブラウザープレビュー機能などホームページ作成に便利な機能をたくさん備えたテキストエディターです。
目次
1. 「StyleNote」の圧縮ファイル(sn522.zip)をダウンロードする
「StyleNote」の圧縮ファイルは、開発元のダウンロードサイトもしくは、Vectorからダウンロードする事ができます。
●「StyleNote」公式ページのダウンロードサイト:
https://sn.lowedge.com/dl/●Vectorのダウンロードサイト:
https://www.vector.co.jp/soft/winnt/net/se264071.html「StyleNote」の公式サイトのダウンロードページより最新バージョンの「StyleNote ver 5.22」をダウンロードします。 「DOWNLOAD NOW」のリンクをクリックして、圧縮ファイルの「sn522.zip 」をダウンロードします。
圧縮ファイル(sn522.zip)の保存場所は任意で構いませんので、ローカルPCに保存して下さい。●sn522.zip
2. ダウンロードした「StyleNote」の圧縮ファイル(sn522.zip)を解凍する
「StyleNote」は、PCへのインストールをしなくても圧縮ファイルを解凍するだけでテキストエディターを利用する事ができます。ダウンロードした「StyleNote」のインストールファイル「sn522.zip」を右クリックして、メニューから[すべて展開(T)...]を選択します。
●圧縮(ZIP 形式)フォルダーの展開
「圧縮(ZIP 形式)フォルダーの展開」ウィンドウが開いたら、「StyleNote」を解凍するフォルダーの選択をします。ダウンロードしたフォルダーに実行ファイルなどを解凍する場合はそのままで構いません。変更する場合は、「参照」ボタンを押して、解凍先のフォルダーを選択し、「展開」ボタンをクリックして下さい。
●「sn522」フォルダー
解凍したフォルダーの名前は「sn522」になります。次の章でテキストエディターを起動して、HTMLコードを記述してみましょう。
3. StyleNoteの起動と使い方
3.1. StyleNoteを起動させる
先程解凍した「sn522」フォルダーを開くと、「resources」フォルダーや「readme.txt」ファイルなどがいくつかありますが、「sn5.exe」アイコンをダブルクリックすると、テキストエディターを起動する事ができます。
●「sn522.exe」アイコン
「StyleNote」は圧縮ファイルを解凍しただけですので、デスクトップやスタートメニューにショートカットアイコンが作成されません。
「StyleNote」を起動する為のショートカットアイコンをデスクトップ上に作成した場合は、「sn522」フォルダー内の実行ファイル「sn522.exe」を右クリックし、右クリックメニューから「ショートカットの作成」を選択します。●[sn522.exe- ショートカット]
実行ファイルと同一フォルダーに「sn522.exe- ショートカット」アイコンが作成されます。ショートカットアイコンを[切り取り(カット)]&[貼り付け(ペースト)]でデスクトップにアイコンを作成します。
デスクトップに作成した「StyleNote」のショートカットアイコンをダブルクリックし、エディターを起動してみましょう。
●「StyleNote」
3.2. StyleNoteを使ってみよう
「StyleNote」には、HTMLやCSSの入力補完機能の他、カラーコードの挿入など便利な機能がありますが、本コラムでは、HTML本文に画像を挿入してみましょう。
まずは、「Sample.html」を記述、またはコピーして新規のHTMLファイルを保存して下さい。
●Sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML入門</title>
</head>
<body>
<h1>見出しです</h1>
</body>
</html>
HTMLファイルを保存すると、テキストエリアに加えて左側にプレビュー画面が表示されます。
●[StyleNote]
8行目に画像を挿入するHTMLコードを作成します。
蝶のアイコンの右側の三角矢印をクリックしてメニューから「画像<img>」を選択します。
●[画像<img>]
画像を選択・設定するウィンドウが表示されますので、「参照」ボタンをクリックして、挿入する画像ファイルを選択します。
●[画像<img>]
画像ファイルを選択したら、その他の設定をしてみましょう。
●[画像<img>]
今回は「サイズの指定」のチェックを入れてみます。サイズは「100×100」に指定します。「OK」ボタンを押すとコードが自動で挿入されますので確認してみて下さい。
●[画像の挿入]
HTMLファイルを上書き保存すると、左のプレビュー画面も更新されて挿入した画像が表示されました。
関連記事:【初心者におすすめ】テキストエディター15選!
関連記事:【初心者におすすめ】無料HTMLエディター15選!
関連記事:フリーエディター(gPad)のインストール
関連記事:初心者のためのHTML入門
関連記事:HTML学習におすすめのオンラインサイト
関連記事:HTML&CSS 学習者におすすめの本 10選最新案件情報をチェック!
おすすめ記事
-
HTML入門:<img>タグで画像を表示させてみよう~
HTML入門:<img>タグで画像を表示させてみよう~
1. 画像を表示してみる 1.1 <img>タグ HTMLで画像を表示するには、<img>タグを使い...
-
CSSでヘッダーとフッターを固定して表示する方法
CSSでヘッダーとフッターを固定して表示する方法
CSSのみでウェブページのヘッダーとフッターを固定して表示させる方法について解説します。 目次 ...
-
CSSレイアウトをFlexboxで作成する方法
CSSレイアウトをFlexboxで作成する方法
CSSのボックスレイアウトを「float」プロパティを使わずにCSS3の「flexbox」を使って調整する方法につ...
-
-
ピックアップ
フリーランス
【Ruby】サーバーサイドエンジニア★EC在庫管理システムの開発
月額単価 :60万円〜70万円
EC(業種問わず)のリサーチ機能や出荷管理、在庫管理など、販売者の効率化を促進するシステムのサーバ...
正社員
【Java】システムエンジニア|Webサービスの設計・開発
年収 :350万円〜550万円
【仕事内容】 システムエンジニアとしてWebサービス系、業務系アプリケーションの要件定義、設計、開発...
株式会社日本ビジネス開発
フリーランス
【PHP】サーバーサイドエンジニア★オウンドメディアの構築
月額単価 :50万円〜60万円
PHPを用いたオウンドメディア構築支援のサーバーサイド開発を担当して頂きます。 複数案件が並行して...