あなたの右脳をマッサージ

うきうき絵画ひろば

ダッシュボードに戻って新しいウェブサイトを作成するには、Wをクリックしてください!

Webサイトの構造を理解します

このページのすべての要素は他のブロックの中のすべてのブロック(別名「ボックスモデル」)です。ウェブ要素をドラッグすると、1つのブロックからそれらをドラッグして別のものにそれらをドロップします。これは、HTMLがどのように動作するかです!

スーパーPLAN

$ 75 /月

20人以上の従業員を持つすべてのビジネスに最適です。 

  • 500ギガバイトのストレージ
  • 100万  ページビュー
  • 20共同研究
  • 50ソーシャルネットワーク
  • プレミアムサポート
あなたは何を参照してください。
注意:  あなたは、以下の概念をこのようなものをどのように設計するかを理解しましょう。
何  ブロック  これは、で作られています
本部ブロック
本部ブロック

H2は見出しスーパーPLANを

テキストブロックの $ 75 /月

パラグラフ 20人以上の従業員を持つすべてのビジネスに最適。 

リスト
  • リストアイテム
    500ギガバイト  のストレージ
  • リストアイテム
    100万  ページビュー
  • リストアイテム
    20  共同研究
  • リストアイテム
    50  ソーシャルネットワーク
  • リストアイテム
    プレミアム  サポート

それを自分を試してみてください

この段落をドラッグ...

制限なしのすべての機能。すべてのあなたが食べることができます。(これは、段落要素です)

ヒント:  クリックして上記の段落要素をドラッグし、右の価格の下にドロップします。また、(Altキーを保持)ドラッグ中にコピーし、コピー&ペースト(Ctrl + C、Ctrl + V)のようなショートカットを使用し、(キーの削除)削除することができます。 
紫のブロックに...

スーパーPLAN

$ 75 /月
情報:  これは、HTMLとウェブ構造がどのように動作するかである-の要素が互いに下または互いの内部でスタック。それは、流体と反応するウェブサイトを構築するための最良の方法です。
#2レイアウト要素

基本的なレイアウト要素

左上隅にある[+]アイコンをクリックして、あなたのウェブサイトに要素を追加します。セクション、コンテナと列 - 以下のWebデザインの中で最も基本的な構造要素の一部です。 

セクションでは、ボディ(ウェブサイトのキャンバス)に追加した場合、ブラウザウィンドウの幅の100%を占めている。
これは、ウェブサイトの大きな水平方向のセクションのために素晴らしいことです。

section要素

コンテナは、ブラウザの中央に中心960pxブロックです。通常、ほとんどのWebサイトのコンテンツは、それが中心だように、コンテナの内側に追加されます。容器は、通常、ボディまたは第要素に追加されます。

コンテナエレメント

列を追加すると、ユニークなウェブサイトのレイアウトを構築するための最速の方法です。あなたが別のデバイスにする方法を多くの列を編集するには、単に要素の設定にアクセスするには、右上にある歯車のアイコンをクリックしてください。

応答列
#3 CSSを使用した設計

あなたのエレメントのスタイル

要素を選択し、右のスタイルパネル(ブラシアイコン)にクラスを追加します。このパネルでは、テキストとフォントの色、行の高さ、勾配、ボーダー、影、などのようなグラフィックスタイルを追加することができます。ビジュアルWebデザインは、右のコードよりもずっと多くの楽しみですか!

ボタンのデザイン例
カートに入れる➜
それを自分のスタイル
ボタンテキスト➜
ヒント:  このボタンは、すでにいくつかの基本的なスタイルを持つクラス「ボタン」を持っています。ボタンを選択し、グラデーションを追加しようとすると、境界線、コーナーを丸め、内側/外側の影、状態のスタイルを合わせると、ホバースタイルの移行-すべてのスタイルパネルを使用しました。
あなたが作成しました
ボタンテキスト➜
「ボタン」クラスを適用
ボタンのテキスト
ヒント :Web デザインでは、それらが同じに見えるように多くの要素にクラスを適用することができます。あなたがスタイルパネルの上部にある[+]をクリックすると、そのクラスを見つけるために、「ボタン」を入力することで、上記のリンクにスタイルの「ボタン」クラスを適用します。 
フォームのデザイン例

ありがとう!

あなたの岩私の靴下!

