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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

Q&A

解決済

5回答

1340閲覧

HTMLで自己完結型の辞典を作成したい

Vvg

総合スコア2

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/06/25 06:58

編集2021/06/25 07:50

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 </p> 20<a href="#a">ア行</a> 21<a href="#ka">カ行</a> 22<a href="#sa">サ行</a> 23<a href="#ta">タ行</a> 24<a href="#na">ナ行</a> 25<a href="#ha">ハ行</a> 26<a href="#ma">マ行</a> 27<a href="#ya">ヤ行</a> 28<a href="#ra">ラ行</a> 29<a href="#wa">ワ行</a> 30 31<p id="a"class="mb5">ア行</p> 32<p id="ka"class="mb5">カ行</p> 33<p id="sa"class="mb5">サ行</p> 34<p id="ta"class="mb5">タ行</p> 35<p id="na"class="mb5">ナ行</p> 36<p id="ha"class="mb5">ハ行</p> 37<p id="ma"class="mb5">マ行</p> 38<p id="ya"class="mb5">ヤ行</p> 39<p id="ra"class="mb5">ラ行</p> 40<p id="wa"class="mb5">ワ行</p> 41 42 43 44 45 46 47<!-- <img src="picture.png/80x80" alt=""> --> 48 49</body> 50</html>

CSS

1body{ 2 background-color: rgb(255, 218, 218); 3 4} 5div{ 6 font-size: 80px; 7} 8 9p.mb5 { 10 margin-bottom: 30em; 11} 12

HTML初心者です。
上記のコードに新しいスラングの追加という項目を足して、そこにスラング名とその説明を記入し、完了ボタンを押すと五十音順の適切な箇所にそのスラング名が表示され、それをクリックすると説明欄に飛ぶようなサイトを作りたいです。
期限が一週間後なので、できればHTML,CSSのみで完結させたいのですが可能でしょうか。PHPなどは一切知識がないので出来れば使いたくありません。

<追記>ありがたいことにたくさんのご回答やご指摘などをいただいて返しきれないため、ベストアンサーだけ選ばせていただきました。
皆様、ありがとうございました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/06/25 07:01

PHPは使う予定がないならタグから外しましょう。 PHPタグで検索している方のノイズになります。
m.ts10806

2021/06/25 07:05

https://teratail.com/questions/345855 1日何してたのでしょうか。 既に「無理(色んな意味で)」という結論になってたはずです。 質問が同じなら答えは同じですよ。
退会済みユーザー

退会済みユーザー

2021/06/25 07:11

PHP勉強してみます、のあとで、PHPなどは一切知識がないの、はPHP部分(やデータベース部分)の作業依頼を意図しているんでしょうか?
Vvg

2021/06/25 07:12

Kさん いつもご指摘ありがとうございます。 PHPは極力使いたくないという意味で、やむを得ない場合は勉強しようと思うので一応タグ付けしました。言葉足らずですみません。
Vvg

2021/06/25 07:14

mさん ユーザ参加型から個人使用の辞典という点で変えたつもりだったのですがそれではだめでしょうか。
K_3578

2021/06/25 07:39 編集

一週間以内では今から勉強して辞典を作るのは不可能でしょう。 PHPを勉強されるのは自由ですが、今回に関しては使う事はないのであれば、タグは必要ないと言うことです。 追記:私は別にどう呼ばれようと構いませんが、基本的に人のIDを勝手に省略するものではありません。 今は存在しませんが、いつ「m」、「K」というユーザーさんが現れるか分かりません。 ↑確認したらIDは「半角英数、-_.を使い、3~15字以内」のようです。 とはいえ、勝手に省略すればそれは失礼に当たります。ましてやこのようなサイトでは。
退会済みユーザー

退会済みユーザー

2021/06/25 07:19

〈ユーザ参加型から個人使用の辞典という点で変えたつもり〉とのことですが、(スクショを撮るなどしない限り)他人に成果を見せられないようなものでもいいんでしょうか? ローカルストレージっていうwebブラウザ側にデータを保存する仕組みを使う方法がなくもないけど、キーに対応する値を保持するだけで、ソートしたり絞り込んだりは自前でコードを書かないと実現できないから、かえって煩雑になっちゃうし。 https://kinocolog.com/javascript_localstorage/
m.ts10806

2021/06/25 07:27 編集

>期限があるなら尚更、自身がゴールの見える範囲に留めるべきと思います。 というアドバイスをしたのですが全く聞き入れられてないのが分かりました。 全く手がつけられないものに手を出しておいて赤の他人に頼れる神経は私には分かりかねます。 課題としてもそこは超えないように指示があるのでは? ユーザー名省略についてはK_3578さんについても同じですね。確か1文字はユーザー名として設定不可だったはずですけど、省略することは基本失礼にあたります。
m.ts10806

2021/06/25 07:26

それに「コード教えて」ってもう自分でやる気ほぼゼロじゃないですか…。「参考先」教えて出来るようには見えませんね。現時点の内容からすると。 前の質問で得たアドバイスはどう活きたのでしょう。 共有から個人完結と微細に変えたところでやることは同じですよ。
K_3578

2021/06/25 07:30

私が前回の質問で >>私専用の辞典ならばHTML,CSSのみで可能ということでしょうか。 >はい。 >どのように実装するかは質問者さん次第なので、HTML,CSSで作るウェブページについて ご自分で調べてみてください。 こういう風に答えてしまったせいで曲解したのかもしれません。 HTML,CSSのみでスラングとやらを列挙してあるページとかなら出来ますねって意味のつもりだったんですけど、伝わりにくかったのなら申し訳ありません。
K_3578

