今日の講義内容

  1. コメントアウトについて
  2. CSSの読み込み方について
  3. FTPサーバーについて
  4. FFFTPの基本的な使い方

講義の内容と参考サイトからの内容をまとめました。

覚えておくとgood! コメントアウトのタグ

表記の仕方 ・・・ <!–○○○○–>

○○○○に記入したコメントはwebサイト上では表示されない。
表示はしないがメモやコメントを記しておきたいときに使う。
(例)
消してほしくないタグの側にコメントしておく
確認してほしい箇所につける、など

CSSの読み込み方について

CSSの読み込み方(書く方法)は、次の3パターンがある。
それぞれにメリット・デメリットがあるため、場合によって組み合わせるなどして書くと良い◎

①外部ファイル

CSSファイルを外部ファイルとして別で作り、HTMLから外部ファイルを読み込む方法。
このCSSファイルを「外部スタイルシート」または「外部CSS」という。
後で編集しやすいメリットがあり、webサイトを作るときは一般的にこの方法をとることが多い。

②styleタグ

HTMLファイルのheadタグ内に、<style>~</style>タグを書き、その中にCSSを書く方法。

③style属性を使う

HTMLのタグにstyle属性を書く方法。
シンプルなHTMLや、文字にサッと色をつけるなどちょっとした変更には便利だが、タグに書き込む必要があり、少し手間がかかる。
後からまとめてデザイン変更することもできない。

<参考>classとidについて

style属性の例として、「class」と「id」がある。この二つは似ているが、使い分けが異なるので気を付けること!
詳細については、今後のCSS授業で触れる予定。

class 同じclass名を1ページ内に何回でも使える。(h2見出しは文字色赤、といった指定の仕方など)
id 同じid名は1ページ内に1度しか使えない。(ページの下部からトップに戻るためのリンク、といった固有の指定)

CSSは基本的には外部ファイルで作成すること。
1ファイルにまとめるのが良いが、管理や運営の仕方によっては使い分けること。

FTPサーバーについて

FTP(ファイル転送プロトコル)を使用してファイルの送受信を行うサーバーのこと。
有名なFTPソフトのひとつにFFFTP(windouz版のみ)がある。

FFFTPの基本的な使い方

設定

FFFTPを開き、「接続」をクリック。
「新規ホスト」を選択。

FFFTPの説明

「基本」タブを開き、次の項目を入力。

  • ホストの設定名・・・自分がわかりやすいもの。任意の名前でOK。
  • ホスト名・・・レンタルサーバーから割り当てられたFTPサーバー名
  • ユーザー名・・・レンタルサーバーから指定されたFTPユーザー名
  • パスワード・・・設定したFTPパスワード
  • ローカルの初期フォルダ・・・パソコン側の、ホームページ用のデータが入っている場所(フォルダ)。
  • ホストの初期フォルダ・・・レンタルサーバー側の初期フォルダ。最初は空白でOK。
FFFTPの説明

「暗号化」タブを開き、次の項目のチェックをはずす。

  • 暗号化なしで接続を許可
  • FTPS(Implicit)で接続

「OK」をクリック。

接続

ホストが選択されていることを確認して「接続」をクリック。
暗号化の状態は保持「はい」をクリック。

画面の説明

左:ローカル(パソコン側)のフォルダが表示される。
右:サーバー側のフォルダが表示される。

FFFTPの説明

アップロード

パソコン側のアップロードしたいファイルを選択し、アップロードアイコンをクリック。

FFFTPの説明

アップロードミスを防ぐために! 「フォルダ同時移動」機能を活用

アップロードの際、アップロードする階層を間違えるなどのミスを防ぐために「フォルダ同時移動」機能を使うと良い◎

FFFTP メニューバーの「コマンド」をクリックし、「フォルダ同時移動」にチェックを入れる。

FFFTPの説明

パソコン側とサーバー側のフォルダ開閉が連動するようになるので、階層間違いが防げる◎

【参考サイト】

初心者のためのFFFTPの基本的な使い方。注意点などを交え初期設定から解説