Skip to main content
Participant
August 28, 2024
解決済み

Illustratorのcssパネルは非推奨?

  • August 28, 2024
  • 返信数 2.
  • 986 ビュー

Illustrator の機能で、cssパネルは非推奨との表示がありますが、どうしてでしょうか?

使用するとWebサイト作成に便利だと思うのですが。

解決に役立った回答 r360studio Kazue Mori

CourseKさん、こんにちは。

Omachiさんから既にコメントがあった通りの理由だと思うのですが、CSSのコード的に補足を。

 

次のコードは、IllustratorのCSSパネルから出力したCSSの一例です。

 

.st0
{
background : #FFFFFF;
background : rgba(255, 255, 255, 1);
border-style : Solid;
border-color : #231815;
border-color : rgba(35, 24, 21, 1);
border-width : 1px;
}

 

これをイマドキの書き方になおしてみると次のような感じに書くことができます。

.st0 {
background: rgb(255, 255, 255);
border: 1px solid rgb(35, 24, 21);
}

 

くわしくは、CSSのコードを調べてもらいたいのですが、前後のちがいとしては、

 

・CSSパネルのコードは、いまは対象になっていないブラウザ(Internet Explorerなど)の対応コードも含まれていたり、冗長すぎる。

 

rgb() など、新しいCSS に対応していない

 

などがあり、いま現場で使うには、非推奨なCSSコードだという感じです。

 

今後、CSSパネルは無くなるかもしれませんが、現状、過去データとの互換性もあり、すぐに機能を削除できないのではと思います。

 

以上、ご参考になりましたら幸いです。

ー ー ー ー
このコメントが回答に繋がったら“✔正解”を。
参考になったことがあれば“▲賛成票”を。
読んだ結果を伝えてくださるとうれしいです。

r360studio Kazue Mori 🦔
(執筆時間:26分)
ー ー ー ー

 

返信数 2

r360studio Kazue Mori
Community Expert
Community Expert
August 29, 2024

CourseKさん、こんにちは。

Omachiさんから既にコメントがあった通りの理由だと思うのですが、CSSのコード的に補足を。

 

次のコードは、IllustratorのCSSパネルから出力したCSSの一例です。

 

.st0
{
background : #FFFFFF;
background : rgba(255, 255, 255, 1);
border-style : Solid;
border-color : #231815;
border-color : rgba(35, 24, 21, 1);
border-width : 1px;
}

 

これをイマドキの書き方になおしてみると次のような感じに書くことができます。

.st0 {
background: rgb(255, 255, 255);
border: 1px solid rgb(35, 24, 21);
}

 

くわしくは、CSSのコードを調べてもらいたいのですが、前後のちがいとしては、

 

・CSSパネルのコードは、いまは対象になっていないブラウザ(Internet Explorerなど)の対応コードも含まれていたり、冗長すぎる。

 

rgb() など、新しいCSS に対応していない

 

などがあり、いま現場で使うには、非推奨なCSSコードだという感じです。

 

今後、CSSパネルは無くなるかもしれませんが、現状、過去データとの互換性もあり、すぐに機能を削除できないのではと思います。

 

以上、ご参考になりましたら幸いです。

ー ー ー ー
このコメントが回答に繋がったら“✔正解”を。
参考になったことがあれば“▲賛成票”を。
読んだ結果を伝えてくださるとうれしいです。

r360studio Kazue Mori 🦔
(執筆時間:26分)
ー ー ー ー

 

CourseK作成者
Participant
August 30, 2024

r360studio Kazue Mori さん

 

詳しい情報をいただき、ありがとうございます!

また、お返事が遅くなり、大変失礼いたしました。

私は現在、htmlとcss 及び、Illustratorを使ったデザインを勉強しておりまして、

cssも色々な記述の方法があるのですね。

「イマドキの書き方」はショートハンドの記述法でしょうか?

私はちょっと苦手です。

 

私もまだまだ勉強しないと実用化は遠いと思いました。

でもこれからはWEBサイト作成も技術が発達し、段々簡単になるのかなと思います。

詳しい情報に感謝いたします!

ありがとうございました。

r360studio Kazue Mori
Community Expert
Community Expert
September 2, 2024

CourseKさん、返信ありがとうございます。

CSSは、ここ数年めぐるましく改良されているので、ちょっと目を離すと新しいルールが追加されてて、追いかけるのがたいへんになってきてますね。

 

「イマドキの書き方」はショートハンドの記述法でしょうか?

 

はい。ショートハンドの書き方です。

類似の属性が1行で見渡せるので、修正ミス、漏れなどが防げて、読むのに馴れておけば、管理しやすいコードがかけると思います。

 

ノーコードツールもでていますが、ベースになるコードの知識は、できるだけ押さえておきたいなと個人的には思います(今回は、調べる機会をもらえてよかったです)。

 

こちらこそ、ありがとうございました。

Omachi
Legend
August 28, 2024

まずIllustratorでWebデザインをすること自体、時代遅れということがあります。

AdobeはXDというプロトタイピングツールを開発し、Webデザインをそちらで行うようユーザーを誘導しました。XDはIllustratorのデータを取り込めることもあって、その時点でIllustratorでのWebデザインは終了したと言えます。

しかしAdobe XDも開発を終了してしまいました。それはAdobeが、今一番多く使われているWebデザインツールであるFigmaの買収が決まったからです。(しかし、それは規制当局の承認が得られず白紙になってしまいました)

 

こういった経緯があり、IllustratorのCSS機能はすでに開発が停止しています。CSSは毎年新しい仕様が追加されていますが、IllustratorのCSSはずいぶん昔の仕様のままで止まっています。

確証はないのですが、非推奨と書かれているのは、今後(いつかわかりませんが)のバージョンで廃止されることだろうと思います。

CourseK作成者
Participant
August 28, 2024

ご返信いただき、ありがとうございます!

また、詳しくご説明いただき、感謝いたします!

そうだったんですね!とても勉強になりました。

 

私は最近、Webサイトの職業訓練校を修了しましたが、まだまだ知らないことが多いと痛感しました。

新しい情報を取り入れてアップデートしないとなりませんね。最近はFigmaなどで簡単にデザインを作れるみたいで、Webサイトもこれからは簡単にそうなって行くのかなと思います。

ありがとうございました!