簡単なHTMLとCSSで構成しているページを参考にしてトライアルベースで作成したい

Question

たとえば、HTMLとCSSで構成されているページがあります。下記はChromeのF12からの画面です。

https://gyazo.com/5b206b6eaf4714f891f2749801e67e4f

ここからHTMLとCSSをコピペしてメモ帳に保管しておき、オンラインエディターであるTimble
(まだ使っていない)の左側のHTMLとCSSでオリジナルと同じように打ち込んでいき、それを右側のプレビューでどのようにできていくか確かめたいのです。

https://gyazo.com/d907b1cca871200f18df85493b39fdb1

ここで質問したいのは、HTMLとCSSをどの画面の部分から抜き出せばいいのでしょうか

Answer 1

html
ページ上で右クリック→ページのソースを表示
まるっとコピペすれば良いです。

css
htmlの中に記述されている

<link rel="stylesheet"・・・のリンク部分（xxxx.css）をクリック 　cssの中身が表示されます。 まるっとコピペすれば良いです。

htmlもcssも本当に何も分からない状態であるなら、html5+css3みたいな本を１冊買って実際に何か作った方が理解は早くなると思います。

Comments

[nozatodogers]

＞html
ページ上で右クリック→ページのソースを表示
しかし、ものすごい量ですね。
</script>以下もですか
F12もこんなに量がおおいのですか

＞css
反対に短いですね。下記の<link rel="stylesheet"~JotForm</title>
<style>までですか
https://gyazo.com/d8f4c68b6b60bf95a5a049d35291f3f9
F12であればどこのところをみればいいのですか

[dit.]

>ものすごい量ですね
そこに書いてあるものがそのページ全てを構成しているものです。
F12で表示させた場合折りたたまれている部分があるので、それを展開させると同じような状態になると思います。
「必要な部分だけ」を判断できればもっと短くて済むかもしれません。

>CSSが短い
poko_pokoさんは<link rel="stylesheet"・・・のリンク部分と言っています。
右クリックでソースを表示すると、どこかに<link rel="stylesheet"で始まる記述がありますよね。その「xxxx（ファイル名）.css」というところです。
複数あるかもしれません。外部のCSSを読み込むための記述です。

これも、CSSのどの記述がどのHTMLを装飾しているかが判断できれば、すべてが必要なわけではないと思います。

[nozatodogers]

@dit
体裁だけでもいじるときもHTMLもいじらないとだめでしょうか。なにせ量があるので、どこを直したらよいか戸惑います。
>「xxxx（ファイル名）.css」とは <style class="cardStylesReactPortal">

</style>
の箇所ですか。

もし、体裁だけをカスタマイズをしたければ、htmlのところはコピペしたCSSの箇所にタグを挿入すればいいのでしょうか。

Answer 2

質問内容からは「HTMLとCSSで構成されている他の人が作ったサイトのコードをコピーしたい」という意図にしか取れませんでしたので、
poko_pokoさんの「ソースを表示してコピペすれば？」という旨の回答になると思います。

ただ、nozatodogersさんがやりたいことはおそらくJotFormというサービスで作成したフォームのデザインを変更したい、どうなっているのか確認したいということだと思います。
F12で確認したソース（あるいは右クリックからソースの表示をしたもの）は「表示されているページ内すべてを構成するもの」です。
フォームの表示部分だけでなく、ページ全体の構成、メールを送るための仕組み等も記載があると思われます。

また、「xxxx（ファイル名）.css」と言っているのは、2017/12/15 10:29のコメント提示の画像で言えば
//cdn.jotfor.ms/css/styles/form.css?8a9c7cc
//cdn.jotfor.ms/css/styles/buttons.css?8a9c7cc
//cdn.jotfor.ms/css/styles/nova.css?8a9c7cc
の3つだと思います。（?8a9c7ccは意味はありますが気にしなくていいです）
中身はかなり長いです。

このやたら長いCSSは、あなたが作成したフォームには使用していない部分のスタイルも含まれています。
（使っていないタイプのエレメントやテーマなど）
そのため、HTML、CSS含め「必要な部分だけ」を判断できれば　というコメントをそちらの回答に残しました。

フォームを構成する記述とそれを装飾するためのCSSが知りたければHTML5、CSS3系の教本や
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form辺りから基本の部分を学ぶことをお勧めします。（送信の仕組みやセキュリティは別問題として）

JotFormを使うのであれば、用意されているテーマから要望に近いものを設定し、それぞれのエレメントの設定を歯車マークから変更すれば、コードがわからなくてもそれなりのものが作れそうです。
作成したものをご自身のサイトに埋め込むこともできるようですし。

nozatodogersさんが最終的にやりたいことはどちらでしょうか。

---

ここから追記

最終的にJotFormを使い、スタイルを細かく指定したいだけなのであれば、
HTMLのコピーやCSSのコピーは必要ありません。
（ゆえに右クリックやらF12やらは意味がありません）

全体の大まかな設定はフォーム作成画面の右側インクローラーのアイコンから出せるFormDesignerから設定するだけで変えられますし、選択できるテーマもそこそこ豊富です。
各エレメントの項目名や横幅を変えたい程度であれば歯車マークからオプションを変更すればいいでしょう。

さらに細かく指定したいのであれば、JotFormの機能にCSSを指定するためのものがあります。
FormDesignerの下部ADVANCED DESIGNERから下図の画面へ移動します。

