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選

    最新案件情報をチェック!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...