2021/06/25 07:57

結局何がしたいのかわからないまま終わられた。 それならベストアンサーなんか選ばなくて良いです。
guest

回答5

0

この際もうガワだけという割り切りをするならあるいは可能でしょうね、もちろん見た目だけなので編集できたりする機能は持ちませんが。

投稿2021/06/25 07:34

yumetodo

総合スコア5852

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

以前の質問での私のコメントによって曲解させてしまった可能性が高いと思うので、
それに関しては申し訳ありません。

上記のコードに新しいスラングの追加という項目を足して、そこにスラング名とその説明を記入し、完了ボタンを押すと五十音順の適切な箇所にそのスラング名が表示され

これは無理です。出来るのは予めそのスラングとやらを五十音順に並べて、
それぞれの説明を書いた上でそれを表示する事ぐらいだと思います。

なので、私が考えるならばトップにア行~ワ行のスラングをまとめた中間ページを作り、
各行のページにそれぞれのスラング毎のページを作るorそのページ内で各スラングの説明を書く、ぐらい
でしょうか。

投稿2021/06/25 07:13

K_3578

総合スコア1282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/06/25 07:26

そもそも、大学の課題と言っても何を提出するべきなのか他人にはわかりません。 HTML,CSSのみで表示される物で問題ないならこういうものでも良いでしょうが。 課題について出題者から条件は出されなかったのでしょうか?
guest

0

新しいスラングの追加という項目を足して、そこにスラング名とその説明を記入し、完了ボタンを押すと五十音順の適切な箇所にそのスラング名が表示され、それをクリックすると説明欄に飛ぶようなサイト

web上に公開して複数人が編集できて永続的に編集内容が保持されることを想定するなら、
サーバーサイド言語のなにかと
永続的にデータを保持するための仕組み(いわゆる広義のデータベース、百歩譲ってSQLiteやCSVファイルなどでも可能っちゃ可能)
が必要になります。

リレーショナルデータベース(mysqlとかpostgresql)を駆使したほうが、
データの並べ替えや抽出をデータベース側におまかせ出来るので、
web系プログラミングを志すならリレーショナルデータベースの習得は外せないものだと思っております。
リレーショナルデータベースではなく、
自前でデータファイル管理(CSVファイルとか、TSVファイルとか)をすると、
データの並べ替えや抽出を自前でやることになります。
データ量が少ないうちはサーバーサイド言語の関数で吸収できますが、
データを何件まで想定するか次第でしょうか。

サーバーサイド言語を今から習得するのは避けたいとしても、
質問へのコメントで書いたようにローカルストレージを使うことも
出来るっちゃぁ出来るのですが、
これも、データの並べ替えや抽出を自前でやることになります。
jsやjQueryとか使いこなせているならチャレンジしてみるといいのですが、
事例を探してコピペで作るとしたらどうなるかな。

投稿2021/06/25 07:16

編集2021/06/25 07:38
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

期限が一週間後なので、できればHTML,CSSのみで完結させたいのですが可能でしょうか。

不可能です。HTMLとCSSだけでは、すでに出来上がったものを表示することしかできず、新しい情報を記録するような手段がありません。

投稿2021/06/25 07:01

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Vvg

2021/06/25 07:29 編集

回答ありがとうございます。 質問で述べたように期限が近いため、簡易的でいいので参考サイトなどを教えていただけませんでしょうか。検索するにもどのように表現すればいいのかわからなくて困っています。
guest

0

回答受付が終了したようですが、一応書いておきます。


まず、プログラミングは、『道具』であり、『手段』です。
目的と手段が逆になるのは本末転倒です。

そもそも、プログラミング言語がある => サイト・ゲーム・ソフト等を作ろう!! じゃないです。

『現実世界でのとある問題を解決するための手段』としてプログラミング言語が開発されているだけです。

元々、コンピュータは軍事利用でした。

たとえば弾道計算や暗号解読とかです。

暗号解読とかはやろうと思えば人間が手作業でも出来ます。
でも現実的じゃないです。

暗号方法(今でいえばRSA, AES, DES、古くは シーザー暗号やXOR暗号等)や時代によっては、
単なる『おめでとう』の5文字ですら、1カ月ぐらいかかります。
(暗号方式によっては数時間だったりするかもしれないが)

まあ、現実的じゃないですよね。

金になることでも流石にここまでは労力をかけたくないし、ましてやしょーもない平文(暗号前の文)
だとなおさらですね。

そこで、機械に任せようという発想に。

でも機械は0と1からなる機械語(machine language) なるものしか認識できません。

昔はその機械語でゴリゴリ書いていたようですが、人間にとっては面倒。

なのでアセンブラとかが開発され、それでも問題があったのでC言語とかが開発され、
さらに問題があったのでJavaとかが開発された……

という感じでしょうか。
(厳密なものはご自分で調べてください)

つまり、『人間が手作業でやると面倒な処理等を機械に任せるために、独自の言語(C言語とか)で書き下すこと』がプログラミングです。

なので、単に『ゲームの用語を管理したい』とかなら大人しく Wiki ( Wikipediaというより、そのシステムの方 )を使うべきです。

プログラミングを学ぶとかのためであれば、『自分で設計、コーディング、デバッグをする』です。

発想の方はこの質問の前の質問に書いた気がします。

その私の回答をよく読んでください。

投稿2021/06/26 11:02

BeatStar

総合スコア4962

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問