Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

WIXStudio > エディタ > Flashcards

エディタ Flashcards

操作方法の履修 (13 cards)

Start Studying
1
Q

★ソーシャルバーの追加方法は？

A

●サイトにソーシャルバーを追加する。
ページにソーシャルバーを追加し、訪問者の目にとまる位置に配置しましょう。たとえば、ソーシャルバーをサイトのヘッダーに表示して、全ページの最上部に表示させることができます。
ソーシャルバーを追加する方法：
エディタ左側で「要素を追加」 をクリックします。
「埋め込み・SNS」をクリックします。
「ソーシャルバー」をクリックします。
ソーシャルバーをページ上の希望の位置にドラッグします。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

コンテナの役割とは何？ある事のメリットは？

A

ウェブサイト制作における「コンテナ」とは、一般的にHTMLやCSSで使用される要素で、
他の要素をグループ化して整理するためのものです。コンテナは、ページのレイアウトを構成する基本的な単位として機能し、複数の要素をまとめてスタイルを適用したり、配置を調整したりするのに役立ちます。

コンテナの役割
1. レイアウトの構築: コンテナは、ページの全体的なレイアウトを構築するために使用されます。例えば、ヘッダー、フッター、サイドバー、メインコンテンツなどを配置するための枠組みを提供します。

  1. スタイリングとデザインの統一: コンテナを使用することで、グループ化された要素に一貫したスタイルを適用できます。これにより、デザインの統一感を保つことができます。
  2. レスポンシブデザインの実現: コンテナを使って要素をグループ化することで、異なるデバイスサイズに対して柔軟にレイアウトを調整するレスポンシブデザインを容易に実現できます。
  3. コードの整理: コンテナを使うことで、HTMLコードをより整理された形で書くことができ、保守性が向上します。

コンテナを使用するメリット
- 柔軟性の向上: コンテナを使うことで、ページのレイアウトを簡単に変更したり調整したりすることができます。
- 再利用性: 一度作成したコンテナを他のページやプロジェクトで再利用することができ、開発効率が向上します。
- 一貫性のあるデザイン: コンテナを使用してスタイルを統一することで、サイト全体のデザインに一貫性を持たせることができます。
- メンテナンスの容易さ: コンテナを使ってコードを整理することで、後からの変更や修正が容易になります。

これらの理由から、コンテナはウェブサイト制作において非常に重要な役割を果たしています。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

★コンテナの追加方法は？

A

https://support.wix.com/ja/article/wix-studio-%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B#adding-containers-to-a-site

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

CSS グリッドを活用するメリットは？

A

CSSグリッドを活用することには多くのメリットがあります。以下にその主要なメリットを挙げます。

CSSグリッドのメリット

  1. レイアウトの柔軟性:
    • CSSグリッドは2次元のレイアウトシステムであり、行と列を同時に操作できます。これにより、複雑なレイアウトを簡単に設計できます。
  2. 直感的なコード:
    • グリッドレイアウトは、HTML要素をどのように配置するかを視覚的に理解しやすく、コードの可読性が向上します。
  3. レスポンシブデザインの簡素化:
    • メディアクエリと組み合わせることで、異なるデバイスサイズに応じてレイアウトを簡単に調整できます。グリッドテンプレートを使って、要素の配置を柔軟に変更できます。
  4. 自動配置機能:
    • CSSグリッドは、要素を自動的にグリッド内に配置する機能を持っており、特に多くの要素を扱う場合に便利です。
  5. 重なり合った要素の管理:
    • グリッドを使用することで、要素を重ねて表示することができ、複雑なデザインを実現しやすくなります。
  6. ギャップの簡単な管理:
    • グリッドでは、行や列の間に「ギャップ」を簡単に設定でき、要素間のスペースを統一的に管理できます。
  7. コードの簡潔化:
    • グリッドを使用することで、従来のフロートやポジショニングを多用したレイアウトに比べて、コードがシンプルになり、メンテナンスが容易になります。

これらのメリットにより、CSSグリッドは現代のウェブ開発において非常に強力で便利なツールとなっています。特に複雑なレイアウトを実現したい場合や、レスポンシブデザインを効率よく行いたい場合に最適です。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

WEBサイトに使用するハンバーガーメニューはPNGとSVGデータではどっちがメジャーでSEO的に有効か？

A

ハンバーガーメニューに使用する画像フォーマットとして、PNGとSVGのどちらがメジャーでSEO的に有効かについて説明します。

まず、SVG（Scalable Vector Graphics）は、ベクター形式の画像であり、解像度に依存せず、どのサイズでも鮮明に表示される特性があります。これにより、レスポンシブデザインにおいて非常に有用です。SVGは、HTML内に直接埋め込むことができ、CSSやJavaScriptでスタイルを変更したり、アニメーションを加えたりすることも可能です。このため、SVGは特にモダンなウェブデザインにおいて人気があります。

一方、PNG（Portable Network Graphics）は、ラスター形式の画像で、透明度をサポートし、高品質な画像を提供しますが、サイズが大きくなる傾向があります。PNGは、特に複雑な画像や色数が多い場合に適していますが、解像度に依存するため、異なるデバイスでの表示においてはSVGほどの柔軟性はありません。

