サーベイウェブサイト（調査用ギズモ）でCSSを使用しています

Question

私はかなり経験の浅いウェブプログラマーです。ちょっとしたHTMLやCSSを使っています。私は本質的にこれについて何も知らない。

私の現在の問題では、Webコーディングに関する知識が不足しているかどうか、またはこの調査ツールが設定されているかどうかを判断できません。

調査ギズモでは、アンケート自体の外部の場所に「カスタムCSS」コーディングを作成できます。私はこれが外部のCSSスタイルシートとして機能すると思いますが、そこに複数のスタイルを置くことができます。

次に、アンケートの各ページについて、他の場所で定義したスタイルにリンクするか、質問ごとにリンクすることができます。また、ページの先頭を変更することもできますし、別のドキュメントにある「カスタムHTML」のオプションもあります。

私がしようとしている何...

を、私はこのことについてギズモ（SG）の助けを調査するために話してみましたが、彼らの態度は、私はそれを理解すべきであるということですか、私は私のためにそれをプログラムするためにそれらを支払う必要があります画面の左側にビデオプレーヤーがあり、ビデオプレーヤーが静止している間にスクロールすることができる画面の右側にいくつかの質問を表示するようにします。

さて、SGはCSSを提供例は次のようになりものです：

.width-33{ 
clear: none; 
float: left; 
width: 33%; } 

私は本当にこれが何であるかを理解していない - それはクラスである、または何らかの形でスタイルシートの名前を近似しますか？いずれにしても、これをアンケートの質問にうまく適用できます。しかし、より複雑な構造をうまく適用する方法はわかりません。これを適用するには、アンケートの質問をクリックし、カスタムCSSスタイルのフィールドがあり、そのフィールドに「width-33」と入力します。

http://jsfiddle.net/avrahamcool/QMsuD/1/ここに表示されているようなことをしたいと思いますが、切り替える方法はわかりません（SGを動作させる方法を知る必要はありません）。

そのページからCSSがこの

* { 
    margin: 0; 
    padding: 0; 
} 
html, 
body, 
.Container { 
    height: 100%; 
} 
.Container:before { 
    content: ''; 
    height: 100%; 
    float: left; 
} 
.Header { 
    margin-bottom: 10px; 
    background-color: #6ea364; 
} 
.Content { 
    position: relative; 
    z-index: 1; 
} 
.Content:after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.Wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.Wrapper > div { 
    height: 100%; 
} 
.LeftContent { 
    background-color: purple; 
    overflow: hidden; 
} 
.LeftContent:hover { 
    overflow: auto; 
} 
.RightContent { 
    background-color: orange; 
    float: right; 
    margin-left: 10px; 
} 

のように見えるとHTMLは次のようになります。

<div class="Container"> 
    <div class="Header"> 
     <p>The Header div height is not fixed (But he can be if you want it to)</p> 
     <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p> 
    </div> 
    <div class="Content"> 
     <div class="Wrapper"> 
      <div class="RightContent"> 
       <p>You can fix the width of this content.</p> 
       <p>if you wont, his width will stretch just as it needs to.</p> 
      </div> 
      <div class="LeftContent"> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
      </div> 
     </div> 
    </div> 
</div> 

だから、私はこの作業を取得する方法を把握しようとしています。調査ツールがこれをどのように利用しているかを理解しようとすると混乱するかもしれませんが、経験豊かなプログラマーにとって理にかなったことが起こっていることを期待しています。

基本的に、このコード例を解析して、調査のギズモシステムにどのようにしたらいいですか？上記のCSSコードを外部のスタイルシートに変換するにはどうすればいいですか？それを実行すると、サーベイツールにCSSスタイルの "leftContent"（私のビデオプレーヤー）とCSSスタイル "rightContent"私の質問）。

これを行うには他の方法がありますか？このツールではJavaScriptも使用できます。

Answer 1

あなたの最初の質問にお答えします。このコードが何であるかを解説しましょう。

.width-33 { 
    // elements with a float are allowed next to the object with this class. It's redundant though because it has this property by default. 
    clear: none; 
    // align this object to the left of it's parent container. Multiple items with float:left will be placed next to each other. 
    float: left; 
    // the width is 33% of the parent containers' width. The classname is named after this property. 
    width: 33%; 
} 

これはクラスだと正しく考えました。このようなdivに割り当てられた場合：<div class="width-33"></div>、このdivはそれらのプロパティを取得します。

現時点では、Survey Gizmoでスタイリングを適用する方法がわかりません。何らかの外部スタイルシートを作成し、そのスタイルシートを異なる質問に割り当てることができるとします。そして、「カスタムHTML」の部分もあります。

あなたが達成しようとしていることから、カスタムHTML部分が必要になると思います。質問自体ではなく、すべての質問を含むコンテナに対処する必要があります。だからあなたは、調査のこれらのさまざまな部分の名前、クラス名、IDの意味を理解する必要があります。
調査を作成しているバックエンドエディタまたはダッシュボードから明らかでない場合は、調査をプレビューし、「inspect」または「inspect element」を右クリックすることをお勧めします。インスペクタツールが開き、ソースコードが表示されます。質問が入っているコンテナの名前とビデオが入っているコンテナの名前を探す必要があります。

これがあればレイアウトを作成できます。
非常に基本的なレイアウトです。私はそれをあなたの例よりも少ない行で行うことができるので、説明します。

ビデオコンテナと質問コンテナは、隣り合わせに配置する必要があります。両方のコンテナが画面の高さ全体を満たす必要があります。最後に、ユーザーが質問コンテナ内をスクロールできるようにします。

.video-container { 
    height: 100vh; // vh stands for view height. See explanation below 
    float: left; 
    width: 40%; // or any other width. 
} 
.questions-container { 
    height: 100vh; 
    float: left; // with both elements floated to the left, they'll be placed next to each other. 
    overflow: auto; // when the questions are longer than the container is high, a scrollbar will be added and you'll be able to scroll 
    width: 60%; // 100% - 40% (the other element) 
} 

なぜ100vhなく100%を選ぶのか？ 100%では、そのコンテナの他の親コンテナも100％の高さを持つ必要があることを確認する必要があります。すべて<body>タグまで。それはあなたの例の2番目のコードブロックで行われます。

2つのコンテナが隣り合わせに配置されていない場合、いくつかのマージンやパディングが余分な幅を与えている可能性があります。 40％+ 10px + 50pxなどです。
最も簡単な解決策は、padding: 0;とmargin: 0;を追加して削除することです。

あなたはパディングを追加したいならば、私は次のスタイルを追加することをお勧め：

.video-container { 
    height: 100vh; 
    float: left; 
    width: 40%; 

    box-sizing: border-box; // any padding (and borders) will be inset and will not be added to the total width. This doesn't count for margin! 
    padding: 20px; // or whatever width of padding you want 
} 

私はこのことができます願っています。