Skip to main content
Participant
Aug 28, 2024 8:53 AM UTC
Answered

Illustratorのcssパネルは非推奨?

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

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

r360studio Kazue Mori
r360studio Kazue MoriCorrect answer
Community Expert
Aug 29, 2024 4:45 PM UTC

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分)
ー ー ー ー

 

5 replies

r360studio Kazue Mori
Community Expert
r360studio Kazue MoriCommunity ExpertCorrect answer
Community Expert
Aug 29, 2024 4:45 PM UTC

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分)
ー ー ー ー

 

Translate
CourseKAuthor
Participant
Aug 30, 2024 4:39 PM UTC

r360studio Kazue Mori さん

 

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

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

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

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

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

私はちょっと苦手です。

 

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

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

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

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

Translate
r360studio Kazue Mori
Community Expert
Community Expert
Sep 2, 2024 1:36 PM UTC

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

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

 

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

 

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

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

 

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

 

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

Translate
Omachi
Legend
Aug 28, 2024 12:31 PM UTC

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

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

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

 

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

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

Translate
CourseKAuthor
Participant
Aug 28, 2024 1:27 PM UTC

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

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

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

 

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

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

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

Translate