Q&A
cssのソースコードが崩れているようです。
```CSS body...
としているのを
```CSS
body...
と言う形にすればコードブロックになると思います
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>FF14スラング辞典</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10<body> 11 <div> 12 FF14 スラング辞典 13 </div> 14 15 <hr> 16 17 <p> 18 当サイトはFF14の多岐にわたるスラングをサイトのユーザー同士で追加、編集しあうユーザーによる 19 スラング辞典です。 20 </p> 21<a href="#a">ア行</a> 22<a href="#ka">カ行</a> 23<a href="#sa">サ行</a> 24<a href="#ta">タ行</a> 25<a href="#na">ナ行</a> 26<a href="#ha">ハ行</a> 27<a href="#ma">マ行</a> 28<a href="#ya">ヤ行</a> 29<a href="#ra">ラ行</a> 30<a href="#wa">ワ行</a> 31 32<p id="a"class="mb5">ア行</p> 33<p id="ka"class="mb5">カ行</p> 34<p id="sa"class="mb5">サ行</p> 35<p id="ta"class="mb5">タ行</p> 36<p id="na"class="mb5">ナ行</p> 37<p id="ha"class="mb5">ハ行</p> 38<p id="ma"class="mb5">マ行</p> 39<p id="ya"class="mb5">ヤ行</p> 40<p id="ra"class="mb5">ラ行</p> 41<p id="wa"class="mb5">ワ行</p> 42 43</body> 44</html> 45
CSS
body{
background-color: rgb(255, 218, 218);
}
div{
font-size: 80px;
}
p.mb5 {
margin-bottom: 30
em;
}
HTML初心者です。 ゲームの用語をサイトのユーザ同士で出し合い、用語辞典を作るようなサイトを作りたいです。 そこでお聞きしたいのが、新しい用語とその説明をユーザが記入すると、私が上記のコードで作成した五十音順の該当する位置にその用語が表示され、それをクリックすると説明ページに移動するようなコードを作りたいです。 説明が下手で申し訳ありませんが、分かる方よろしくお願いします。
回答に移動
コードブロックについてですが、
ファイル毎に```で囲んだものがコードブロックになります。
なので、
```HTML
ソースコード
```
(コードブロック間は1行以上スペース空けてください。)
```CSS
ソースコード
```
という形にすれば両方コードブロックで囲めます
googleフォームとスプレッドシートを組み合わせるのが一番早いんじゃないかなあ。
お二方、ご指摘ありがとうございます。
teratail自体あまり使わないので参考になります。
>質問者さん
私のコメントは見ましたか？HTML,CSS毎に```で始点、終点を囲む必要があります。
それと、編集画面の右側にはプレビューが表示されています。それを見ながら調整してください。
回答5件
0
ゲームの用語をサイトのユーザ同士で出し合い、用語辞典を作るようなサイトを作りたいです。
そこでお聞きしたいのが、新しい用語とその説明をユーザが記入すると、私が上記のコードで作成した五十音順の該当する位置にその用語が表示され、それをクリックすると説明ページに移動するようなコードを作りたいです。
いわゆるwiki(wikipediaの略称では無く、wikiというシステム形態)を実現したいという事だと思います。
自力で作成する場合
自力で作成するには、HTML+CSSのみでは実現不可能で、何らかのサーバサイドプログラミング言語で作成する必要があります。
この場合、
webアプリケーション開発の基本的な理解に加えて応用能力も必要になるため、teratailの回答欄で回答出来るような分量には収まりません。
まずは適当な初学者向けのwebアプリケーション開発の入門教材で勉強するところからスタートとなります。
サービスを提供したい場合
ユーザー参加型時点のサービスを提供することが目的であれば
様々なサービスが提供しているレンタルwikiを利用するのが早く、確実でしょう。（レンタルwikiで検索してみてください。）
これらのサービスを利用した場合、カスタマイズに対する制約などは発生しますが、サーバやシステムの管理をする必要が無いためwikiの運営に専念出来ます。
カスタマイズを重視したい場合
カスタマイズを重視したい場合は、オープンソースとして公開されているwikiシステムをレンタルサーバやVPSにインストールして公開するという方法になります。
レンタルサーバ wiki インストールあたりで調べてみて下さい。
- カスタマイズをするには相応の知識/知見が必要になります。
投稿2021/06/24 05:57
総合スコア18727
大学の課題で各々の作りたいものを作れといった趣旨でして、期限が一週間後なのですが、回答者様の回答から察するに一週間では厳しいということでしょうか。
特にこだわりもないので内容を変えることに別段懸念はないのですが。
> 大学の課題で各々の作りたいものを作れといった趣旨でして、期限が一週間後なのですが、回答者様の回答から察するに一週間では厳しいということでしょうか。
そうですね。
動的サイトと静的なHTMLとの区別がつかない状態から一週間でアプリケーションを作るのはかなり厳しいと思います。
どういう課題かは分かりませんが、まずは授業で学習した範囲で作れるものを考えるところから始めるのが良いかと思いますよ
0
ベストアンサー
ゲームの用語をサイトのユーザ同士で出し合い、用語辞典を作る
情報共有を目的としたものなのであれば、htmlだけではできません。それにフロントサイドのJavascriptが加わったとしても、当該セッションのみのデータ保持にしかなりません（辞書には向いてない容量）
データベースを利用してください。
それにはデータベースにアクセスするためのサーバーサイドの言語を採用する必要があります。
PHP,Javaなど。
投稿2021/06/24 05:50
編集2021/06/24 05:54
総合スコア80875
0
解決したようですが、後続の人のために書いておきます。
(もしかしたら質問者さんが後で「プログラミングやってみたい」と思うかもしれないので)
[今回の質問の裏側について]
他の方々とのやり取りを読むと、「単に課題として、HTMLで何かつくる」程度のものなので、
『HTMLやCSSだけでは質問にあるものは作れない』です。
HTMLやCSSはあくまでサイトのメタ情報です。
そのままテキストファイルをWebブラウザ( IEや Firefox等 ) で表示すると、
改行とかが無視されて表示されます。
また画像も表示できません。
なので HTML っていうもので表示テキストにメタ情報を埋め込みます。
台本とかでの『ここで拳(こぶし)を握る』とかのような情報のようなものです。
HTMLで言えば『ここで改行』、『ここからここまでをひと段落とする』とかみたいなものです。
なので、データを処理したりとかが出来ません。
そのため、『ボタンが押された』とかみたいなものはJavaScriptとかで制御したりします。
でもJavaScriptは(Node.jsとかを使わない限り) データによっての分岐とかしかできず、
データベース等を使ってのデータ保持等が出来ません。
そのため、データの保存等をやるなら { PHP, Perl, Ruby, Python } の言語とかで制御します。
ただし、このPHPとかのやつはサーバを立てないと出来ません。
CSSはHTMLにデザインのメタ情報を付けるためのものです。
『背景は黒』とかみたいな。
今回の場合、データを保持したりする処理が必要ですね。
単に情報を公開するだけ( 昔のホームページとか ) ならHTML + CSS で事足ります。
でもデータを保持したりとかするにはデータベースと呼ばれるもの( MySQLとか ) が必要で、
その橋渡しのようなことをする、PHPとかのようなものが必須になります。
ただ、HTML + CSS ならデザインセンスの有無とかで良い・悪いはあるかもしれませんが、
単に作るだけなら1日ぐらいあれば十分です。
(もうちょっと日数がかかるにしても1週間はさすがにかからないでしょうね)
でもPHPとかそういうのを学ぼうとするとなおさら時間がかかり、
基礎が出来ている状態でも、『データ構造(データの並びとか)をどうするか』とかも考えないといけないので、相当時間がかります。
なので、今回の場合は質問にあるものを諦めて、単純なサイトを作る方が無難ですね。
それで余裕が出来たら趣味とかでやってみるのも手です。
[作り方について]
まず、プログラミングは「こう書けばいい」……ではないのです。
入門書(サイトも含めて) や学校とかで習うものはあくまで『基礎』で、
しかもDIYや料理で言えば『道具の種類や使い方』だけです。
要するに『プログラミングは手段であって、目的ではない』です。
それと、『プログラムは魔法でもなんでもなく、人間が現実世界でやっていることを逐一指示されながら処理しているだけの代物である』です。
言い換えると、『現実世界でならどうするか』です。
たとえば今回のものを課題とかではなく趣味なり業務としてなりで作るとするなら、
[本来のやりたい事] ゲームの用語をサイトのユーザ同士で出し合い、用語辞典を作るようなサイトを作りたいです。 そこでお聞きしたいのが、新しい用語とその説明をユーザが記入すると、私が上記のコードで作成した五十音順の該当する位置にその用語が表示され、それをクリックすると説明ページに移動するようなコードを作りたいです
↓↓↓
[言い換え] Aさん, Bさん, Cさん, Dさん, そしてあなたがいます。 そこでゲームの用語をA~Dさん, およびあなたで出し合い、管理し、 五十音順にリストアップします。 A~Dさんがリストアップされた用語から選ぶと、その詳細を提示することとします。 あなたはデータの管理者として行ない、A~Dさんは詳細等をもらう立場だとします。
のような感じでしょうか。
(もっと良い例や表現方法があるかもしれないけど……)
私なら、まず、Aさんが何か言ったらそれをホワイトボードかなんかに書き留めて、
一覧の場所に記録していく。
そして、『○○についての詳細を教えてくれ』と言われたら、
その詳細データが書かれている場所を読み上げる
とかですかね。
読み上げではなく、書き込みでもいいです。とにかくそういう風にします。
そして、データを保存しておく必要があるので、データベースとかを使いますね。
これをPHPならPHP, RubyならRuby の独自の書き方で書き下すだけです。
投稿2021/06/24 09:38
総合スコア4962
0
なんだろう、内容からしてこういうのを想定してるのかなぁ。
HTML初心者です。
既に回答されていますが、こういうユーザー同士で編集し合い、話し合いというような形態を作ろうと思うと、HTML,CSSだけでは作れません。
何かしらのサーバーサイドのプログラミング言語で作る必要があります。
作ったらそれではい、終わりという訳でも無いですから、そこからサイト運営を
する必要があるわけですが、そういう作り上げた後のコスト面なども考えておられますか？
目標を大きく掲げるのは良いことですが、実現するのにどういう物が必要かということはしっかり
下調べを行った上で何かに書き起こした方が良いですね。
※質問者さんのやりたいとすることを止めている訳では無いと言うことはご理解頂けると幸いです。
投稿2021/06/24 06:04
編集2021/06/24 06:12総合スコア1282
大学の課題で各々作りたいものを作れといった趣旨のものだったので、運営などは行うつもりはありません。
ご教授、ご指摘ありがとうございます。
ユーザー参加型で、となると運営、保守する必要があります。
HTML,CSSのみで出来る事となると、質問者さんが自分でまとめたものを静的なページで他の方に見てもらう事ぐらいですね。
これなら能力にもよりますけど、1週間もあれば作れるんじゃあないかな。
そのスラングとやらがどれだけの量あるか知らないので分かりませんが。
ユーザ参加型ではなく私専用の辞典ならばHTML,CSSのみで可能ということでしょうか。
例）知らない用語があったので調べ、その用語と説明を書く項目を作り、完了ボタンを押すと五十音順の該当する箇所にその単語が表示され、クリックすると自身で書いた説明が表示される。
>私専用の辞典ならばHTML,CSSのみで可能ということでしょうか。
はい。
どのように実装するかは質問者さん次第なので、HTML,CSSで作るウェブページについて
ご自分で調べてみてください。
0
DBを用いる必要がありそうですね...
投稿2021/06/26 08:19
総合スコア19
あなたの回答
tips
プレビュー
