技術用語がわからない - HTML/CSS/Javascriptテーブルに関する質問

Question

私はHTML/CSS/Javascriptに関連する質問がありますが、私はすべての技術用語を忘れてしまったので、尋ねる方法がわかりません。 。

私の究極の目標は、（コード）次の操作を行い、Webページの要素を構築することである。

-Hasことが、クリックされたとき、変数を表示（グラフィカルボタンではなく、HTML「ボタン」）クリック可能な要素の数特定のものについての興味深い詳細を提供するテキストの量。可能であれば、これらのボタンを "ハイライト"にする方法が望まれます（クリックしたときにイメージが上下左右にスワップされる方法を知っていますが、これを私が意図しているものと一緒に働かせてください）。

- 各ボタンの前に何らかのラベルを貼り付けることができます。 （私の元の計画は、HTMLテーブルにすべてを投げることだったので、ボタンの片側にラベルを入力できる列を置くことができました）。

- 詳細ボックスが表示されたら、画像の背景が表示されるようにします。

- ボタンとそのタイトルプレートが詳細ボックスの一方の側にあり、詳細ボックス自体が他方の側にあるように編成されています。

例：

私は果物の名前（アップル、オレンジ、バナナ、梨）を持っている一番左の列を持っています。これらの名前のすぐ隣にある列には、フルーツ名（フルーツ名ごとに1つのボタンがあるので、Appleの場合は1つの行の{button}、次にオレンジの場合は次の行の{button}等。）。そのボタンをクリックすると、右端に、この詳細テキストの背景に背景画像（これらの詳細ボックスのすべてに同じ画像）が表示されます。この背景イメージとテキストは、ボタンがクリックされるまで隠されます。私は、同じボタンを2回クリックすると、テキストがもう一度隠されることを好みます。

私はこのすべてのための画像を構築するのに問題はありませんが、私はコードで迷っています。これをすべて何らかのHTMLテーブルとしてコーディングすることは可能ですか？整理しておくことができますか？左端の列（例）に背景イメージがあり、その上に置き換え可能なテキストがある（つまり、グラフィックの数が減る）ことは可能でしょうか？

私の質問と表現が技術的に記述的でない場合はお詫び申し上げます。私は単純なHTMLページに慣れてからずっとずっとCSS/Javascriptを学んだことはない。私の質問が理にかなっていないなら、私は自分の目標をより良く説明するためにイメージを描くことが大事です。

お返事ありがとうございます。

Answer 1

まあ、あなたが求めていることを行うための単一の「正しい」方法はありません。この問題には数十種類の方法があります。 1）ソリューションの構築にどれくらいの時間を費やしたいのですか？2）プロジェクトに異なる技術（BootstrapやjQueryなど）を追加した場合、問題になるのでしょうか？

を私はこのような状況で役立ちます考えることをどこかで聞いた親指のルールがあります：一般的な観点からでそれを見るために

。あなたのページのすべてのものは長方形です。すべて。あなたが実際にやっているのは、これらの四角形の名前をつけたり、スタイリングしたり、操作したりすることだけです。

HTMLページで作成する要素、ID、またはクラスは、CSSまたはJavaScriptで操作できます。あなたのHTMLページに存在しない場合は、CSSまたはjavascriptでそれを作成し、、次にを操作することができます。

ボタンとして具体的に呼び出されるアイテムだけでなく、「ボタン」にすることもできます。 "ボタン"にしたい矩形を選択できます。それらをターゲットにしてスタイルを設定するだけです。

（アドバイスとして、htmlの<button>機能を使用することをお勧めします。標準化されたセマンティクスはすべての人に役立ちますが、cssを使用してこれらのボタンのルックアンドフィールを変更できます）。

ページの情報の隠ぺいや上映を処理するための伝統的な方法ではJavaScriptおよび/またはjQueryのを使用することです：より具体的には

。

すべての共通のhtml要素をクラス名class="example-class"を操作して、ID名id="example-id"を操作する固有の要素を指定します。

Here's the jQuery page regarding .hide() and .show()。 （これらのメソッドに特定の問題がある場合は、Stack Overflowが役に立ちます）。 htmlで指定したクラスまたはIDをターゲットにします。

ページを整理するには、通常、<div>タグを使用してネストする方法があります。ブートストラップには、必要な役割を果たす特別なクラスが用意されています。水平線を補助するclass="row"、垂直線を補助するclass="col-SIZE-NUM"、セクションを整理するのに役立つclass="well"があります。

ブートストラップのメインページには、あなたの選択肢に関するかなり良い概要があります：Here。

上記のすべては、バニラのCSSとバニラのjavascriptでも行うことができます。ここであなたが少しでも簡単にしたいと思うかどうかを決定するのはあなた次第です。

希望すると便利です。