SEOの観点から見ると、SVGは以下の理由で有利です：

  1. 軽量性: SVGファイルは通常、PNGファイルよりもサイズが小さく、ページの読み込み速度を向上させることができます。ページの読み込み速度はSEOにおいて重要な要素です。
  2. インデックス化: SVGはテキストベースのフォーマットであるため、検索エンジンが内容をインデックス化しやすいです。これに対して、PNGは画像データであるため、内容を理解することが難しいです。
  3. アクセシビリティ: SVGは、適切な属性を使用することで、スクリーンリーダーなどの支援技術に対しても情報を提供しやすく、アクセシビリティの向上に寄与します。

したがって、ハンバーガーメニューに関しては、SVGがメジャーであり、SEO的にも有効であると言えます。特に、モダンなウェブデザインやパフォーマンスを重視する場合、SVGを選択することが推奨されます[2][3][4]。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

CMSとは？

A

『CMS（Contents Management System）』
Webサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Wix のお知らせ機能とは?

A

お知らせ機能は、webサイトの最新情報を届けるため、
また、更新されていることでユーザーさんに信頼感を与えられるため、ファーストビューの下に設置されていることが多いです。
https://wix-media.creative-raja.com/2492

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

CMSの利点と、サイト制作のどの部分でかつようできるのか？

A

専門知識を持たない人でも簡単にWebサイトの制作・更新などを行えるシステムのことです。

CMSを導入していないWebサイトを編集する場合、1ページごとに完成形のデータを作成して管理しているため、HTMLやCSSなどの専門知識を用いて編集を行わなければなりません。そのため、軽微な修正であっても高度な専門知識や労力を必要とします。

しかし、CMSを導入しているWebサイトの場合は、データベースに保存されている画像やテキストなどのデータをCMSが組み合わせて、ページを自動生成する仕組みのため、部分的に簡単に修正可能です。テンプレートを活用してデザインを作成することもできます。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

CSSグリッドのグリッドとはどのような意味か？
また、CSSグリッドを活用できる要素はどこか？

A

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。

グリッドとは何か？
グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

サイトのコーディングに関して、コンテンツと要素の違いが分からない。
簡潔に教えて欲しい。

A

コンテンツと要素は、ウェブページの構造を理解するための基本的な概念です。それぞれの違いを簡潔に説明します。

  1. 要素（Element）:
    • 要素は、HTML文書の基本的な構成単位です。要素は開始タグと終了タグ、およびその間に含まれるコンテンツから成ります。
    • 例: <p>これは段落です。</p> ここで <p> は段落要素を示しています。
  2. コンテンツ（Content）:
    • コンテンツは、要素内に含まれる実際の情報やデータです。テキスト、画像、リンクなどがコンテンツに該当します。
    • 例: 上記の例で「これは段落です。」がコンテンツです。

要素はコンテンツを包み込む構造を提供し、ウェブページのレイアウトやスタイルを定義するのに使われます。コンテンツはユーザーに伝えたい情報そのものです。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

2024/11/17(Sun)
★WixStuido：スタックとは

🍷WixStuido：サイトのサイズ設定方法

★WixStudio：ドッキング・margin・paddingのdockingとは？

★アスペクト比＝aspect ratioとは

A

★スタックは、縦または横の順序に関係なく、要素のグループを「ハグ」するフレックスボックスコンテナです。これにより、定義した間隔で要素が重ならないように整理されます。 また、負のマージンを使用して、要素を意図的に重ねることもできます。
因みに★Wix Studioにおける「ハグする」という表現の意味は？
Wix Studioにおける「ハグする」という表現は、フレックスボックスコンテナがその中に含まれる要素をぴったりと囲むようにサイズを調整することを意味します。具体的には、コンテナが内部の要素に対して余分なスペースを持たず、要素の自然なサイズに応じて自動的にサイズが決まることを指します。これにより、要素間に定義された間隔を維持しつつ、無駄なスペースを最小限に抑えたレイアウトが実現されます。
また、負のマージンを使用することで、要素同士を意図的に重ね合わせることが可能です。これは、デザイン上の効果を狙って要素を部分的に重ねたり、特定の視覚的な配置を作り出したりする際に有用です。

★dockingとはWix Studioにおける「ドッキング」とは、ウェブサイトのデザインやレイアウト作成時に、要素を特定の位置に固定する機能を指します。これにより、ページのサイズが変わっても、要素が指定された位置に留まるように設定できます。具体的には、以下のような効果があります

  1. 位置の固定: 要素をページの特定の位置に固定することで、画面サイズが変わったときにも要素の位置が変わらないようにします。これにより、デザインの一貫性を保てます。
  2. レスポンシブデザインのサポート: ドッキングを利用することで、異なるデバイス（PC、タブレット、スマートフォンなど）での表示を最適化しやすくなります。要素が自動的に再配置されるのではなく、意図した位置に留まるため、デザインが崩れるのを防ぎます。
  3. ユーザー体験の向上: 固定された位置に要素を配置することで、ナビゲーションバーや重要なボタンなどを常に見える位置に保つことができ、ユーザーの利便性を高めます。

