質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • HTML

    8067questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5153questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Chrome

    542questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 346

nozatodogers

score 16

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

https://gyazo.com/5b206b6eaf4714f891f2749801e67e4f

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

https://gyazo.com/d907b1cca871200f18df85493b39fdb1

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+6

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/15 10:29

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

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

    キャンセル

  • 2017/12/15 10:54

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

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

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

    キャンセル

  • 2017/12/15 17:24

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

    </style>
    の箇所ですか。

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

    キャンセル

checkベストアンサー

+4

質問内容からは「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に埋め込み用のタグが数種類用意されているのでフォームを表示したい箇所に要望に合うものを記載してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/18 18:44

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

    はい その通りです

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

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

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

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

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

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

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

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

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

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

    キャンセル

  • 2017/12/19 09:21

    回答編集しました

    キャンセル

  • 2017/12/21 22:22

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

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

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

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

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

    キャンセル

  • 2017/12/22 09:28

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

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

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

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

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

    キャンセル

  • 2017/12/22 22:19

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

    キャンセル

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/18 20:38

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8067questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5153questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Chrome

    542questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。