WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ボタンの変遷

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。

グラデーション=光と影

ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデーションの濃淡を使って表現します。これはイラストや絵画を描く場合に、背景の奥行きを出す為に暗い色を乗せて、その部分が奥に向かっていることを表現したりするのと同じです。

しかし、強いグラデーションを付けると却って不自然に見えてしまうので、気をつけて使いましょう。

たまに作例である、違和感のあるボタン
f:id:yachin29:20160202025215p:plain

f:id:yachin29:20160202025210p:plain
上の例は光が当たっている箇所は光が100%=白、当たっていない箇所は0%=黒という極端なグラデーションを使っている例です。このような光の当たり方は実際にはあり得ないので、不自然なボタンに見えてしまいます。
グラデーションツールは使い方が比較的難しいツールなので、しっかりと使い方を覚えましょう。


ただ、現在ではタッチパネルが浸透し、ボタンにあえて立体感を出さなくてもユーザーはボタンを認識してくれる為、フラットデザインやゴーストボタンなどといった、あえて立体感の無いボタンデザインが主流です。

フラットデザインのボタン
f:id:yachin29:20140108104417j:plain

ゴーストボタン
f:id:yachin29:20160202031316p:plain


http://yachin29.webcrow.jp/ps_style.zip

BIM講座 | フェリカテクニカルアカデミーがおすすめする 基礎から始めるBIM講座

フェリカテクニカルアカデミーのBIM講座|池袋

BIM講座が開講します。フェリカテクニカルアカデミーがおすすめする 基礎から始めるBIM講座
。BIM講座は、池袋で長年にわたり建築分野の講座を実施してきたフェリカテクニカルアカデミーの講師陣が、基本操作から丁寧に教えます。BIM技術を身につけ、これからの転職や実践に役立てましょう。


http://www.felica.info/kikin/bim.shtml


f:id:yachin29:20180613204558p:plain

2カラムレイアウトの演習

演習1

f:id:yachin29:20160318175839p:plain


使用するテキスト

卵料理カフェ Cockeyolly

Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円


シーフードスパゲッティバルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円

©2018  卵料理カフェ Cockeyolly

使用画像
http://yachin29.webcrow.jp/cockeyolly-img.zip





演習2

f:id:yachin29:20180313130130p:plain


使用するテキスト

薬玉文様(くすだまもんよう)

薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。

© 2018 Historical Japan


使用画像
http://yachin29.webcrow.jp/japanese-img.zip

floatと2カラムレイアウト

f:id:yachin29:20160930111042j:plain


divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。
f:id:yachin29:20160211021709j:plain


しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。
f:id:yachin29:20160211021723j:plain


floatを使う事でHTML内の文章構造を変える事なく比較的自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なく色々なレイアウトを作ってみましょう。

floatの注意点

floatは非常に便利な反面、しっかりと特性を理解しないとレイアウトの崩れの原因にもなります。
floatを指定した要素は浮き上がるので、その下の要素に影響が出てしまいます。なので、それを予防する為の方法もしっかりと覚えましょう。また、floatしたもの同士はマージンの相殺が起きず加算されてしまうので、そこも注意が必要です。

floatを使う際に注意するべき2点
  • 下の要素に影響が出ないように回り込みを解除する(overflow、もしくはclear)
  • floatしたもの同士はマージンの相殺が起きず加算されてしまう

2カラムレイアウト

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。


背景画像はPhotoshopを使い、自身で作成
cssはエンベットせずに必ずcssファイルに記述
cssファイルはcssフォルダーに、画像はimgフォルダーに入れること

f:id:yachin29:20160930210534p:plain

児童発達支援・放課後等デイサービス あいる

児童発達支援・放課後等デイサービスあいるは、東京都東久留米市にある1歳半から学齢期のお子さまを対象にした児童教室です。経験豊富なスタッフが、一人一人の特性や発達段階等に合わせて、それぞれにあった指導方法、専門的な学習、コミュニケーション指導など様々な支援を行っています。

airujidou.php.xdomain.jp



f:id:yachin29:20180424101430j:plain
http://airujidou.php.xdomain.jp/

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng
画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。

f:id:yachin29:20161221195210p:plain


このTinyPNG、実は中で動いているのは「pngquant(ピングクォント)」という画像圧縮プログラムなのです。pngquantは無料でダウンロードする事が出来るのですが、今回はさらにmacAutomatorを使って、pngquantをフォルダアクションに紐付けする事でフォルダに画像を入れた瞬間、「自動で画像を圧縮してくれる」というとても便利な事が出来るようになります。macの人は是非やってみましょう。windowsの人もphotoshopのcc2017であればTinyPNGのプラグインがダウンロード出来るので、そちらを試してみてください。