このように、ドッキングはウェブデザインにおいて重要な役割を果たし、視覚的な整合性と使いやすさを提供します。

★aspect ratioについて、「アスペクト比」の「アスペクト」は、「側面」や「見え方」という意味を持つ言葉です。特に、何かの特徴や特性を指す際に使われます。

具体的に「アスペクト比」の場合、「アスペクト」は画像やビデオの「見え方」や「形状」を示しています。つまり、幅と高さの関係性がどのように見えるか、どのような形をしているかを表現するために使われています。この比率が異なると、同じ内容でも見え方が変わるため、「アスペクト」はその違いを示す重要な要素です。
例を挙げると、アスペクト比 16:9について

これは一般的なテレビやコンピュータの画面の形です。幅が高さの16倍で、高さが9倍です。例えば、16センチメートルの幅に対して9センチメートルの高さの長方形です。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

2024/11/19(火)

★©の役割について。

★サイトの著作権表記のAll rights reservedに関して。
https://copyright-topics.jp/topics/all-rights-reserved-unnecessary/

「All rights reserved」は現在不要な慣習。多くの国が無方式主義を採用し、特に日本では歴史的に不要。シンプルな著作権表示「©年＋著作者名」で十分。

★Calc()関数について。

★レスポンシブデザインのレスポンシブについて。

A

★©の役割について。
©マークの「©」は「Copyright」の頭文字「C」を円で囲んだもので、著作権を意味します。このマークは、著作物が著作権によって保護されていることを示す国際的なシンボルとして使われています。

★サイトの著作権表記のAll rights reservedに関して。
「All rights reserved.」は「すべての権利を留保する」という意味です。歴史的には著作権保護に必要でしたが、現在は多くの国が無方式主義を採用し不要です。慣習的に使われていますが、今後は省略も可能です。
留保」とは、特定の権利や主張を明示的に保持し、将来的にその権利を行使する可能性を確保することを指します。法律や契約の文脈では、権利を放棄せずに保持しておくことを意味します。つまり、「All rights reserved.」という表現は、著作権者がそのすべての権利を保持していることを示し、必要に応じてそれらの権利を行使する準備があることを伝えています。
★Calc()関数について。
カルク関数は異なる単位を組合わせて、より柔軟なレスポンシブデザインを実現することができます。
calc()関数は、CSSで動的な計算を行うために使用される便利な機能です。
この関数を使うことで、異なる単位を組み合わせたり、要素のサイズや位置を動的に設定することができます。
たとえば、幅をパーセンテージとピクセルの組み合わせで指定したい場合などに役立ちます。

構文
property: calc(expression);
ここで property は CSS プロパティ（例：width, height, margin など。expression は計算式です。計算式には加算（+）、減算（-）、乗算（*）、除算（/）が使用できます。

使用例

  1. 幅の計算
    .example {
    width: calc(100% - 50px);
    }
    この例では、要素の幅を親要素の幅の100%から50ピクセル引いた値に設定しています。
  2. 高さの計算
    .example {
    height: calc(50vh + 20px);
    }
    ```
    この例では、要素の高さをビューポートの高さの50%に20ピクセルを加えた値に設定しています。
  3. フォントサイズの計算
    .example {
    font-size: calc(1em + 2px);
    }
    この例では、フォントサイズを1emに2ピクセルを加えた値に設定しています。

注意点

  • 演算子の前後には必ずスペースを入れる必要があります。例えば、calc(100% - 50px) のように書きます。
  • calc() の中で使用する単位は自由ですが、互換性のある単位同士で使う必要があります（例えば、ピクセルとパーセンテージは組み合わせ可能ですが、ピクセルと秒は組み合わせられません）。
  • calc() 関数は、CSSのどのプロパティでも使えるわけではなく、数値を受け取るプロパティでのみ使用可能です。

このように、calc() 関数を使うことで、より柔軟でレスポンシブなデザインを実現することができます。

★レスポンシブデザインのレスポンシブについて。
「Responsive」を日本語に訳すと「応答性がある」や「反応が良い」となります。ウェブデザインの文脈では、特に「レスポンシブ」として、デバイスや画面サイズに応じて動的にレイアウトを調整するデザイン手法を指します。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

2024/11/20(水)

★viewportについて

A

★viewpotrtについて。
viewportとはブラウザにおける表示領域の意味で、インターネットユーザーがWebサイトを訪れた際に見ているページ範囲を指します。
レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザインのことを示します。
viewportは、表示領域のことを示します。
設定は、head〜/headは、の中にメタ情報として設定します。
meta name=”viewport” content=”width=device-width,initial-scale=1.0”を設定しましょう。
device-widthとは、自動的にデバイスの表示幅に合わせてくれます。
initial-scaleとは、ページが表示されたときの倍率の設定になります。

How well did you know this?
1
Not at all
2
3
4
5
Perfectly

WIXStudio (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions