garan – デザインの学校

すべての記事

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

キッズ向けプログラミング教室
小学生を対象としたキッズ向けプログラミング教室を随時開催しております。

子ども向けプログラミング言語スクラッチ(Scratch)を使ったゲームプログラミングを行います。
所要時間は1時間程度です。
ご参加をお待ちしています！
※保護者様同伴でのご参加となります。

【対象年齢】
- 小学校1年生～6年生
【学習内容】

MITメディアラボが開発した子ども、初心者向けのプログラミング言語学習環境のスクラッチ(Scratch)を利用します。
- パソコン操作説明
- キャラクター（ネコ）を動かそう
- ネズミが猫から逃げるゲームを作ろう
【スクラッチ（Scratch）とは？】

アメリカのマサチューセッツ工科大学（MIT）メディアラボのライフロング・キンダーガーテングループが作った初心者向けのプログラミング言語学習環境です。

ウェブ上で自由に使うことができて、自分だけのゲームやアニメーションをだれでも作ることができます。
作った作品はほかの人に公開することができ、ほかの人が作ったゲームを見たり、遊んだりすることもできるよ。

小さなお子様連れでもお気軽にご参加ください
席数に限りがございますので、満席の際はご参加いただけない場合がございます。
日程外でも教室を体験いただけます。お気軽にお問い合せください。

お問い合わせ
お名前 (必須）

メールアドレス (必須）

題名

メッセージ本文
garan

2018年2月20日

コース
FTPソフトの設定方法

FFFTPの初期設定

FFFTPを起動する

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

[新規ホスト]を選択

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

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

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

ホストの設定名(T)

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

ホスト名(アドレス)

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

ユーザ名(U)

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

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

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

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

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

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

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

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

FTP接続設定

FTPSサーバに接続

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

ファイル一覧の表示

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

ファイルの操作

ファイルのアップロード

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

ファイルのその他の操作

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

ダウンロード(D)

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

削除(R)

ファイルを削除します。

属性変更(A)

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

garan

2015年5月6日

FTP関連
サーティファイ認定試験

資格取得によるあなたのスキルアップを応援します！
イラストレーターやフォトショップ、WebクリエイターなどDTP・WEB分野の資格取得が可能です。

※Webクリエイター能力認定試験は、テキストエディタを使用しての受験となります。

受験を希望されるかたは日程などをお電話にてご確認の上、弊社まで申し込みをお願いいたします。
なお、ご自身の都合にて試験を受験できなかった場合でも、返金や試験日を振り替えることはできませんので、ご了承願います。

garan

2014年9月16日

index
HTML文書を作成する

HTML文書を作成する際の基礎中の基礎をまとめてみました。
HTML4,XHTML,HTML5の違いを簡単説明しています。
(さらに…)

garan

2013年11月18日

コラム, Web (html,css)
Internet Explorer が起動しなくなった場合の処置方法

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

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

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

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

参考：Microsoft サポート

garan

2013年9月16日

windows
ブロックレベル要素とインライン要素
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>
```
garan

2013年9月15日

Web (html,css)
HTMLタグリファレンス

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

garan

2013年9月14日

Web (html,css)
タグやスタイルシートの読み方：タグ編

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

garan

2013年9月14日

コラム, Web (html,css)
これからWebサイト制作をはじめる人のために
Webサイトを作るはどうしたらいいの？

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

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

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

サイト制作の流れ

Webサイトの制作は、大きく以下のような流れで進行します。
1. 打ち合わせ（ヒアリング）
  希望するWebサイトの完成イメージや夢を聞く
2. サイト設計、制作の段取りを考える
  Webサイト全体の設計、文字要素の整理、各種素材の手配、ワイヤーフレームの作成、Webサイト完成像の共有
  ※2.3.4は並行作業
3. 撮影、取材
  写真撮影、原稿作成、ナレーション収録など、その企画に必要な素材の収集
4. 素材の加工
  情報の整理、写真や映像の撮影・編集・加工など
5. ビジュアルデザイン
  Webサイトの見た目をデザインする
6. マークアップ、プログラミング
  HTML、CSS、JavaScriptやPHPなど、各種言語でWebサイトを制作する
7. プレビュー・検証・修正
  実際にWebサーバーに置いて確認、修正
8. 公開
上記の流れをもとに、Webサイトの制作について説明をしていきます。
garan

2012年11月6日

コラム, 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; /* ※を「-(マイナス)」方向に寄せる */
}
```
garan

2012年9月24日

コラム, Web (html,css)