まずは
pngquant — lossy PNG compressor
のダウンロードですが、今回は全てターミナル上で作業していきます。ターミナルは一見難しそうに見えますが、慣れてしまうと非常に楽に作業を進める事が出来ます。
f:id:yachin29:20161221203311p:plain



インストール方法

Homebrewが入っていればターミナルを使ってたった1行でpngquantがインストール出来るので、もし「Homebrew」が入っていない人はまず「Homobrew」をインストールしましょう。

「Homebrew」
macOS 用パッケージマネージャー — macOS 用パッケージマネージャー
f:id:yachin29:20161221204406p:plain


Homebrewのインストールもターミナルを使えば簡単で、ターミナル上で下記の1行をコピペしてあげれば「Homebrew」がインストールされます。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※インストールする際に鍵のマークが出て、PCのログインパスワードを求められるので、入力する。(ターミナルに慣れてないと非常に解りづらいので注意)



続いて以下の1行を同じようにコピペしてあげるとpngquantがインストールできます。

brew install pngquant

これで必要な物が全部揃いました。


Automatorでフォルダアクションの設定

f:id:yachin29:20161221205717p:plain
まずデスクトップに適当なフォルダーを作って、そのフォルダーにフォルダアクションでpngquantを紐付けします。


次にフォルダーに画像を入れたら自動でpngquantが動くようにAutomatorでフォルダとpngquantを紐付けします。

まずはAutomatorを立ち上げて、「新規書類」を押します。
f:id:yachin29:20161221210255p:plain


上のメニューからフォルダアクションを選択し、選択肢の中から「フォルダアクション」を選びます。
右上の「フォルダを選択」となっているプルダウンで「その他...」を選び、さっき作ったフォルダを選択します。
左側のアクションの中から「シャルスクリプトを実行」のアクションを追加し、フォームへ以下の1行を追加しましょう。

/usr/local/bin/pngquant --ext .png --force "$@"


f:id:yachin29:20161222181033p:plain


さらに自動圧縮がちゃんと完了したらその都度通知してくれるように、通知コマンドを追加し「タイトル」と「サブタイトル」に適当な文字を入れてみましょう。

f:id:yachin29:20161222181401p:plain


以上で終わりです。
今まではブログなどで使うキャプチャー画像はいちいち圧縮するのが面倒でしていませんでしたが、これからはどんな画像もpngなら自動であっという間に圧縮出来るので、とても助かります。



参考サイト
www.lifull.blog

スマホアプリの種類

そもそもアプリとは?

そもそもアプリとは「アプリケーションソフトウェア」の略で、ソフトウェアの分類のうち、特定の作業を行うために使用されるソフトウェアの総称である。
例としては、文書を作成するためのワープロソフト、表を作成するための表計算ソフト、電子メールをやり取りするための電子メールソフト(メーラー)、プレゼンテーションの資料を作成するためのプレゼンテーションソフト、画像を作成するためのドローソフトやペイントソフト、写真を編集するためのフォトレタッチソフト、音楽データを再生するための音楽ソフト、その他会計ソフト、家計簿ソフト、年賀状ソフトなどがある。

アプリの種類

現状、スマホアプリは大きく分けると「ネイティブアプリ」と「ハイブリッドアプリ」の2つに分ける事が出来ます。

ネイティブアプリとは?

ネイティブアプリとは、特定のモバイルOSにおいて動作するよう設計されたアプリです。そのため、他のOSでは動作せず、開発言語もOSによって異なります。
ネイティブアプリのメリットは、カメラ機能や、位置センサー機能、プッシュ通知等のスマホバイスが持っている機能を簡単に利用でき、動作も軽い事です。

ハイブリッドアプリとは?

それに対し、ハイブリッドアプリとはHTML5CSSJavaScriptなどの従来のWeb技術で開発が出来、クロスプラットフォーム対応、且つカメラやGPSなどのスマホバイスの機能を利用しているアプリの事です。欠点としてはアプリ自体の動作が遅いので、ゲームなどの大きいデータを扱うアプリには向いていません。また基本的なスマホバイスの機能は利用出来ますが、新機能は使えない場合が多いです。



なので、HTML5CSSJavaScriptの知識さえあれば、新たにJavaやSwiftといった新しい言語を覚える事無くスマホアプリは作る事が出来ます。
さらに、「monaca」等の開発プラットフォームや「Onsen UI」などのフレームワークを使う事で簡単な機能であれば短時間で作成する事が出来ます。


ja.monaca.io



ja.onsen.io