未経験ママのWebデザイン勉強法 Webデザインにつかえる便利機能 CSSコピー

初めてAdobeソフトを使う(PDF以外)わたしのひとりごと

2019年9月にIllustrator/ Photoshopを触ってから、早いもので丸っと5ヶ月。

今までadobeソフトはギリギリPDFを会社で使用していただけで、ほとんど触ったことがなく。

普段Excel/WordのOffice系ソフトしか使用しない事務員には、なかなか理解しがたいものもあったりしました。

いまだに、Illustratorと Photoshopのレイヤーの概念になれません・・・

そんな中、卒業に向けて、卒制を絶賛コーディング中です!

わからないことだらけで、でも、自分で解決できると、「自分天才っ♡」とはしゃいでみたり、

「うーーーー」とひたすら、にらめっこな時間を過ごしたりと、

夜な夜な独り言を言いながら、コツコツ頑張っています。

いいことを教えてもらった わたしのひとりごと

ひたすら、どうやってCSSを書けば、わたしの思った通りに、できるの???

と、途方に暮れていたので、子供たち2人を従えて、はるばるスクールに行きました。

もちろん、講師の先生にも質問し、だいたいの不明点は解消されたものの、

ひとたび野に放たれると、いや。3歩歩くと、「あれ?どうやるんだっけ?」と振り出しに戻る勢いのポンコツぶり。

再び講師の先生を呼ぼうとしたところに、女神降臨です!

同じスクールの卒業生が来ていました〜

その方とは、新年のもくもく会でお会いしただけなのですが、Twitterでちょくちょくお話しさせていただいていたので、

「卒制ですかー?見せてください!」

「いいですよー。でも全然できないんです😭

の流れから、このかたの時間を長時間に渡り、専有し、

わたしが3日3晩うなだれていた難題をあっという間に解決してくれたのでした♡

・・・

「卒業したら、わたしも女神様みたいになれるの?」

・・・ん?新しい疑問が生まれましたが、まずは置いといて。。

Webデザインにつかえる便利機能 CSSコピー

女神様が教えてくれた便利機能

CSSコピー

何らかのコーディングに対しての機能はあるんじゃないかと思っていたのですが、

調べもせず、アナログに書いていいたわたし。

これで少し時間が短縮できます。

CSSコピーを使うことのメリットは、

  • カラーコードをいちいち確認しなくてOK。
  • フォント情報や枠線の情報などが簡単に取得できる!
  • など、コピー&ペーストでCSSが書けちゃいます♡

気をつけるところは、

  • Widthなどは参考まで。
  • positionは、その場のアートボードの位置によるので参考にならない。

万能ではないですが、これで少しは時間短縮になりそうです😌

Photoshop CSSコピー

調べたいレイヤーを右クリックし、メニュー画面を出します。

「CSSをコピー」と見つけたら、クリックをします。

テキスト・メモなどに貼り付け。

CSSの情報がひとめでわかります!

CSSコピー  Photoshop

例えば。 Photoshopで作った長方形の例。

.長方形_1 {

  border-width: 4px;

  border-color: rgb(0, 0, 0);  /* カラーが表示されると便利♡ */

  border-style: solid;  /* スタイルが表示されて楽チン♡ */

  background-color: rgb(0, 0, 0);

  opacity: 0.4;

/* 参考にならない↓ */

  position: absolute;

  left: 193px;

  top: 82px;

  width: 630px;

  height: 596px;

  z-index: 5;

}

Illustrator CSSコピー

メニューバーから ウィンドウ>CSSプロパティ

選択したスタイルをコピー

イラレ CSSコピー

.st { font-family : Playfair Display;

font-style : italic;

font-size : 300px;

letter-spacing : 22.5px;

color : #C30D23;

color : rgb(195, 13, 35); }

XD CSSコピー

まず、メニュー>プラグイン>プラグインをみつけるをクリック

“Copy CSS to Clipboard” 検索し、プラグインを入れる。

レイヤーを選択後、メニュー>プラグイン>Copy CSS to Clipboard をクリック

XD CSSコピー

メモ・テキストにはりつけると↓

width: 1280px; /* 参考にならない */

height: 1081px; /* 参考にならない↓ */

background: #f4f1f0;

opacity: 0.2;

Adobe もっと使いやすく。効率よく。

Adobeさんなので、知れば知るほど、もっと使いやすく、効率よく、作業ができるのかも♡

と思います。

今週末の〆切を乗りきったら、Webデザインに特化した機能って他にもないか、調べてみようと思います。

ほかのAdobeソフトに、ほとんどさわれていないので、徐々にいろいろ手を広げていきたいとも模索中。

自分だけだと、考え方・やり方が固定されてしまうことがありますが、

ほかの人からみたり・聞いたりしていいところはどんどん取り入れていこうと思うのでした♡