レスポンシブで、表示させたくない部分を隠す
どうも、こんばんは。
気づけばもう１０日程で２０１５年が終わるという事実が恐ろしくてたまりません(´・ω・`)
ほんとに時間経つのが早すぎますね・・・来年の今頃は、就職も決まって卒業研究を煮詰めているのか、それとも・・・・・・・・・
・・・考えるのやめましょうか！！
というわけで（？）、今回はインターンでのコーディング中に学んだことをメモがてら記事にしようと思います。
内容は、レスポンシブデザインでレイアウトをする時に、片方のデバイスにのみ表示させたい部分がある際、もう片方のデバイスでその部分の表示を隠す方法です。（上手く纏められなくて長い・・・
すごい単純な方法ですし、常識レベルのものだとは思うのですが、忘れないように一応念のため、記事にしておきます_(：3 」∠)_
一部分を消して表示させるレスポンシブのデザイン
そもそもレスポンシブデザインは、CSS3のメディアクエリ機能を使ってPCの表示とスマホ・タブレットの表示を別々にレイアウトするデザインで、スマホでのWebサイト閲覧が増えた事で普及したデザイン。
PCのディスプレイもワイドスクリーンが普及したという事もあり、PCでの表示だけを目的とすると、スマホ等では横幅の差で大分見辛くなってしまいます。そんなわけで、レスポンシブデザインの多くは、レイアウトをボックス形式にしてデバイスに合わせて組み換え、２カラムや３カラムのレイアウトにするというものになっています。
しかしそれだけでなく、もっと別のアプローチもあるようです。全く別のデザイン・・・と言うと大げさですし大雑把ですが、レイアウトだけでなく、デザインを大きく変えるやり方もあるわけです。それこそ、また一からデザインをし直すような事もあるんだとか。勿論、相当な手間になるそうですが・・・
その一つとして、CSSで一部分のレイアウトを表示させなくする事で、デザインを変えるという方法があります。
例えば、スマホでは表示させる空間的余裕がない事からその部分だけ表示させない様にしたり、先ほど言った様にデザインを大きく変える時に、一から作る為に元の部分を隠してその部分を新たに作り出したり。
この様にレスポンシブデザインはもちろん、それを抜きにしても、何かと重宝する方法のようです。
非表示にするにはdisplayプロパティ！
さて、それでは実際に一部分のみを隠す方法ですが・・・ここまで長々と話しておいてなんですが、恐ろしく簡単です。
CSSで、{display: none;}と記述する、と至ってシンプル。
displayプロパティは値によって、宣言したセレクタ部分のボックスの種類を変える機能を持っているわけですが、その値の一つである「none」を宣言すると、その部分のボックスを存在しないものとして扱い、非表示にする機能を持っています。
この宣言をスマホ表示にするメディアクエリ内に記述する事で、スマホから閲覧した際に、その宣言をした部分を非表示にする事ができます。
まとめ
この様に、レスポンシブデザインはボックスを組み替えたりして変形させるだけでなく、部分部分を非表示にしたり、それを利用して全く別のデザインにしたりでき、レスポンシブデザインを実装するにしても色々な方法があるようです。
最初はシンプルなものしか分からず簡単だと思っていたのですが、結構奥が深そうで、まだまだ勉強が必要ですね・・・
Photoshopのレイヤーについて その２
どうも、こんばんは。
つい一昨日の１０日ですが、インターンシップの初出勤日でした。
内定もらったけど長期なのかとかちゃんと任された事をこなせるかとか、不安は色々ありましたが、ちゃんと長期で取ってもらえてるようですし、仕事内容も最初は大分簡単なもの（一昨日は単純作業のみでした）のようなのでとりあえず安心してます。
とりあえず、インターンと並行して勉強して、技術・知識と経験をしっかり付けていきたいと思います。なにやらコーディングを先に任されそうな感じもするので、またそちらの勉強にシフトしようかなって感じになってます_(：3 」∠)_
と、こんな前置きにも関わらず記事自体はフォトショについてです、すいませんｗ
前回フォトショのレイヤーについて簡単に記事にしたので、今回は実践的な部分についてです。
レイヤーの編集
レイヤーの扱う際、レイヤーにした部分を編集（例えば切り取ったり、拡大・縮小をしたり）したりする事があります。
まずは、レイヤーマスクというものを使い、レイヤー部分を切り取る方法です。
マスクというのは「覆う」という意味のある言葉で、画像処理において一部を隠すという意味で使われています。この隠すという機能を分かりやすく扱っているのがレイヤーマスクで、画像の大部分を隠して一部のみを他の画像に表示させるという事もできます。
背景やレイヤーで選択範囲を作って、レイヤーパネルの「レイヤーマスクを追加」ボタンを押すと、その画像のレイヤーマスクを作って、その部分を切り抜く事が出来ます。この状態で、今のレイヤーの下に新たな塗りつぶしレイヤーを作成してみると、切り抜いた部分以外の色が変わるので、切り抜いた画像の背景色を変えられるという事になります。
また、レイヤーを拡大・縮小や回転などで変形させる事も可能です。方法は簡単で、移動ツールを選択して表示されるバウンティングボックスを操作するだけです。それ以外にも、編集メニューの変形から変形ツールを使う事で、レイヤーの形を変えられます。
レイヤーの機能など
レイヤーは画像と画像を重ねる事で、１枚の画像として扱う様に合成するという使い方をするわけですが、それ以外にもレイヤーには様々な機能があります。
レイヤースタイル
レイヤースタイルは、レイヤーに対して様々な効果をかける機能です。描画モードや不透明度を変えるよりも多くの効果を加える事ができ、例えばドロップシャドウで影を付けたり、境界線でレイヤーの境界部分の線をハッキリと付けたりする事ができます。
また、複数の効果を同時にかける事ができ、その設定した複数の効果をスタイルとして保存しておき、別の機会に同様のものを呼び出して使う、なんて事もできます。
このスタイルはデフォルトで登録されているものやネット上に公開されているものもあるので、色々と見てみると良いかもですね。
テキストレイヤー
読んで字の如く、文字を書いたテキストのレイヤーを指します。横書き文字ツールなどで文章を入力すれば、それがそのままテキストレイヤーとなります。
オプションバーや文字パネル、段落パネルにより、書体やサイズ、字間行間などのテキストの属性を保持でき、後からいくらでも変更できます。
調整レイヤー
トーンカーブやレベル補正など、色調補正をレイヤーとして扱えるのが調整レイヤーです。イメージメニューから色調補正を行う通常の方法ではファイルを閉じた後に補正前に戻せませんが、調整レイヤーはあくまでレイヤーとして色調補正を重ねているだけなので、レイヤーを非表示にすればいつでも補正前の状態に戻せるのが特徴です。
スマートオブジェクト
スマートオブジェクトとは、調整レイヤーの様に元の画像をそのままにしてフィルター効果をかけられる機能です。調整レイヤー同様、編集したフィルター効果を後から簡単に調整・削除する事ができます。
少々大雑把になりましたが、レイヤーの扱い方や機能についてのまとめでした。
もっと色々書くべきなのでしょうけど、どうにもダラダラと長くなってしまいそうで・・・(´・ω・`)
とりあえず、レイヤーはフォトショを触っていってもほぼ何処でもと言っていいほど出てくる単語ですので、しっかり内容を理解しておかなきゃいけませんね・・・
Photoshopの学習とか
どうも、こんばんは。オオキタです_(：3 」∠)_
気づけばもう１１月になりますね・・・結局１０月中に２つ目のブログ設立は無理でした・・・(´・ω・`)
というかここに来てゲームについてのブログにするかサバゲーについてのブログにするかまた悩み始めたりしてます・・・何度同じ事を悩むんだろう俺・・・
ジャンルは一つにしたいからどちらもって事ができないのが悩みどころですね・・・
それはさておいて。今回ですが、最近学習中のPhotoshopについて書いていきたいと思います。
Photoshop触ってみた
というわけで、前の「インターンに向けて」って記事でも話しましたがPhotoshop触り始めてます。例のごとく書籍を購入して、それを進めている感じですね。ちなみに、その書籍というのがこちら↓
世界一わかりやすいPhotoshop 操作とデザインの教科書 (世界一わかりやすい教科書)
- 作者: 柘植ヒロポン,上原ゼンジ,吉田浩章,大西すみこ,坂本可南子
- 出版社/メーカー: 技術評論社
- 発売日: 2014/01/23
- メディア: 大型本
- この商品を含むブログ (1件) を見る
これまた例のごとくレビューで選びました。文章はあまり多くなく、図や画像などで分かりやすく丁寧に解説されていてやりやすいので、入門として購入したのは良かったと思います。
そんなわけで、こちらの書籍を読みながら学習を始めたわけですが・・・
意外と・・・難しい・・・！
思ってた以上に苦戦していますハイ(;´・ω・)
アレですね。バイト先に本職プログラマーの人も「フォトショは難しいよー」って言ってたんですが、ほんとに難しい・・・
細かい操作とか不器用な自分には大変ですし、細かい違いとかもよく判別できなかったり・・・
というかまだ本も途中なのですが機能がやたらと沢山あって全部覚えるのすごいしんどそう・・・！ いや全部使うってわけでもないとは思うのですが・・・！
まだまだやってるのは序の口で、なによりフォトショが終わっても次illustratorが残ってるのですが・・・インターンとかの条件として「フォトショとイラレでサイト構築の経験がある事」とかってのをちらほら見たんですが果たしてその条件を達成する事はできるのか・・・！(´・ω・`)
なにはともあれ
まぁあーだこーだ言っててもこれできるようにならないと話にならないのですけどね_(：3 」∠)_
とりあえず基本だけでもなんとかできるようにすれば、あとはインターンなり追加購入の書籍なりで出来る事を増やせる・・・と、思うのですが・・・どうなんでしょう（震え声
なんにせよ、今はとにかくフォトショとイラレを少しでも使えるようにさっさと学習を進める他ありませんので、頑張りたいと思います。。。
インターンに向けて
どうも、お久しぶりです。１週間以上ぶりです。大分間が空いてしまいました・・・(´・ω・`)
大学だの就職だのの事で色々バタバタしたり、課題に追われたりで思うように勉強を進められないしブログの更新も滞るし・・・ダメダメでふ・・・_(：3 」∠)_
とりあえず、そんな中でも地味～に勉強は進めていました。他にもまた本を追加購入したり、新しいディスプレイを買ってデュアルディスプレイにしたり（ほんとに作業しやすくて助かりますこれ）、アドビのCCを正式契約したりとか。
そして、それと同時にまた今後の方針について考え直したりとかもしてみました。何度目だとか言ってはいけない
何故また方針を変えたのかですが、タイトルにもありますが、実は１１月か１２月中に長期のインターンシップに行きたいなと画策しております。数ヶ月ぐらいやらせてもらえるやつです。どの企業に行くかまではまだ未定ですが、とりあえずWebデザイナーの仕事に実際に触れてみたい、そもそも技術や知識が足りてないから現場で身に付けたい、というわけです。
Webデザイナーを目指し始めたのが今年の夏で、それまで何もなりたいものがなかった為インターンシップのガイダンスなど尽くスルーしており、インターンについての知識があまりに欠けた状態ではありますが、色々調べてなんとかこぎつきたい所ですね・・・
そんな訳で、現状はインターンを見据えて、それの為の勉強にシフトしています。具体的には、
・条件として求められている事の多いPhotoshop,Illustratorの使い方を身に付ける
・最低限のコーディングスキルを身に付ける・Webデザイナーの仕事内容についての詳細を知る
という感じです。１つ目については、とりあえず本を１冊ずつ購入して勉強しています。先ほど言った追加購入した本というのがこの二つですね。
２つ目の最低限のコーディングスキルですが、そもそも最低限というのがイマイチ把握できない為、何とも言えないですね・・・現状、少なくとも作業スピードはもう少し上げておきたいとは自覚していますが。
３つ目は、そもそもWebデザイナーの仕事について大まかな概要しか知らないのが現状ですので、これについて詳細を本なりネットなりで調べるつもりです。
そんなこんなで、今までの漠然とした目標でなく、割と目前に迫っている分かりやすい目標が出来たので、勉強意欲は増しています。単純に、新しく触るフォトショとかが楽しいというのもありますがｗ
ただ、１０月中にはもう一個ブログを立ち上げたいので、そちらの方も計画しておかなきゃいけないですね。残り１週間、時間足りるかどうか微妙ですが・・・とりあえず、頑張っていきます。