おっと!フォームを送信しながら、何かが間違っていた:(

それを自分のスタイル

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

ヒント:  まず、(両方のフィールドに同じクラスを適用)テキストフィールドやボタンのクラスを作成します。そして、境界線のスタイル、背景色を変更し、ホバー&押された状態のスタイルを追加します。設定パネルで見つかったフォーム要素、(右上にある歯車のアイコン)のための「成功」状態のスタイルを忘れないでください。 
タイポグラフィ例

レイクウッドスタウト

レイクウッド、コロラド州のダークビール

伝説のスタウトは、コロラド州レイクウッドの街、山の男と彼の最も愛するものの美しい結婚から生まれました。山の男はまた、彼の斧と彼のシングルショットレミントンライフルを愛したが、彼は自分の町を愛していない限り。彼は彼女flowy川や雄大な山々を夢見ていました。そこで彼は、彼女の後彼の最大のスタウトと命名。したがって、栄光スタウトは、山の人の心の外に生み出されました。

"私は私の美しい都市のための私の永遠の愛を表現するために、この栄光のビールを細工しました。」

- マウンテンマン

それを自分のスタイル

レイクウッドスタウト

レイクウッド、コロラド州のダークビール

伝説のスタウトは、コロラド州レイクウッドの街、山の男と彼の最も愛するものの美しい結婚から生まれました。山の男はまた、彼の斧と彼のシングルショットレミントンライフルを愛したが、彼は自分の町を愛していない限り。彼は彼女flowy川や雄大な山々を夢見ていました。そこで彼は、彼女の後彼の最大のスタウトと命名。したがって、栄光スタウトは、山の人の心の外に生み出されました。

"私は私の美しい都市のための私の永遠の愛を表現するために、この栄光のビールを細工しました。」

- マウンテンマン

ヒント:  先に行くと、背景にカスタムタイポグラフィとスタイルを追加します。クールヒント:あなたが親ブロックにタイポグラフィーのスタイルを追加すると、その子のテキスト要素の全ては、これらのテキストスタイルを継承します。CSSではこの動作は、「カスケード」と呼ばれています。 
#4 CSSでレイアウト

CSSで構築するウェブレイアウト

最初のクラスを追加する要素の位置を変更して、位置のプロパティを編集するには、要素にスタイルを追加することに似ています。あなたはマージン、パディング、ディスプレイ、フロート、オーバーフロー、および位置について学びます。 

マージン&パディング例
ニュース速報

連邦エージェントがGunshopを襲撃、武器を探します

店のオーナーのスティーブWitmereは、以前闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を​​告白。

gunshopで見つかった多数のバズーカのうち、少なくとも$ 10,000価値の不法取得した絵画の数万人でした。これらのダムの絵のために支払うために重い代償を厥。

説明:  マージンとパディングがスタイルパネルの位置パレットで見つけることができます。追加証拠金は、ブロックの外にスペースを追加し、パディングを追加すると、ブロックの内側にスペースを追加します。
自分を間隔に追加
ニュース速報

連邦エージェントがGunshopを襲撃、武器を探します

店のオーナーのスティーブWitmereは、以前闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を​​告白。

gunshopで見つかった多数のバズーカのうち、少なくとも$ 10,000価値の不法取得した絵画の数万人でした。これらのダムの絵のために支払うために重い代償を厥。

ヒント:  メイングレーブロック(親要素)のすべての側面にパディングを追加することで起動します。そして、個々のテキスト要素(子要素)間の間隔を追加するには、下余白を追加します。ヒント:また、反対側に適用するすべての側面とALTに適用するマージン/パディングコントロールを使用している間、Shiftを押したままにします。
「表示:ブロック」の例

この見出しが表示されるように設定されている:ブロックを

この段落は表示に設定されています:ブロック。だから、親ウィンドウの幅を満たし、他のブロックの上にスタックします。 

ブロック:ディスプレイとボタンの表示とボタン:ブロックこのリンクを表示するように設定されて:ブロックこのリンクを表示するように設定されている:ブロック
説明:  ブロックに要素の表示設定を設定するには、それらが互いの上にスタックにし、100%にその親ブロックの幅を記入します。ほとんどの要素は、実際には、デフォルトでこの設定を持っています。 
自分を:彼ら「一括表示」してください
これはボタンである。これは、ボタンで表示されるリンク:デフォルトによって、インラインリンクが表示されている:インラインデフォルトで
ヒント:  これらの要素を選択します(一部はインラインブロックであり、一部はインラインであり)、それらを表示します彼らはお互いの上に積み重ねるようにブロック。 
「ディスプレイ:インラインブロック」の例
説明:  インラインブロックに設定する要素の表示を設定するには、ブロックの幅は、その中にコンテンツの幅に適合するようになります。すなわち、それらの内容が十分に小さい場合には、互いに隣に積み重ねることができることを意味します。あなたは上のボタンをコピー&ペーストし、それがどのように動作するか確認するために内のテキストを編集することができます。
彼らは自分自身をインラインブロック作ります
ダウンロード[編集]を
ヒント:  上記の要素を選択し、それらを表示させる:彼らは隣同士に積み重ねるようにインラインブロック。あなたは画像がボタンに次のスタックていることがわかります。ヒント:(:デフォルトでブロック本部ブロックが表示されているため)別々の事業部のブロックにボタンや画像を削除すると、彼らはお互いの上に積み重ねるようになります。
例をフロート

私たちのニュースレターに参加

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

説明:  設定画面:インラインブロックまたはフローティング(この例では)側の要素側をスタックする最も一般的な方法です。この例では、私は何かをフロートする方法を紹介します。 
それを自分でフロート

私たちのニュースレターに参加

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

ヒント:  まず、テキストフィールドを選択し、それがフロートにする:左、それに割合幅(例:60%)を得ました。左だけでなく、別の割合の幅(例:40%)を設定します。そして、フロートボタンを設定ので、両方を100%まで追加。それが並んでスタックする任意の要素を強制的に手動の方法です。 
絶対位置の例

ジョーのマイカップ

これは、写真のキャプションテキストです。

説明:  あなたは、要素上の絶対位置を設定する場合は、その親ブロック内の任意の場所にそれを配置することができるでしょう。内側に配置するためにどの親を選択するには、相対的に親要素の位置を設定します。注意:要素は、彼らが他の要素の上に浮い絶対配置されているとき。
それを自分のスタイル

ジョーのマイカップ

これはジョーの私のお気に入りのカップのための写真のキャプションです。

ヒント:  第一の画像ラッパー要素を選択し、相対的にその位置を設定します。次の画像にドラッグし、キャプションを選択し、それは絶対に位置だし、7プリセットを選択します。正しい場所におすすめバッジを配置するには、第二のプリセットを選択し、それを手動で配置します。
#5  スタイルのカスケード

カスケーディングスタイルを利用

あなたは簡単に互いの上に追加のクラスを追加し、それらのクラスに異なるスタイルを追加することで、要素のバリエーションを作成することができます。我々は、ボタンのさまざまなバリエーションを有する場合、以下の例をご覧ください。 

NORMALボタン
ボタンを自分でデザインします
グリーンボタン
赤いボタン
ヒント:  番目のボタンを選択して、別のクラスを追加するために、次のクラスに加える[+]をクリックします。あなたは、「グリーン」、それを呼び出すことができます。そして、それに異なるスタイルを与えます。これらのスタイルは、ファーストクラスの基本スタイルをオーバーライドします。そして、赤いボタンを作成します。 
#6メディアクエリー

異なるデバイスのための設計

Webflowのでは、まずデスクトップデバイスのためのあなたのウェブサイトを設計し、(上部バーのデバイスアイコンにアクセス)、モバイルデバイス上の変更を行います。モバイルデバイスのスタイルを追加すると、デスクトップのスタイルを上書きします。 

応答見出しの例

これは、モバイルデバイスで小さくなって、いくつかの見出しのテキストです。

説明:  この見出しは、デスクトップ上の本当に大きなですが、我々はそれがモバイルデバイス上で小さくなるようにしたいです。文字サイズや行の高さが減少したことを確認するために上部のバーにあるデバイスをクリックします。
それを自分で解決

この大きな見出しテキストは、モバイルデバイスに小さくなることを確認します。

ヒント:  タブレットデバイス上でこの見出しを選択して、フォントサイズや行の高さを小さくします。電話での景観と電話ポートレートデバイスについても同じ操作を行います。あなたがいることがわかります 
応答ボタンの例
ボタンのテキスト
説明:  このボタンは、それがマウスカーソルでクリックするのは簡単ですので、デスクトップ画面に小さくなることを意味しています。指でタップすることが簡単だように、私たちは、モバイルデバイス上でそれが大きく作られました
ボタンのテキスト
それを自分で解決
ヒント:  タブレットデバイスに移動し、ボタンのパディングを増やします。あなたがいることを行うと、それがデスクトップに設定され、以前のスタイルを上書きし、タブレットの下のすべてのデバイスにまでカスケード接続します。 
応答列例

コラム1

これはDIVブロックの内側にいくつかのテキストです。

コラム2

これはDIVブロックの内側にいくつかのテキストです。

コラム3

これはDIVブロックの内側にいくつかのテキストです。
説明 :Webflow の中の列の要素は、各デバイス用にカスタマイズすることができます。デフォルトの列では、デスクトップ上で隣同士にスタックし、モバイルデバイス上で互いの上に積み重ねます。 

コラム1

これはDIVブロックの内側にいくつかのテキストです。

コラム2

これはDIVブロックの内側にいくつかのテキストです。

コラム3

これはDIVブロックの内側にいくつかのテキストです。
それを自分で解決
ヒント :(あなたもそれを見つけるために、右側の一番下にある階層リンクバーまたはナビゲータパネルを使用することができます)上記の列または行の要素を選択は、(右上隅にある歯車のアイコン)を要素の設定に移動して確認してください列は、モバイルデバイス上でスタック。
#7リソース

さらにヘルプが必要ですか?

あなたはそれを得ました!毎日のWebflowとウェブデザインを学ぶ人々のトンがあります。開始するのに最適な場所は、ビデオチュートリアルです。そして、サポートセンターやコミュニティフォーラムの上で頭の上。 

ビデオチュートリアル

tutorials.webflow.com

フォーラム

forum.webflow.com

ヘルプドキュメント

help.webflow.com

(あなたは、プレビューモードに移行して上記のリンクをクリックすることができます - 左上隅にある目のアイコンを)