CSS Panel Overview - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  3K views 16 likes 0 dislikes   20 Aug 2018
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Ciao mi chiamo Natalie e faccio parte del team di ingegneri di Google Web Designer.
Google Web Designer エンジニアのナタリーです
In questo video ti mostrerò il riquadro CSS come funziona e come può essere usato.
この動画では CSSパネルの 機能と使い方を説明します
Quando modifichi l'aspetto, la posizione o il layout di un elemento in Google Web Designer
GWDで要素の外観、位置、 レイアウトを編集すると
lo strumento genera automaticamente il codice CSS corrispondente.
最終的には変更後の CSSが自動生成されます
Quando disegno un div semplice se passiamo alla Vista codice vediamo l'elemento qui in HTML
たとえばシンプルなdivを作成して コードを表示すると HTMLで記述された要素と
e la regola dello stile CSS che è stata applicata automaticamente tramite il nome della classe CSS.
CSSクラス名を使って自動的に適用された CSSスタイルルールを確認できます
Se andiamo in Vista struttura e selezioniamo un colore di sfondo in Vista codice possiamo vedere
デザインビューに戻り たとえば 背景色を指定してからコードを表示すると
che questa modifica è stata impostata come proprietà CSS background-color nella classe di questo elemento.
要素のクラスにCSSプロパティの background-colorが追加されています
Quando modifichi gli elementi
このように何か変更を加えると
Google Web Designer prende molte decisioni al posto tuo riguardo a quale codice CSS creare e a dove inserirlo.
GWDが自動で判断し CSSを適切な位置に挿入してくれます
Può essere molto efficace ma potresti volere un maggiore controllo.
とても便利ですが もう少し制御したい場合もあります
Puoi consultare la Vista codice in ogni momento
もちろん コードは直接編集できますが
ma più il tuo file diventa grande più diventa difficile trovare le regole che stai cercando.
ファイルが大きくなると 目的のルールを探すのも大変です
È qui che entra in gioco il riquadro CSS.
そこでCSSパネルです
Si tratta di uno strumento per la modifica del codice CSS.
CSSパネルは インスペクタ兼編集ツールです
Se hai già usato strumenti come il riquadro Stili degli strumenti per sviluppatori di Chrome si tratta di un concetto molto simile.
Chromeデベロッパーツールの スタイルパネルとよく似ています
Il riquadro CSS ti mostra in ogni momento tutte le le regole di stile associate all'elemento
CSSパネルには 要素に適用されるスタイルルールが
in ordine decrescente di precedenza.
優先度の高いものから 順に表示されます
La prima della lista è speciale. Si tratta della dichiarazione dello stile incorporato
一番上に表示されるのは インラインスタイルの宣言
che attribuisce uno stile all'elemento.
つまり要素のスタイル属性です
Le altre sono semplici regole di stile.
残りはスタイルルールです
Sia che tu voglia modificare queste regole di stile
スタイルルールを直接 編集したい場合や
sia che ti interessi un maggiore controllo sulla gerarchia delle regole CSS
CSSルールを階層化して 細かく管理したい場合は
il riquadro CSS può essere molto utile.
CSSパネルが便利です
Ora cancello questo elemento
この要素は削除して
e vediamo insieme un caso di utilizzo.
具体的に使い方を説明します
Immagina che io voglia creare
まずボタンを1つ作成し
un pulsante, ma che nel mio documento ce ne saranno essere anche altri
ドキュメント内で何度も複製できる 汎用ボタンを定義しましょう
e vorrei che utilizzassero tutti lo stesso linguaggio visivo
全体の視覚表現を 統一したいので
quindi immagina che io debba rispettare una guida di stile in cui è specificato che tutti i pulsanti
従うべきスタイルガイドを決めて ボタンの基本仕様にします
devono avere i bordi arrotondati avere un'ombra e via dicendo.
すべてのボタンは角を丸め 影を付けることにしましょう
Quindi vorrei rispettare la guida e creare una gerarchia di stili.
汎用ボタンを複製して スタイルを階層化する作業は
Il riquadro CSS mi permette di farlo senza dover mai passare alla Vista codice.
コードビューを使わなくても CSSパネルで簡単にできます
Qui ho un div a forma di pulsante
ここにボタンの形の divを描画しました
e vorrei creare una classe generica che contenga tutti gli stili da applicare a tutti i pulsanti della mia pagina.
これにページの共通スタイルを適用して 汎用のボタンクラスを定義します
Faccio clic sul pulsante Aggiungi regola.
[+]をクリックして ルールを追加します
La chiamo "pulsanteBase"
名前は「baseButton」
e le attribuisco delle proprietà comuni. Potrei usare box-shadow
これに汎用のボタン プロパティを設定します box-shadowを追加して
diciamo che vorrei fosse nero trasparente
半透明の黒にします
e anche che avesse i bordi arrotondati.
それから角を丸くしましょう
Come vedi il riquadro CSS mi suggerisce le proprietà CSS standard automaticamente
このように標準のCSS プロパティが自動的に提案され
e posso usare le frecce SU e GIÙ per scorrere tra le opzioni.
上下の矢印キーで 選択できます
Seleziono border-radius. Posso premere il tasto TAB per accettare e qui possiamo mettere 20 pixel.
border-radiusを選び タブキーで確定します 半径は20ピクセル でいいでしょう
Il cursore deve essere sempre un puntatore
カーソルはポインター
e mettiamo un colore sullo sfondo per avere qualcosa da guardare
識別しやすいように 背景色も変えておきましょう
diciamo un pulsante grigio.
これでグレーの 汎用ボタンができました
Ora definisco alcuni pulsanti specifici
では実際のボタンを いくつか作ってみましょう
per esempio un pulsante OK e un pulsante Elimina. Entrambi ereditano lo stile "pulsanteBase" ma hanno anche stili più specifici.
OKボタンと削除ボタンを baseButtonスタイルを継承し さらにスタイルを追加して作ります
Quindi seleziono entrambi questi div.
新しい2つのdivを選択し [+]をクリックしてルールを追加します
Faccio di nuovo clic su Aggiungi regola ma questa volta invece di creare un nuovo stile vorrei applicare la classe "pulsanteBase" esistente.
今回は新しいスタイルを作成するのではなく baseButtonクラスを適用します
Basta che digiti il selettore
baseButtonと入力すると
e tutti gli stili di quella dichiarazione vengono applicati automaticamente.
宣言したすべてのスタイルが 読み込まれます
Ora posso modificare ogni singolo pulsante
ここからはボタンごとに 追加のスタイルを適用していきます
definendo lo stile che verrà applicato a ognuno di essi, al di là di questo stile di base.
汎用ボタンのスタイルをベースに それぞれのボタンを作成できます
Faccio nuovamente clic su Aggiungi regola. Chiamiamo questo stile "pulsanteOk"
[+]をクリックし 名前をokButtonにします
L'unica cosa che vorrei cambiare è che in questo caso lo sfondo sarà verde.
このボタンは背景色を 緑色にしましょう
Per il pulsante Elimina vale lo stesso,
削除ボタンも 考え方は同じです
ma lo sfondo sarà granata.
背景色は栗色にしましょう
Come negli strumenti per sviluppatori di Chrome, puoi eseguire il debug del CSS
Chromeデベロッパーツールと同じ方法で CSSをデバッグできます
utilizzando queste caselle di controllo blu per disattivare temporaneamente certe proprietà, come se non fossero mai state definite.
青のチェックを外すと そのプロパティを一時的にオフにできるので
Questo può risultare utile in presenza
CSSルールが複雑な場合に便利です
di un sistema di regole CSS complesso se vuoi vedere l'aspetto di alcuni elementi applicando solo alcuni stili, per esempio qui deseleziono lo sfondo verde
特定のスタイルを外すとどう見えるかを 簡単に確認できます 緑色の背景をオフにすると
e possiamo vedere questo elemento unicamente con lo stile di base e le altre proprietà di posizione.
汎用ボタンの色に戻りますが 位置などのプロパティは適用されたままです
Se volessi vedere i miei altri pulsanti diciamo senza border-radius posso attivare e disattivare la proprietà.
他にもたとえば border-radiusの オンとオフを切り替えたりできます
Riassumendo: abbiamo visto come usare il riquadro CSS non solo per modificare gli stili
まとめましょう CSSパネルを使うと スタイルを直接編集できるだけでなく
ma anche per creare un sistema di classi di stili senza dover mai andare nella Vista codice.
コードビューを使わずに スタイルクラスを階層化し拡張できます
È tutto per questo tutorial.
この動画は以上です
Grazie per aver guardato!
ありがとうございました
Similar videos:

UI Overview - Google Web Designer
Google Web Designer
4.5K views 35 likes 1 dislikes 20 Aug 201867% match


Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201857% match


Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202057% match

Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202057% match

Events Overview - Google Web Designer
Google Web Designer
5.3K views 39 likes 2 dislikes 01 Jun 201857% match


An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201457% match


Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201555% match

Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201550% match


Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201550% match


Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201648% match


Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201843% match


Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201842% match


Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201541% match


A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201441% match


Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201840% match


Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201840% match


2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201840% match


Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201940% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201838% match


Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201736% match


Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201836% match


Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201536% match


Image Processing Overview - Google Web Designer
Google Web Designer
4.3K views 65 likes 0 dislikes 31 Aug 202036% match

Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201835% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201635% match


Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201533% match


Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201633% match


Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201831% match

Authoring Dynamic Sample Data - Google Web Designer
Google Web Designer
14.6K views 62 likes 1 dislikes 28 Nov 201831% match

Responsive Campaign Tutorial - Google Web Designer
Google Web Designer
3.1K views 84 likes 0 dislikes 15 Oct 202030% match


Settings Privacy About Contact Donate