この中のCSSタブに移動し、フォーム中の要素にマウスを合わせればclassが確認できますし、
クリックすれば右下のエディターにCSSが記載されます。
さらにそこからエディター上部のCSS Helper内のボタンをクリックすればそれぞれに指定できるプロパティが出ます。
ページのフォーム外をクリックすれば右のエディターに今まで指定したCSSが羅列されるはずです。
内容を保存しフォームに戻れば適用されてますし、FormDesignerのCSSタブを見ればその内容が記載されているはずです。
（それぞれのプロパティボタンがどんな機能を持つかはクイックリファレンスあたりを見てください）

フォーム送信機能を持ったHTMLはJotFormが生成してくれますので、nozatodogersさんがHTML側を編集する必要はありません。

フォームを使いたい場合
フォームだけのページにリンクさせたいのであればPUBLISHタブ-QUICK SHAREにURLが表示されますし、
既に作成してあるWebページに埋め込みたいのであればPUBLISHタブ-EMBEDに埋め込み用のタグが数種類用意されているのでフォームを表示したい箇所に要望に合うものを記載してください。

Comments

[nozatodogers]

>JotFormというサービスで作成したフォームのデザインを変更したい、どうなっているのか確認したいということだと思います。

はい　その通りです

>F12で確認したソース（あるいは右クリックからソースの表示をしたもの）は「表示されているページ内すべてを構成するもの」です。

右クリックでのフレームのソース、ページのソース、検証並びにF12といったいどれを参考にしたらいいかわかりません

フォームの体裁を変えたいだけですけど、それどもHTMLが関係ありますか。関係ないとすれば、どの部分をコピペすればいいでしょうか

CSSで<link rel="stylesheet"の箇所は対象にしなくていいのでしょうか。

>CSSのどの記述がどのHTMLを装飾しているかが判断

判断する対象は右クリックかF１２かどちらでしょうか

>JotFormを使うのであれば、用意されているテーマから要望に近いものを設定し、
それぞれのエレメントの設定を歯車マークから変更すれば、コードがわからなくてもそれなりのものが作れそうです。

はい、それも考えています。歯車マークから変更して、作成手順をメモしていきます。類似のホーム作成に関して役立てようと思います。

>作成したものをご自身のサイトに埋め込むこともできるようですし。

ニュアンスはわかるのですが、難しいことでしょうか

[dit.]

回答編集しました

[nozatodogers]

@dit
>ゆえに右クリックやらF12やらは意味がありません
方向性をアドバイスして頂いてありがたいです。CSSに関してはごく大まかな知識に留めておき。フォームの作成はJotformのフォームのエレメントの中身を把握し、それを真似て作成していきたいと思います。間違いやすい点はメモをしてPDFに保存していきます。

ditさんのスクリーンショットから質問させてください
＞③エレメントをクリックする
この場合のエレメントはたとえば、HeadingとかNameの事でしょうか

>④プロパティを指定
CSSHelperにCSSを記入していくとプレビューで見ることができるでしょうか

現在のHeadingのフォームのCSSが右のエディターでみることができるでしょうか

PS:JotFormに関してご丁寧に解説してありがとうございます。当社Jotformに関して全然ブログなどの記事がなかったので大変助かります。サービスはいいですが、なにせ英語なのでそこが大変です。

[dit.]

最終的にJotFormを使うのであればHTMLやCSSは最低限の知識で良いと思います。
特にHTMLはJotFormが作成してくれるのでほとんど触らなくても何とかなります。

③エレメントを…の部分
確かに回答内の他の「エレメント」と使い方が少し違いましたね。
ここでは見出しやテキストボックス、その下のラベルなどそれぞれの部品を指す言葉として使っています。
②で示している各部品をクリックすれば③の所に自動的に出てきます。

④CSS Helper
直接下部のエディターに記載しても左側のプレビューに反映されると思います。
ただ、どの部分にどんなclassがついているかわかりにくいと思いますので
②の部品をクリック→④Helperからプロパティをクリック→③それぞれの内容を下のエディターに書いていく　という作業になります。
（②をクリックすれば③が自動的に入るため画像ではこの順番になっていますが作業的には②④③です）
ここではある程度のCSSの知識が必要になるかもしれません。

フォーム作成画面で選択しているテーマや配色の指定がどうなっているかはこの場所では確認できません。
あくまでも「テーマより優先させてこのデザインにしてね」という内容を追記しているだけです。

JotFormに関して、私もこの回答用に初めて触りました。
英語は正直不得意ですが、HTMLやCSSで使われているような言葉と基礎的な英単語が解ればどうにかなります。
がんばってください。

[nozatodogers]

本当に有益な情報とアドバイスありがとうございました。

Answer 3

まずは色々と自分で「実行」してみてください。想像だけでは質問者さんのための「勉強」になりません。

それから、上手くいかない場合に、「どこがどう上手くいかないのか」を質問された方が、皆さんも答えやすいですよ。

Comments

[yoshinavi]

他の回答者さんへの返信等見ると、回答を求める前に「HTML」「CSS」の基本をしっかりと勉強してからでないと「何が自分にとって必要な箇所なのか」が判断できないと思います。

例えが悪いですが、基本が無いのに応用など出来るはずありません。
HTML・CSSを基本事項を勉強してからでないと各ブラウザ装備の開発ツールは当然の事ながら使えません。

HTML・CSSの関連性が理解できれば、今回の質問自体が無くなると思います。大変でしょうが、基本を身に着ける事が一番の近道なので、頑張ってください。