デザインの学校

東海村のパソコンスクール ~デザインの学校~

gBase

すべての記事

投稿が見つかりませんでした。

  • FTPソフトの設定方法

    FFFTPの初期設定

    FFFTPを起動する

    ftp_icon
    デスクトップのショートカットアイコンなどから[FFFTP]のアイコンをダブルクリックし、ソフトを起動します。


    [新規ホスト]を選択

    ftp01


    「ホスト一覧」ウィンドウが開くので、[新規ホスト(N)…]をクリックします。


    「ホストの設定」画面でアカウント情報を入力

    ftp02


    「ホストの設定」ウィンドウが開きます。ここで必要な情報を入力します。
    FTPサーバー、FTP・WebDAVアカウント、FTP・WebDAVパスワードは、レンタルサーバー会社などから提供された「アカウント情報」に記載されています。
    ※不明の場合には、レンタルサーバー会社にお問い合わせください。

    ホストの設定名(T)

    設定名を入力します。
    一覧表示に用いられるのみなので、ご自身が分かりやすい名前でかまいません。

    ホスト名(アドレス)

    「FTPサーバー」を入力します。

    ユーザ名(U)

    「FTP・WebDAVアカウント」を入力します。

    パスワード / パスフレーズ(P)

    「FTP・WebDAVパスワード」を入力します。

    ローカルの初期フォルダ(L)

    作成したホームページデータのあるディレクトリを指定します。任意です。

    ホストの初期フォルダ(R)

    サーバー側にあるディレクトリを指定します。ここで指定したディレクトリがサーバー側のファイル一覧で最初に表示されます。
    こちらも任意です。

    設定が終わりましたら、「ホストの設定」ウィンドウの[OK]ボタンをクリックします。以上で初期設定が完了しました。次の設定にお進みください。


    FTP接続設定

    FTPSサーバに接続

    ftp04


    「ホスト一覧」ウィンドウに、先ほど設定した項目名[伽藍堂]が追加されています。これを選択し、[接続(S)]ボタンをクリックします。


    ファイル一覧の表示

    ftp03


    接続に成功すると、上図のウィンドウが開きます。
    左の枠に、先ほど設定した「ローカルの初期フォルダ」内のファイル一覧が表示されています。右の枠に、FTPサーバー内のファイル一覧が表示されています。
    (先ほど「ホストの初期フォルダ」を指定していれば、そのディレクトリ内のファイル一覧が右の枠に表示されます)
    以上でFTP接続完了です。次の項目にお進みください。


    ファイルの操作

    ファイルのアップロード

    左の枠から転送したいファイルを選択し、右の枠にドラッグ&ドロップします。


    ファイルのその他の操作

    ftp05


    右の枠内の対象ファイルを右クリックする事で各操作が可能です。

    ダウンロード(D)

    ファイルをダウンロードします。

    削除(R)

    ファイルを削除します。

    属性変更(A)

    パーミッションを変更出来ます。

  • HTML文書を作成する

    HTML文書を作成する際の基礎中の基礎をまとめてみました。
    HTML4,XHTML,HTML5の違いを簡単説明しています。
    (さらに…)
  • Internet Explorer が起動しなくなった場合の処置方法

    Internet Explorer が起動しなくなった場合の処置方法

    IEにエラーが発生し、起動しなくなった場合など、下記の手順でで元通りにする事が可能です。

    マイクロソフトが専用のFixツールを公開しています。
    Microsoft Fix it

    上記リンクで配布されている[Fix it]ツールを実行すると、Cookie・フォーム データ・パスワード・Web ページの履歴などの削除、ブラウザアドオンの無効を一気に行うことが可能です。

    それでも問題が解決されなかった方場合は「その他の解決法」参照してみてください。

    参考:Microsoft サポート

  • ブロックレベル要素とインライン要素

    ブロックレベル要素とインライン要素

    ブロックレベル要素とインライン要素

    HTMLで定義されている要素のうち、~の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。

    ブロックレベル要素(Block-Level Elements)

    ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

    ブロックレベル要素には、以下のものがあります。

    <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、
    <noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
    

    インライン要素(Inline Elements)

    インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

    インライン要素には、以下のものがあります。

    <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、
    <dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、
    <samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、
    <tt>、<u>、<var>
    

    配置ルール

    ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。

    正:ブロックレベル要素の中にインライン要素を配置
      <p><strong>段落となります。</strong></p>
    
    誤:インライン要素の中にブロックレベル要素を配置
      <strong><p>段落となります。</p></strong>
    
  • HTMLタグリファレンス

    Webコーディングをするときによく使うタグについてまとめてみました。
    (さらに…)

  • タグやスタイルシートの読み方:タグ編

    Webコーディングをするときによく使うタグやスタイルシートの読み方についてまとめてみました。
    (さらに…)

  • これからWebサイト制作をはじめる人のために

    これからWebサイト制作をはじめる人のために

    えだ先生めぐ先生Webサイトを作るはどうしたらいいの?

    今から Web制作をしてみたいっていう人の中には、何を勉強すればいいのか戸惑っている人もいるみたいですね…
    これから Web制作を勉強するにあたって、どんなことをどんな順番で勉強したらいいのか…必要な知識を簡単にまとめてみました。

    自分のブログをたちあげたい…
    お知り合いのお店のホームページを作りたい…

    目的を達成するために様々な視点からWebサイトを検討する必要があります。

    サイト制作の流れ

    Webサイトの制作は、大きく以下のような流れで進行します。

    1. flow01打ち合わせ(ヒアリング)
      希望するWebサイトの完成イメージや夢を聞く
    2. flow02サイト設計、制作の段取りを考える
      Webサイト全体の設計、文字要素の整理、各種素材の手配、 ワイヤーフレームの作成、Webサイト完成像の共有
      ※2.3.4は並行作業
    3. flow03撮影、取材
      写真撮影、原稿作成、ナレーション収録など、その企画に必要な素材の収集

    4. flow04素材の加工
      情報の整理、写真や映像の撮影・編集・加工など
    5. flow05ビジュアルデザイン
      Webサイトの見た目をデザインする
    6. flow06マークアップ、プログラミング
      HTML、CSS、JavaScriptやPHPなど、各種言語でWebサイトを制作する
    7. flow07プレビュー・検証・修正
      実際にWebサーバーに置いて確認、修正
    8. flow08公開

    上記の流れをもとに、Webサイトの制作について説明をしていきます。

  • CSSのtext-indentを使ってぶら下がりインデントを表現する方法(一行目を前に出す方法)

    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    これを…

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    こう書きたい!

    注意書きなどを記述する時に頭に「※」マークなどをつけて

    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

    などと書きますが、文章が長くなると自動的に折り返されて「※」マークの下に文字が続いて書かれてしまいます。こんな時「※」だけ前に出ていたらいいな…と思うことがよくあります。これをCSSで設定することができます。

    CSS 記述例)
    p{
    	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
    	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
    }
    

    さらに応用
    ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    ※MOT所有者、インストラクター経験者優遇

    上記のように項目が2個以上の場合、リストタグを使って表記することがあります。

    表示例) ul li をそのまま記述

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    • ※MOT所有者、インストラクター経験者優遇

    表示例) CSS の text-indent を使って ul li をインデント(字下げ)

    • ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
    • ※MOT所有者、インストラクター経験者優遇
    CSS 記述例)
    ul.hedge li{
    	list-style-type:none; /* li で表示される「・」を非表示にする */
    	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
    	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
    }
    
  • HTMLの基本

    HTML

    HTML(HyperText Markup Language)は、Webページを構成する言語の1つです。コンピュータがその文書の構造を理解することで、検索エンジンがウェブページの構造を把握して解析したり、Internet Explorer(IE)やGoogle Chromeなどといったwebブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。

    XHTML

    XHTML(Extensible HyperText Markup Language)はHTMLを、XMLに適合するように定義し直した言語です。HTMLと違い、タグの省略が許されない、空白は と記述しなくてはいけない、などとより細かな規定ができました。XHTMLは文書構造の指定に特化しており、スタイルやレイアウトの指定はすべてCSSによって行います。

    HTML5

    HTML5はHTMLの5回目に当たる大幅な改定版です。HTMLやXHTMLでは複雑だった処理(例えば動画や音声、グラフィックの描画など)が出来るようになりました。(正式な勧告がまだなのすが…HTML5は、まだ発展途上です・汗)

    HTMLのタグについてはこちらの記事をお読みください>>

  • はじめてのWebデザイン

    えだ先生めぐ先生ホームページ作成に役立つものとか、気になったものを紹介していきます。

    一口にwebデザインといっても色々なことがあります。
    大きく分けて”ビジュアルデザイン(見た目)”と”技術的なこと”の2つに別れるかと思います。
    今回は”技術的なこと”を紹介していきます。

    とりあえず用意するもの

    ホームページビルダーやDreamweaverのようなHTML編集用ソフト(オーサリングツール)があればとても便利ですが、持っていなくても大丈夫!
    まずは以下の2つを用意してください。用意するっていってもほとんどのPCにはじめから入っています。

    パソコン(PC)

    パソコンこれは言わずもがなですね・笑

    PC本体は、WindowsでもMacでもお好みで用意してください。
    ノートパソコンでもデスクトップパソコンでもどちらでも大丈夫です。
    web制作が目的であればそれほど値段の高い(=性能のよい)PCは必要ありません。

    映像編集や印刷用データ作成(DTP)などもやりたい場合にはそれなりの性能のものを選んだほうがよいでしょう。

    テキストエディタ(メモ帳)

    Windowsは「スタート」→「プログラム」→「アクセサリ」→「メモ帳」
    Macは”CotEditor”をダウンロードしてください(もちろん自分の使いやすいエディタでもOK)

    僕はTeraPadというテキストエディタを使用しています。

    webブラウザ

    webブラウザとはインターネットをするソフトです。今まさに開いているこのソフトがブラウザです。種類はInternet Explorer(IE)、Google Chrome、Safari、firefox、etc…。
    ※拡張子が非表示の設定をしている方は表示する設定にしておきましょう。

    持っているとよいもの

    グラフィックス系ソフト

    HTML編集用ソフト

    ホームページビルダーやAdobe Dreamweaverなど

    画像編集ソフト

    Adobe Illustrator、Adobe Photoshopなど

    その他必要に応じて

    • Adobe FlashやAdobe Premiereなど、アニメーションや動画編集ソフト
      現在では、Adobe Creative Cloudという製品パッケージがありますので、予算に余裕があれば購入しておくとよいかも。
    • タブレットPCやスマートフォン(スマフォ)
      現在ではモバイルファーストなんて言葉もあるくらい、スマフォ等を使用している人が多いので、ホームページもスマフォ対応を求められます。制作したホームページの確認用に持っておくとよいでしょう。

    PCやソフトは新しい物の方が、より色々なことができるようになっていますので、便利ですが、特に最新のものでなくても大丈夫です!
    学生の方なんかはアカデミック版のような、学生優待価格で購入できるものもあるので、調べてみるとよいですよ。

    ※Adobe製品が多いですけど、決してAdobeのまわし者ではありません・汗

お問い合わせ

以下よりお気軽にお問い合せください。