「自分の仕事は自分でクリエイト」をコンセプトとしたWebデザイナーのための体験型オンラインスクール。自分の力で生きていくWebデザイナーを目指します。

【第一部】GoogleClomeデベロッパーツールの使い方【第二部】Photoshop 描画モードの基本

今回のテーマは、

  • GoogleClomeデベロッパーツールの使い方
  • Photoshop 描画モードの基本

【第一部】 GoogleClomeデベロッパーツールの使い方

CSSの表示確認をする際に便利なのがGoogleクロームのデベロッパーツールという要素の検証機能です。

特にレスポンシブやWordPressテーマの編集などCSSが複雑になればなるほど、チェックに時間がかかります。

そんな作業を一気に楽にしてくれるのがデベロッパーツールです。

CSSの学習にもとてもおすすめです!

  1. CSSのコードチェック方法
    (基本的なところから!)
  2. 他サイトのCSS研究方法
    (プロのコーディングから学んでみる。これはかなり勉強になります。)
  3. WordPressのプラグインにより出力されるCSSのカスタマイズ方法
    (自分の書いたCSSと上手く合わせる方法)

参加者の声

  • Chromeの開発ツールで左側に画面で右クリックして該当のhtmlやらを見られることを知ることができました。大変便利なTipですね。 
  • Photoshopは膨大な内容なので基本からもう一度おさらいしようと思います。
  • 素朴な人や慣れた人、色んな人の声が聞こえて刺激になりました。
  • ディベロッパーツールが便利だということは知っていましたが、どうやってみるかがわからず「眺めて終わり」という感じでした。
    記号の意味や具体的な使い方を教えていただいて「そうだったのか!」と思いました。
  • photoshopの描画モードについて、自分でも試してみたいと思える、基本的なところから教えていただいたのでうれしかったです。
  • 最近は、ブログに掲載する画像もとても重要であることに気づき、必ず何かしらの加工をするようにはしていました。
    今日教えていただいたアレンジ方法もとても素敵だったので、早速取り入れていこうと思います。
  • ご説明が分かりやすく、理解しやすいです。
  • 他サイトのCSSのチェック方法、描画モードの使い方が参考になりました。
    動画アップされたら、再度見直して練習したいです。

ご質問・ご感想をお寄せください。

今回の動画はいかがだったでしょうか?ぜひ、あなたのご感想をお待ちしております!

【会員マイページ>サポートデスク】からどうぞ!

関連記事

「自分の仕事は自分でクリエイトする」

当サイトは、Webクリエイターズオンラインスクール メンバー専用サイトです。