就労移行支援事業所でphotoshopを学ぶ②（第９回）
就労移行支援事業所に通うminminです。
少し体調を崩して勉強が止まってしまいました。
面白いのですが、少し頑張りすぎたかもしれません。
マイペースでやっていこうかとスタッフさんと相談しました。
今日も寒いですね。といっても空気がさわやかで気持ちいいというのもありますが。
暑いよりも寒いほうが我慢できる体質なので・・・
今日もphotoshopを引き続きスク―のオンライン授業を受けて勉強していこう。
今日は全３回の第2回でテーマはこちら。
「基礎ーPhotoshop特訓／1日でソフト起動からデザインまで【つくりながら楽しくマスタースクラッチブック制作】」
目次はこんな感じ。
- 自己紹介＆アジェンダ
- 05:15
- 作業前に準備をしよう
- 04:47
- ［塗りつぶし］レイヤー を使って塗りつぶしてみよう
- 08:05
- パターン（模様）をつくってみよう
- 17:40
- ［シェイプ］レイヤーを活用してみよう
- 03:58
- ［レイヤースタイル］による特殊効果
- 10:43
- Illustratorで描画したイラストを組み合わせる
- 23:07
- 写真をポラロイド風にする
- 07:02
- ［テキスト］レイヤーを使ってみよう
- 18:48
- ［レイヤーカンプ］でバリエーションを比較する
- 05:25
- 完成後のファイルのサイズを抑えるには？
- 04:35
スクラッチブックを動画を見ながら一緒に作っていったのですが、レイヤーを１つ１つ背景に重ねながらデザインを組み合わせていくのが面白かったです。
オリジナルな模様で帯を作ってみたり、
画像をイラストレータから取り込んで色を変えたり角度や大きさを変えたり、
文字を装飾して入れてみたり、
写真も縁がつくようにポラロイド風にしてみたり・・・
基本的な操作が分かりました。
作っている途中で保存したのがこんな感じ。完成まではまだまだなのですが、それっぽい雰囲気が出ているでしょ？
こういうのが作れると、自分でとったいろんな写真を楽しく編集して記録したら面白いだろうなあと思いました。
就労移行支援事業所でphotoshopを学ぶ①（色彩調整・レタッチ他）（第８回）
就労移行支援事業所に通うminminです
ＣＳＳも残すところ1回ですが、ちょっと厭きてきてしまいました。
気分転換に普段使っているものがきれいに編集できたり加工できると、モチベーションがあがるかもというアドバイスをスタッフさんからもらいました。
そこで気軽にできるphotoshopに挑戦してみることにしました。
本来はアドビのソフトで高価とのことも、無料体験版があり、受講するにはそれだけで問題はないということなので、photoshopとbridgeをダウンロード
無料ダウンロードはこちらからできます。
・Photoshop
https://creative.adobe.com/ja/products/download/photoshop
・Bridge
https://creative.adobe.com/ja/products/download/bridge
ただ、期限が7日間とのことなので、勉強するときは一気にやらないとですね。
これで準備ＯＫ。
それでは早速スタートです。
今回もスク―の動画授業で学んでいきます。
全3回であっさり終わるんだと思いきや、1回が2時間ということで長い。
集中力が続くのかなあと心配でした。
1回目のテーマはこちら。
「入門 - Photoshop特訓／1日でソフト起動からデザインまで【つくりながら楽しくマスター色調補正・レタッチ】
内容はこんな感じです。
- 自己紹介＆アジェンダ
- 05:02
- 作業前にーBridgeで画像の閲覧・整理をしよう！
- 04:35
- ・３つの表示形式
- 04:25
- ・色つきのラベルを使って選別
- 03:34
- ・ファイル名を一気に変える方法
- 06:41
- 基本操作を効率良く！（ツール・パネル、画面表示など）
- 06:33
- 画像解像度とドキュメントサイズとは？
- 15:17
- レイヤーの種類について
- 08:10
- ［調整レイヤー］を使って補正してみよう
- 02:41
- ヒストグラムの特性について
- 10:31
- トーンカーブ：主なカーブについて
- 12:16
- 色相・彩度を使って調整してみよう
- 08:15
- 画像の一部を補正するには？／選択範囲と［チャンネル］の関係
- 05:46
- レイヤーマスクの白・黒・グレーの意味は？
- 10:01
- レタッチをやってみよう
- 08:25
今までphotoshopは難しいと聞いたことがあって、ずっと避けていました。趣味の写真とかもきれいに編集できたら良いなあとも思っていたのですが、やってみると意外と簡単。
基本的な操作しかやっていないからだと思いますが、それでも色相が変わったりセピア色になったり、加工したい箇所だけ選択して編集したりとすごい！の一言。
さらにびっくりしたのが、道路のゴミとかも簡単に消せたり、空を飛んでいる鳥まで簡単に消せたことです。
どうしてそんなことができるのか？と思いましたが、実際簡単に作業できました。
先生も分かりやすいく教えてくれて、ちょっとスピードが速くてついていくのが大変でした。でも、休憩したりしてリフレッシュしながら続けたので、何とか1日で終わらせられました。
次回以降は難しくなっていくけど楽しみです。
就労移行支援事業所でＣＳＳ３を学ぶ③（ナビゲーションタグ）（第７回）
新横浜の就労移行支援事業所に通う、minminです。
CSS3の勉強もだんだんと進んできて全６回のうち今日はすでに4回目。
今日も、オンライン授業schooのＣＳＳ授業を使って勉強開始。
今日第４回のテーマはこちら。
「ＣＳＳ入門 ナビゲーションのすべて」
目次はこんな感じ。
- 自己紹介＆アジェンダ
- 01:41
- サイトの要「グローバルナビ」
- 03:15
- 親要素の指定で子要素が決まる
- 01:47
- 親要素の指定で子要素が決まる: 【実践】スマホ用縦型ナビを作ってみよう
- 05:15
- 親要素の指定で子要素が決まる: 【実践】スタイルタグの中にcssを書いてみよう
- 05:01
- 親要素の指定で子要素が決まる: 【実践】headerとnavを書いてみよう
- 04:19
- 親要素の指定で子要素が決まる: 【実践】ボタンの指定を作ってみよう
- 04:28
- 親要素の指定で子要素が決まる: 【実践】navの中のulの指定をしよう
- 09:31
- hoverの振る舞い
- 02:23
- hoverの振る舞い: はみ出したものを非表示にする指定をしよう
- 07:12
- hoverの振る舞い: オープンソースでコードを配布しているサイト
いろいろな投稿記事をカテゴリー別にわけて並べて、利用する人が検索しやすいようにするもので、どんなＨＰにもあるサイトの要です。
スマホサイトで縦に並ぶグローバルナビを設置するコードを一緒に書いて練習しました。いままで一番難しく、今までやった内容を総動員する感じでした。
それでも縦にナビがきれいに配置され、マウスオーバーすると色が変わるようにhoverしたりして工夫できた画面を見ると、それっぽい感じで、なんか嬉しいです。
続いて第5回も受講してしまいました。
テーマは
「ＣＳＳ入門 ナブバー（横並びメニュー）デザインのすべて」
目次はこんな感じです。
- 自己紹介＆アジェンダ
- 01:16
- 横にならんだナブのデザイン
- 04:48
- 横にならんだナブのデザイン: 【実践】貼り付けたlinkタグの下に styleタグを書き、その中にcssを書いていこう
- 03:16
- 横にならんだナブのデザイン: 【実践】liは⽩の背景⾊をしよう
- 01:58
- 横にならんだナブのデザイン: 【実践】liの幅を指定しよう
- 03:49
- 横にならんだナブのデザイン: floatの特性について
- 04:36
- ナブバーのデザイン: 【実践】liとliの間にmargin-rightを指定して隙間を作ろう
- 05:12
- ナブバーのデザイン: 【実践】displayを指定してマウスの当たり判定エリアを作ろう
- 06:14
- マウスオーバーでデザインを変える: 【実践】a:hover =aタグにマウスが乗っている状態に対してcssを指定しよう
- 06:15
- マウスオーバーでデザインを変える: オープンソースでコードを配布しているサイト
- 01:19
今回はＰＣサイトで良く使われている横のナビゲーションタグ、ナブバーを作りました。
一緒にコードを書きながらでしたが、幅を合わせたり、仕切りの線を入れたりと様々なＣＳＳコードを書かないといけないのがなかなか難しかったです。
自分でオリジナルを作るならしっかりできるようにならないといけないでしょうが、ちょっとここまではできるか心配になってきました。
ならばオープンソースになっているものを使って、あとはカスタマイズしていく方が早いような気が。弱気になっているからなのかもしれませんが、カスタマイズする際のベースとなる知識を身に付けている位に考えれば良いかと。
焦らず頑張っていこう！
就労移行支援事業所でＣＳＳ３を学ぶ②（アンカータグデザイン）（第６回）
就労移行支援事業所に通うminminです。
ＨＴＭＬ５を終えてデザインを学ぶということでＣＳＳ３を勉強始めました。
色がついたり、形がかわったり、少し動きがあったりするのをコードで書けると楽しいです。
今回もオンライン受講schooの講座で勉強します。
今日はその第３回、テーマは
「ＣＳＳ入門 アンカータグデザインのすべて」
目次はこんな感じです。
- 自己紹介＆アジェンダ
- 01:35
- htmlタグの特別な存在a
- 02:32
- htmlタグの特別な存在a: リンクについて
- 01:25
- aの役割を最大限表現する
- 01:32
- aの役割を最大限表現する: 【問い掛け】どうやってschoo WEB-campusの授業リストをクリックできると見破りましたか？
- 03:43
- aの役割を最大限表現する: 【実践】schoo WEB-campusの授業リストを真似して作ってみよう
- 08:54
- aの役割を最大限表現する: スマホでマウスオーバーしなくても「リンク先に飛べる感」を出してみる
- 02:14
- aの役割を最大限表現する: 【実践】schoo WEB-campusの「受講する」ボタンを書いてみよう
- 12:34
- aの役割を最大限表現する: ベンダーグラフィックスについて
- 02:22
- aタグマジック
- 00:13
- aタグマジック: 【実践】マウスオーバーした際のインタラクションを指定してみよう
- 05:37
- aタグマジック: 【実践】トランジションを書いてみよう
- 04:27
- aタグマジック: 3Dトランスフォームについて
リンクがあって「飛べるんだなあ」と見た人に気が付いてもらう意識が大切で、捜しやすいようなデザインでまずはあるべきなのかと。
ボタンでもすでに多くのサンプルが公開されているので、それを利用させてもらいつつ、形を少し丸みを帯びる感じでborder-radiusを使ったり、大きさや色や配置の工夫も様々実践してみました。
またマウスオーバーした時の変化で、たとえば色が変化するopacityや変化する時間を調整するtransition-duration、１８０度回転させたりもできるtransform-rotateYなど工夫すれば、結構良い感じな仕上がりになるだろうなあと思いました。
就労移行支援事業所でＣＳＳ３を学ぶ①（概論・文字デザイン）（第５回）
就労移行支援事業所に通うminminです。
さすがに１２月は寒いですが、今通っている新横浜の事業所は眺望がほんと綺麗です。
空気が冷たいとやっぱり良く見えますね。
１時間、ＷＥＢデザインの授業を受講しているのも大変な集中力が必要で、とても一気にやり切れる感じではありません。
途中で外の景色を見たりして休憩しながらやっています。
ちなみに眺望はこんな感じですよ〜。
さて、こんな景色をながめながら早速勉強開始！
ＨＴＭＬ５入門が終わって、今日から新しくＣＳＳ３入門がスタート
今回も引き続き、オンライン授業のschoo、スク―を使って受講開始。
今回受ける授業はこちら
ＨＴＭＬでも授業を担当されていた田中晶子先生が引き続きＣＳＳを教えてくれる。田中先生は結構親身で、途中で脱線したりうまく操作が反映されないなど、ハプニングもありますが、毎回１時間の長い講座で、なんとなくそんなゆるーい感じが入ると気が休まるかも。
全６回とＨＴＭＬ入門よりは１回多いけど、気合いれてやっていこう。
第１回のテーマはこちら
「ＣＳＳ入門 ＣＳＳとは何か？」
目次はこんな感じ。
- 自己紹介＆アジェンダ
- 02:18
- サイトの見た目担当がcss
- 00:24
- 【問い掛け】サイトの見た目担当がcssだとすると、htmlの役割は？
- 01:53
- サイトの見た目担当がcss: htmlについて
- 01:34
- 簡単なhtmlを書いてみよう
- 07:06
- cssの書き方
- 02:01
- Webについて学ぶ方法: オススメの参考書などというものはない
ｈｔｍｌを前回押さえられていたので、それを踏まえてのＣＳＳだから理解がしやすい授業でした。
勢いあまって、第２回も引き続き受講しました。
今回のテーマはこちら。
「ＣＳＳ入門 文字デザインのすべて」
目次はこんな感じ
- 自己紹介＆アジェンダ
- 01:32
- フォントファミリー
- 04:09
- フォントファミリー: serif体とsan-serif体について
- 02:35
- フォントファミリー: フォントファミリーの指定で⼀番大切な事
- 06:45
- フォントファミリー: MacとWindowのフォント一覧
- 03:02
- フォントファミリー: OSごとの標準フォントの紹介
- 07:00
- 美しい文字をデザインしよう
- 02:11
- Google web fonts
- 00:49
フォントの種類もいろいろあって、ＯＳによって対応できるものとか、できないかものとかがあり、複雑。でもその文字によってサイトの雰囲気がガラッと変わってしまうのでとても重要ですね。
グーグルウェブフォントも紹介してもらいましたが、便利な機能だと思いました。
就労移行支援事業所でＨＴＭＬ５を学ぶ③（アンカータグ・metaタグほか）（第４回）
就労移行支援事業所に通うminminです。
新横浜にある事業所で今日も頑張って勉強しよう。
schooを使ったｈｔｍｌ５の講座も全５回のうち、３回まで終了。
残り２回を今日終わらせることができるかどうか・・・
さて今日の第４回のテーマ
「ＨＴＭＬ入門 アンカーリンクの指定法」
目次はこんな感じです。
- 自己紹介＆アジェンダ
- 01:28
- ハイパーテキストとは
- 01:57
- ハイパーテキストとは: href属性について
- 01:26
- ハイパーテキストとは: hrefに指定できるtarget属性について
- 05:30
- 外部リンクとページ内リンク: 外部リンクについて
- 00:40
- 外部リンクとページ内リンク: ページ内リンクについて
- 10:44
- 【問い掛け】aタグに内包できるタグは何でしょうか？
- 04:21
- カテゴリーとコンテンツモデル
- 02:29
- カテゴリーとコンテンツモデル: W3Cのガイドページを見てみよう
- 03:54
HTMLがハイパーテキストマークアップラングエッジの略で、まさにリンクで飛ばして、ハイパーリンクたらしめているタグ、aタグ。タグ自体は至って簡単だなあ。昔はインライン要素とブロックレベル要素に分かれていて、aタグはインライン要素なのでブロックレベル要素は内包することができなかったが、html5に変わって基本的になんでも内包できるようになったとのこと。便利になったんだなあ・・・
また今日も勢い余って最終回の第５回も受講してしまいました。
第５回のテーマは
「HTML入門 headタグに記述する物」
目次はこんな感じです。
- 自己紹介＆アジェンダ
- 01:09
- 本題に入る前に: metaタグとlinkタグについて
- 03:18
- metaタグ: metaタグとは
- 00:59
- metaタグ: metaタグの属性について
- 01:24
- metaタグ: http-equiv 属性について
- 02:52
- metaタグ: default-styleについて
- 01:53
- metaタグ: refresh 属性について
- 04:11
- metaタグ: charset 属性について
- 09:26
- metaタグ: name 属性について
- 05:56
- metaタグ: その他のmetaタグについて
- 09:28
- metaタグ: property 属性について
- 03:01
- linkタグ: linkタグの属性と属性値について
- 00:44
- linkタグ: favicon添付について
- 00:44
- linkタグ: webクリップアイコン添付について
- 00:43
- カテゴリーとコンテツモデル
- 05:36
head内なので目に見えないところなのですが、その記事を特徴づけるのにとても重要だと分かりました。
特にmetaタグ。http-equivでdefault-styleからスタイルシートを指定したり、refreshも良く見るなあと。ただ最近はhtaccesssを使うことのほうが主流ということでした。
meta nameのdescrptionがＳＥＯでは凄く重要というのも勉強になりました。
ちなみに、グーグルでは検索エンジン最適化スターターガイドというのがあって、グーグルがこんなものまで作っているのかと驚き。descriptionがいかに大事か分かりました。
これでとりあえずｈｔｍｌ５の５回講座は終了しました。トータル５時間も途中動画を止めて検索して調べたり、ゆっくりエディタでコードを打ったりして時間的にはもっとかかっているのですが、事業所のスタッフさんにもあまり質問する必要もなく、サクサクいけました。
エディタのATOMを使ってコードを書くのも少し慣れてきたし、あとはサイトを作りながら学んでいけばもっと理解が深まりスキルが高まるなあと。
次回からはＣＳＳ３で実際デザインに関係していく内容。さてどうなることか・・・
就労移行支援事業所でＨＴＭＬ５を学ぶ②（入れ子構造ほか）（第３回）
就労移行支援事業所にはじめて通うことになったminminです。
横浜市の新横浜にある、きれいな事業所で今日も頑張ろう。
オンライン授業のschooを使ってhtml5を今日もやっていこう。
今日の講座は第２回目、
「HTML入門 入れ子構造を学ぶ」
というテーマ。
目次はこんな感じ
- 自己紹介&アジェンダ
- 01:36
- 【実践】メニューをリストタグで作る
- 00:38
- いろんなグローバルナビを見てみよう: パターン1
- 02:57
- いろんなグローバルナビを見てみよう: パターン2
- 01:59
- schoo WEB-campusのWebサイトで使われているulを見てみよう
- 05:54
- 2種類の箇条書き、ulとolの解説
- 01:11
- 順不同リスト「ul」について
- 01:49
- 順序リスト「ol」について
- 00:55
- リストタグ作成でやってはいけないこと
- 06:35
- 定義リストを作る
- 00:05
- 定義リストを作る: dl, dt, ddタグの解説
- 02:06
- 定義リストを作る: dfnの解説
- 04:27
- 表組みを作る
- 02:35
- 【実践】表組みを作る
入れ子構造でセットになるタグを勉強していきました。ulとliタグはしょっちゅう使いそう。定義リストはなんかピンと来なかったですが、システム関係の知り合いが口癖で「定義する」「定義は？」みたいなことをよく口走るを思い出してしまいました。
面白かったのは表組み。
ｔｒ、ｔｈ、ｔｄタグは最初はとっつきにくいが、どんな表を作りたいかをイメージして組み合わせていくと結構あっさりできました。
先生は、テーブル設定は難しいと思う人が多くて、ドリームウェイバーで？デザインモードで表を書く簡単な方法があるけど、しっかりhtmlで作れる方が良いと話してたので、あっさりできてなんか嬉しいかも。といっても、難しい表はまだ作っていないし、きれいに見える表ができるのかが今後の課題だなあ。
勢いあまってhtml5の第３回も受講してしまいました。
第３回のテーマは
「ＨＴＭＬ入門 属性と要素」
なんか難しそうなテーマ名でした。
目次はこんな感じ。
- 自己紹介＆アジェンダ
- 01:46
- 開始タグと終了タグ
- 00:28
- 開始タグと終了タグ: 終了タグのないタグ<br>
- 01:26
- 開始タグと終了タグ: 終了タグのないタグ<hr>
- 02:52
- 開始タグと終了タグ: 終了タグのないタグにcssは当たるのか？
- 01:37
- 属性と要素
- 04:34
- 【質問】imgタグ内のheight属性とwidth属性はHTML5で廃止されたか
- 06:26
- グローバル属性
- 00:21
- グローバル属性: 文字の流れる方向を決める dir
- 02:56
- グローバル属性: 実はどこでも使える lang
- 01:06
- グローバル属性: 実はどこでも使える title
- 01:55
- グローバル属性: tabindex
- 02:45
- グローバル属性: accesskey属性
- 08:59
- map要素の属性: img要素の中にリンクを指定
- 00:57
- map要素の属性: map要素とarea要素
- 08:03
改行タグbrをデザインをきれいに見せるために使っては絶対にいけないというのは勉強になりました。文脈上必要な時のみ。
htmlは機械が文書構造を理解するために使う言語で、人の目でみた見た目を意識したデザインはcss3が担当するのでという説明がしっくりきました。
同じ理由からhrタグ、水平線もああそうかと納得しました。
セマンティックコーテイングになって、見た目に関係したタグはhtml4まではあったそうですが、html5からは全廃されたとのこと。昔に学んで慣れた人は大変だなあと思いつつ、ＷＥＢ技術は日進月歩で進化しているから、日々勉強しないダメなんだろうなあ。
