レッスンお疲れさまでした。
本日は、画像の加工とhtml/cssの修正を行いました。
画像の加工に関して
「fx」のアイコン、レイヤースタイルでつけたドロップシャドウは、ダブルタップすることで何度でも修正することができます。
不透明度を100%にすると影を濃くすることができます。
100%にしてもまだ薄いと感じるときは、レイヤースタイルでつけたレイヤー自体をコピーして複数重ねることで濃くすることができます。
できた画像は、まずは普通に保存します。
普通に保存した画像はPhotoshop形式で保存されるので、レイヤースタイルなども含め、レイヤーの情報を保持した状態で保存されます。
レイヤーの情報が保持されていれば、レイヤースタイルでつけたドロップシャドウを濃くしたい、薄くしたいなど修正が必要なときも簡単に修正できます。
webサイトの画像としてアップロードする場合、Photoshop形式の画像はwebで表示できませんので、jpg形式で書き出します。
Photoshopではweb用に保存で、画像形式を変えて保存します。
おおまかに
・写真は、jpg形式
・ロゴマークやイラスト系は、gif形式
・透明度を扱いたいときは、png形式
と覚えておきましょう。
html/cssの修正に関して
webサーバーにアップロードするファイルと、アップロードしないファイルは区別しておきます。
・wwwフォルダにはアップロードするファイル
・originalフォルダにはアップロードしないファイル
とします。
・htmlは、文章の論理構造を表します
・cssは、見た目のデザインを表します
bootstrapというフレームワークを使うと、パソコンで見てもスマホで見ても綺麗に見えるデザイン（レスポンシブデザイン）ができます。
不必要な余白などが入ってしまった場合、ブラウザで表示して、2本指タップして「要素の検証」で様々な情報を調べることができます。
どこに、どんな要素が入っているのかを確認しながら修正していきます。
画像を配置するには、htmlで配置する方法とcssで配置する方法があります。
・htmlで配置する場合、imgタグをを使います。
・cssで配置する場合、background-imageを使います。
文章構造として必要なものはhtmlで、見た目のデザインとして配置したいときはcssで配置します。
htmlで配置した画像は、bootstrapの機能により「img-responsive」というclass名を付けると、レスポンシブ対応になります。