四季の移り変わり
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る、そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。

日本の春
「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。

日本の夏
夏は、四季のひとつで、春と秋にはさまれた季節。天文学的には夏至から秋分まで。太陽暦では6月から8月を指し、陰暦では4月から6月となる。四季の区分のある土地では最も気温の高い、3ヶ月程度の期間である。北半球ではグレゴリオ暦の6月 - 8月ごろ、南半球では12月 - 2月ごろである。
日本で炎天下に咲く花としてはヒマワリやサルスベリが有名。夏の風物詩としてはアサガオも代表格。

日本の秋
普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。

日本の冬
黒姫山は斑尾山、妙高山、戸隠山、飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説（黒姫伝説）があり、山名の由来になったと言われている。冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。

2022-12-16

動画データをhtmlで再生させる

HTML基礎

www.ditjapan.com

まずはhtmnl5のvideoタグのプロパティを覚えましょう

src="" 　　　(URL)ファイルのURL
height="" 　数値要素の高さ
width="" 　　　数値要素の幅
autoplay="" autoplay 自動的に再生を行います。
controls="" controls 動画再生をコントロールするUIを表示します。
loop="" 　　loop 動画を繰り返し再生します。
metadata 動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
poster="" (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
muted 　　動画に音声がついている場合、音を出さない設定にできます。
mediagroup="" 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。

2022-12-15

コーポレートサイトの制作

CSS基礎

使用するテキスト

Net Smart
よりスマートなインターネットライフを


HOME
CONCEPT
SERVICE
ACCESS


必要なものは、
ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、
関係性を構築するためのストーリーの設計とUXデザインをご提供し、
よりスマートなインターネットライフを送るお手伝いを致します。


CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

logostock.jp

2022-12-12

無料レンタルサーバーの取得とデータのアップロード

webサイト制作

制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。
サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。
webサイト制作においてサーバーは必須のものです。今のうちからサーバーへのアップロードに慣れておきましょう。

無料レンタルサーバーは世の中に沢山ありますが、授業では「スターサーバーフリー」を使用します。また、「xfree」という無料レンタルサーバーもスターサーバーと同程度の機能が備わっているので、余裕のある人は「xfree」も契約しておきましょう。
（※無料で機能を拡張できるオプションサービスは「PHP・MySQLオプション」と「容量増加オプション」の２つ用意されていますが、必ず「PHP・MySQLオプション」を選びましょう。）

無料レンタルサーバー - スターサーバーフリー

www.star.ne.jp

無料レンタルサーバー【XFREE(エックスフリー)】

www.xfree.ne.jp

www.kagoya.jp

FTPソフトのインストール

制作したデータをサーバーにアップロードするには「FTPソフト」が必要になります。
windowsであれば「winSCP」は非常に使いやすいFTPクライアントソフトウェアで、初心者にとってはまず最初に使ってみるべきＦＴＰソフトです。

FTPとは

FTP（File Transfer Protocol）とは、ネットワーク上でファイル等の転送を行う通信プロトコルの1つです。
FTPは、インターネット初期から存在する古いプロトコルであり、セキュア（安全）なプロトコルとして設計されていない。ユーザ名やパスワードなどの認証情報を含むすべての通信内容を暗号化せずに転送するなどの問題の他、数多くのセキュリティ脆弱性が指摘されている。

WinSCP

WinSCPは、MS-Windows上で動くオープンソースでグラフィカルなFTP、FTPS、SFTPクライアントプログラムです。旧来のSCPプロトコルもサポートします。このプログラムの主な機能は、ローカルコンピューターとリモートコンピュータ間で安全にファイルをコピーすることです。これに加え、WinSCPはスクリプトと基本的なファイルマネージャー機能を提供します。
ja.osdn.net

techacademy.jp

FTPの設定

FTPソフトとデータをアップロードするサーバーを紐付けする必要があります。
紐付けに必要な情報はレンタルサーバーのFTPアカウントに記載されています。
必要な情報は、

FTPホスト名
FTPユーザー名
FTPパスワード

の３つです。

macユーザーの場合

winSCPはwindowsでしか使用出来ないため、macユーザーは他のFTPソフトを使いましょう。

https://cyberduck.io/index.ja.html?l=ja

techacademy.jp

2022-12-08

Flexboxの使い方

CSS基礎

Flexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。これを使う事でfloatを使って作っていたレイアウトが感覚的に作れるようになります。

視覚で見るのが非常に解りやすいです。
www.youtube.com

メリット

少ない記述で簡単に横並びにできる！
横並びになった要素の高さが最初から揃ってる！
要素を上下左右、好きな順序に並び替えられる！
高さの異なる横並びの要素を、簡単に上下中央揃え！

などなど、本来CSSでは出来ずにjQueryなどで行っていた事が非常に簡単に出来るようになります。

Flexboxの基本

flexboxレイアウトを使うには親要素のdisplayプロパティに「flex」を指定するだけです。今回は「ul」要素を使います。

ul {
  display: flex;
}

flex-direction

「flex-direction」プロパティを設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flex-direction: row;　で左から右
　　　　　　　row-reverse;　で右から左
　　　　　　　column;　で上から下
　　　　　　　column-reverse;　で下から上

ul {
  width:600px;
  margin: 20px;
  display: flex;
  flex-direction: row;
}

flex-wrap

「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrap: nowrap;（初期値）は各アイテムの幅が親要素の幅に収まるように縮小される。
flex-wrap: wrap; 各アイテムの幅が親要素の幅に収まらない場合、下に回り込みます。
flex-wrap:wrap-reverse; 子要素を折り返し、複数行に下から上へ並べる

justify-content

「justify-content」プロパティは、flexアイテムを一行に配置します。（text-alignの指定と類似）

justify-content: flex-start;（初期値）flexコンテナの左側に配置されます。
justify-content: flex-end; flexコンテナの右側に配置されます。
justify-content: center;　中央に配置されます。
justify-content: space-between;　最初と最後のアイテムは端に、残りは等間隔で配置されます。
justify-content: space-around;　全てのアイテムが等間隔に配置されます。