[HTML]では文書の表示方法や[ハイパーリンク]などを「[タグ]」と呼ばれるマークによって文章の構造を表現する。このような言語は一般的に「[マークアップ言語]」と呼ばれる。[*_ HTMLタグの役割は、コンピューターがそのページの構造を理解できるようにすること]。下はHTMLタグの一部[! 文書情報・構造]

種類[HTMLタグ][ハッシュタグ]タグの一般論タグについて改めて基本的なことを考え直す

https://codepen.io/pen/[/mrsekut-p/ブラウザ上でHTML/CSSを書くサービス]オンラインでHTML+CSS+JSのコードを書いて動かせるサービスCodepenを観て楽しむ[すごいCSSの作品]を[https://codepen.io/trending Trending | CodePen]などで眺めるのも面白い

[マークアップ言語はどういうものか][「マークアップ言語」の語源]参考　[https://www.pi-pe.co.jp/miteshiru/word/markup/ マークアップ言語｜PIPED BITS]

#書きかけ[くま子.icon]なんか昔書いてたみたいなので自分用に置いときます。>目次HTMLとCSSの概要[~ [HTMLとCSSとJavaScriptの概要(過去のノート)#628291177ab600000060ea1e]]HTMLとは？[~ [HTMLとCSSとJavaScriptの概要(過去のノート)#628330e87ab6000000396d4d]]

>World Wide Web(ワールド・ワイド・ウェブ、略名：[WWW])とは、[*_ インターネット上で提供されているハイパーテキストシステムである]。[Web]、ウェブ、W3(ダブリュー スリー)とも呼ばれる。俗には「インターネット」という表現がワールド・ワイド・ウェブを指す場合もある。>[World Wide Web - Wikipedia　https://ja.m.wikipedia.org/wiki/World_Wide_Web]

懐かしい。ほぼ全部忘却した。著者：[Mana]>Chapter1　最初に知っておこう！Webサイトの基本[よいWebデザインとは][Webサイトの種類]

基本[CSSのプロパティ][CSSのセレクタ][CSSで使える関数]TIPS

[Microsoft] が開発している[エディタ]兼[統合開発環境]。通称 [VSCode]。[クロスプラットフォーム]なので、[Windows] のほか、[Mac] や [Linux] でも動く。[Visual Studio] とは名前が似ているが別物。[Visual Studio] は [Windows] 専用で、主に [C#] を利用したプログラミングに向いている。VSCode でも [C#] 開発はできるが、どちらかと言うと [JavaScript] 等のユーザーに人気が高い。

インターネット上の[HTML]や画像などといったリソース(資源：利用可能な[CPU]の処理能力、メモリー量、デバイスなど)の場所を特定するための書式。分かりやすく言えば、[*_ 閲覧したいWebサイトにたどり着ける住所のようなもの]。[_ [Webサイト]は各々固有のURLを持っている]。[_ このURLには「どのやりとりの手順で」「どの[Webサーバー]に」「何のコンテンツを」取りにいくかという情報が含まれている]。

[HTTP]という指定のやりとりに従って、クライアントソフトウェア([Webクライアント])の[Webブラウザ]に対し、[HTML]やオブジェクト(画像など)の表示を提供するサービスプログラムやそのサービスが動作する[サーバコンピュータ]のこと。[_ WebサーバーはWebブラウザからコンテンツ(HTMLファイルなど)の要求があると、必要なコンテンツをネットワークを介してWebブラウザに送信する]役割を持つ。

[ Pug HTMLを効率よくコーディングする - Qiita https://qiita.com/yun_bow/items/d21586b51f87d781a857][Codepen]はHTMLのエディタのところの設定を変えることで、Pugで書くことも可能Pugについての憶測[久住哲.icon]たぶん、Pugで書いてそれを[コンパイル]すれば[HTML]になる……？という感じ……？HTMLを効率よく書くための記述法かなと思う。

[ハイパーテキスト]は文章を[HTMLタグ]で意味づけしたものであり、人間がそのまま読むには適していない。そこでハイパーテキストを人間が読みやすいようにハイパーテキストを解釈する必要がある。この際に読みやすいように作り変えて表示してくれるのがWebブラウザと呼ばれるプログラム。例としては、[Internet Explorer]、[Firefox]、[Google Chrome]など→[Webブラウザの種類]

[HTML]での[入力補完]タグ名＋TAB`.クラス名`+TABでdivタグ自動入力`#アイディー名`+TABでもたしか[Ctrl+/でコメントアウト]

何度アクセスしても毎回同じものが表示される[Webページ]。元々、Webは研究資料を閲覧するために開発されたものであり、静的ページを表示するだけで十分だった。しかし、Webが普及するにつれて、研究資料の閲覧の他にも利用範囲は拡大し、より豊かな表現が求められるようになり、閲覧するユーザーの状態や要求に応じて表示する内容を変化させる[動的ページ]の技術が発達した。(例)企業や団体の紹介ページなど、[HTML]のみで記述されたページなど。

[静的ページ]に対し、アクセスした状況に応じて異なる内容が表示される[Webページ]のことを動的ページという。文章や画像がアクセスする度に変わり、ユーザーに適した[HTML]ファイルが毎度サーバ側で作られることとなる。(例)会員登録ページ、お問い合わせフォーム、予約フォーム、掲示板サイト、[Google]やYahoo!などの検索結果の表示ページなど

[マークアップ言語]とは、文字自体の表示に加えて、それらの文字を[_ どのように表示させるか]の指定までもテキストに組み込まれているような[記法]。すなわち、[構造や修飾の情報をテキストに盛り込める]例えば、[マークアップ言語]のひとつである[軽量マークアップ言語]では、文字を`**`と`**`で囲むことにより、文字を太字にできます。Discordでも、こういう風に書いて投稿すると、表示される文字は太字(bold)になる

[HTML]や[CSS]のデザインやパーツを紹介するサイト[https://pote-chil.com/html-maker CSS Stock｜Webデザインを楽にするCSSコピペサイト]

[HTML][CSS]https://www.tagindex.com

インデントを多用する人の2パターン1. HTMLやJSONなどもともとインデントを使って形を整える別な対象をモデルにしている2. 他の人のScrapboxの使い方をモデルにしているメモ[リスト型]というデータ型の存在

例[JSON][HTML]

[UserCSSの素材]前提[CSS][HTML]方法

from：[思いつき日記(子)]>2022/5/25主に[ADHD]などの[発達障害に関して　（理解してほしい点]の人間はできる人が多いとされる。実は自分も発達障害なんだよね〜([心理検査]済み)ちなみによく言われることだけど、[ひろゆき]や[堀江貴文](ホリエモン)や[スティーブ・ジョブズ]、[アインシュタイン]なんかも発達障害だ(った)とされるけど、たぶんこれも有能と無能で極端だからじゃないかなぁ(自分はおそらく無能な方)。

Document Object Model特徴階層構造を持つノードで表現されるWebページとプログラミング言語とのあいだに位置する（[API]）

[ティム・バーナーズ＝リー]が提唱している構想している構想で、コンピュータが[Webサイト]の構造や意味をきちんと理解できるようにするためのプロジェクト。コンピュータが自律的に情報の意味を理解して、処理されることが期待されている。[HTML]では意味の付与ができないため、セマンティックwebでは[XML]という言語によって記述した文書にRDFやOWLという言語を用いてタグを付け加える。このような[*_ 情報に関する意味を示すデータを「[メタデータ]」という]。

[HTML]のようなWebで用いられる技術は、Webの発展に伴って機能拡張や新技術の開発が行われてきた。HTMLの表示スタイルを変更する[CSS]、HTMLの親戚のような存在である[XML]、[XHTML]といったWebで使える新しい言語も開発されている。[*_ もしこのような機能拡張が各開発者が独自に行ってしまうとしっかりとした規格が定まらない]。そのため、しっかりとした規格をあらかじめ定めておく必要がある。

クライアントサイドとは、[_ WebサービスやWebアプリケーションで直接ユーザーの目に触れる部分のこと]。フロントエンドとも呼ばれる。クライアントサイド・スクリプトとは、[HTML]に埋め込まれ、[Webブラウザ]側で処理する際に実行されるプログラミング言語。主に[CSS]、[JavaScript]が用いられている。

Hypertextとは、「テキストを超えた文書」の意味。1974年にアメリカの学者[テッド・ネルソン]が「Computer Lib」で提言した概念。コンピューターを利用した文書作成・閲覧システムの1つで、[_ 複数の文書を相互に関連づけ、結びつける仕組み]。[*_ 文書のほか、画像、図表、音声、動画、3次元グラフィックなどもリンクできる]。ハイパーテキストを作成する言語が[HTML]、ハイパーテキストを結び付ける仕組みが[ハイパーリンク]。

[マークダウン]は構造や修飾の情報をテキストに盛り込める構造というのはたとえば、「# 大見出し」「## 中見出し」といったふうに、記法により見出しを設定することができる。修飾というのはたとえば、「*強調*」とか「> 引用」とか「~~打ち消し~~」とか[- [Discord]の記法もマークダウン記法である。][HTML]も構造・修飾の情報をテキストに埋め込むことができる。

[HTML]の[余白]で、どっちが[padding]でどっちが[margin]か分からなくなるので、覚え方を知りたい。marginは[_ 要素と要素の間にあってほしい余白]で、paddingは[_ 要素内で上下左右をどれだけ詰めるのか・余白を持たせるのか]に使うと良いっぽいです。例えば、marginは画面上部に表示するサイト名の文字とメインコンテンツ（画像や記事など）との間に作る余白で、paddingはメインコンテンツ内での領域と記事や画像との間にどれだけ余白を持たせるのか。（わかりづらければ、すみません。）

>スタイルシートとは[_ 、文書データの見栄えに関する情報のみを記録・定義したデータやファイルなどのこと]。スタイルシートの入れ替えや編集により、[*_ 文書自体の内容はそのままに見栄えだけを変更することができる]。> [スタイルシート 【style sheet】｜IT用語辞典　https://e-words.jp/w/スタイルシート.html][*_ ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般]。

ブラウザ上で[Webページ]を作成するもので、誰でも自由に書き込み・編集できるのが特徴。項目がリンクになっている。複数人で協力してコンテンツを作成することができる。このアープラノート(Scrapbox)もWikiである。弱点としては、[フロー型の情報]をうまく扱うことができないとされる。

from [HTMLファイルがあればWebにページを公開できるか][Logseqのパブリッシュ機能]Logseqは公開するページを選んで部分公開できる公開用[Webページ]のファイル一式が自動的に作られるような感じindex.html

1つの[ドメイン]にある複数の[Webページ]の集まり。Webページ同士は[ハイパーリンク]によって相互に結びついており、ユーザーは[Webブラウザ]でそれを辿ることによってWebサイト内にある複数の文書を読むことができる。[_ 基本的にWebサイトはHTMLと[CSS]、[Javascript]などを用いて作られている]。[*_ これを人に喩えてると、HTMLは骨格、CSSが皮膚の役割をもち、皮膚や骨格を動かす筋肉がJavascriptとなる]。

>[*_ コンピューター同士が通信をする際の手順や規約などの約束事]。ネットワークでコンピューターが使う言語のようなもので、双方が理解できる同じプロトコルを使わないと通信は成立しない。そのため、インターネットのプロトコルの多くは[RFC]（Request for Comments）という形式で技術仕様が公開されており、誰でも閲覧できる。それぞれのコンピューターは、プロトコルで定められた処理をするプ>[プロトコル - コトバンク　https://kotobank.jp/word/プロトコル-8535]

>Webフォントは[*_ WWW([World Wide Web])のコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示（カーニング）を行うシステムおよびそのフォントである]。[CSS]3.0 fonts moduleで、この機能の標準が提供された。> [Webフォント-Wikipedia　https://ja.m.wikipedia.org/wiki/Webフォント]

見出しをつける[HTMLタグ]。「h」の数字が大きくなるほど、小さな見出しとなっていく。<h1>(一番大きい見出し)から使っていく。順序を守ることで、秩序だった[Webページ]を構成することができる。`<h1>1番大きな見出し</h1>`

文章の見た目や構造を記述するための[マークアップ言語]のひとつ

[Scrapbox]で、ページに`[ページタイトル]`の[タグ]を書き、同じプロジェクトの他のページへの[リンク]を作って[ページを繋げる]こと

任意の文字列を`[`と`]`で囲むこと。言葉を[ブラケティング]すること。言葉を[タグ]にすること。[Scrapbox]において、テキストの一部を`[]`（[ブラケット]）で囲むことで[リンク]にすること。あるいは、`#`をテキストの頭につけることによりリンクにすること。

文脈に依存しない書き方をしようとした場合、書く内容すら変わってくる。つまりは、書けないことが出てくる。書けないとは、ここでは、書くべきでないということを意味する。すると、書くのがつまらなくなってくるだろう。書きたいのに書けないのはつまらない。だが、そもそも[Cosenseはユーザーを楽しませるためのものではない]。（使っていて楽しいという操作感の良さがあるにしても、それ自体が目的ではない。ただ、例えば私（誰？）なんかは、好きなボールペンのサラサラした感じが好きだから、意味のない文字や線を書いても楽しいし、そのときはその楽しさが目的になる。だが、そのボールペンの開発者はそういう楽しさを提供することを目的としたわけではないだろう。いや、どうだろうか？）

[ニーチェ]これは[タグ]。リンクになる。[ニーチェ.icon]これは[アイコン]。

コセンスのタイトルの仕様にもとづいてコセンスの良い使い方を考えてみようコセンスの特徴ページのタイトルが[タグ]になる。同じ名前のページは作れない（と言っていい）コセンスは対象ベースではなく言葉ベースなツール

ページやファイルなどに[タグ]を付けるという操作[タグ付け][遡行的タグ付け][列挙的タグ付け][遡行的タグ付け↔列挙的タグ付け]

[タイトルの利点・タイトルが無いことの利点]Scrapboxのタイトルはその[ページのURL]に反映される複数のページで同じ文言を[タイトル]にしたとき、[マージ]を促される。マージしなかった場合、同名ページの数に応じてタイトル末尾に「_n」と数字が着く変更したとき、そのページへのリンクの文言を全て変えるかどうか問われる。変えることにすると、他のページに含まれる[タグ]の全ての文言が変更される

[ハッシュタグ]と対比される[タグ]`[ことば]`というような形で文中に置かれる利点文中リンクはタグ同士の関係性を表現することができるため、分からない単語や発想を理解させるのに有効である例えば、`[コクーン]は[パルス]に浮かぶ、[ファルシ]が[クリスタル]の力で築いた都市`といった文章があった場合、この文章を読んだだけで、「コクーン」が都市であることは分かるし、パルスが何らかの地であると分かる[久住哲.icon]

タイトルの文言を単語に分解して、それらをページの1行目に羅列するということを、最近個人プロジェクトでやっている。例えば、「Nostrでの画像投稿」というページがあれば、1行目に`[Nostr] / [画像投稿] / [画像] / [投稿]`などのようにタグを羅列する。この場合、`[投稿]`というタグはやり過ぎというか、意味ないのでは……と思ったりもする。こういった方法は、以下のような考えから、あまり喜ばれないような気がする。

[Scrapbox]ではある程度長い分節などを[タグ]にできるタグでもあり記述でもある記号列例[このページを拡散してください！]タグをタグとして見てほしい

[日付タグ]（[日付]/[タグ]）

Scrapboxでは[タグ]が他のメディアとは違うふうに機能するのでブラケティングを用いた上で、[普通の文章では書かないような記述の仕方]をしてもおかしくはない例えば、ある日本人が映画監督でもありミュージシャンでもある場合、普通は「彼は日本の映画監督であり、ミュージシャンでもある」という風に書くが、Scrapboxの場合、次のように書いてもおかしくない`[日本の映画監督]、[日本のミュージシャン]`

[/cmang1dovob/思考ログ―2022上半期#62cb9ab4509a040000a7076e]で名が言及されていたのでリアクション>大きなプロジェクトに埋もれてしまうと真価が薄れて見えるみたいなことはあるかもしれないですね。目立たなくなってしまうというか。プレビュー用のScrapBoxを用意するのが良いのか？このあたりは久住さんが良いノウハウを持っているだろう。[久住哲.icon]の個人的感覚としては[埋もれてもOK、むしろ埋もれたい]

[Scrapbox]ではページに付けられる[タグ]が[メタデータ]ではなく、それ自体もページとして扱われる>ページとは別に、メタデータとしてタグを設定する手法では、タグを別途管理しなければならず、組織で運用するには、難しいものがありました。Scrapboxでは、タグもページとして扱う画期的な管理方法を採用しています>([/help-jp/Scrapboxの特長#5cf0a51faf5c5b0000947602]より引用)

本文を書いて、タグを付けるときにタイトルを見てそれと連動させることを意識するこの場合、タイトルがタグ付けを左右することになる[/icons/hr.icon][タグはページ自体に貼られる]という運用原則を採用するとしたら、[タイトルとタグを連動させる]べきだろう。逆から言うと、[タグを付けたらタイトルを見直す]。

[語尾]をブラケティングして[タグ]にすること[タイトルに続く形で語尾タグを一行目に書く]分からない言葉をタイトルにして、`[とは？]`とタグをつけたり、日々強く留意したいことをタイトルにして、`[べきだ。]`とタグをつける、など。[タグの常識を覆すためのアイデア]として。

Scrapboxは情報ツールである。Scrapboxでほしい情報を探すときは、フォルダがないので、検索機能を多く使うことになる。検索したとき、すぐにほしい情報が見つからないこともある。そういうときは、更に[ページを探す時間があったら、新しいページを作った方がいい]。[似たページも恐れず書く]ぐらいの意識でいい。

[* 分類タグ期]最初は他のツールにおける[タグ]のように、[分類]のためにタグを付けていた。その時期を過ぎた。今でも使う。[塩澤先生の論文]を読んだ影響がある今は場合によっては批判的。しかし、意地になって分類しまいとすると、けっこう失敗もする

[ページにWikipediaのリンクを貼る]のは、Wikipediaの該当ページに移動するボタンを設置するため記述ではない[移動ボタン]の取り付け検索エンジン経由での移動の[手間を省く][リンク]、[タグ]

なぜ探求するか[Cosense]のページを切り分けるための基準が知りたい[ページの切り出し]の適切で有用な基準が知りたい何が書かれるか情報

[リンク]（タグ）を並べて[リスト]化したもの

「[思想・哲学・文学・芸術の会]」の[Discord本部]に参加するには、下記の[リンク]を[クリック]するだけ！https://discord.gg/arpla[Discord]、[Twitter]、[note]、[Instagram]など、各種[SNS]や[ブログ]で[拡散]してください！（その際はひとこと「思想・哲学・文学・芸術の会への[招待リンク]です」と添えて頂けると助かります）コピペ用↓

Scrapboxでテキストを`[ ]`で囲むことを「ブラケティング」というテキストを[ブラケット]で囲むと、そのテキストは[リンク]になる>`[`と`]`でテキストを囲むと、中身に応じて何かが起こる>つまりブラケットを作る>これだけを覚えれば、[Scrapbox.icon]は十分使いこなせます

[アープラノート会議 8]ポーター[リンク]↑のリンクという言葉を選択して`[link]`[- 基本的な操作として[リンク]があります]

「[思想・哲学・文学・芸術の会]」の[Discord本部]に参加するには、下記の[リンク]を[クリック]するだけ！https://discord.gg/arpla[Discord]、[Twitter]、[note]、[Instagram]など、各種[SNS]や[ブログ]で[拡散]してください！（その際はひとこと「思想・哲学・文学・芸術の会への[招待リンク]です」と添えて頂けると助かります）コピペ用↓

Scrapbox上の文字を選択（選択状態にする）して、出てくる[ポップアップメニュー]から`[Link]`をクリックすると、選択した文字を[Wikiリンク]にすることができる。また、文字を選択して`[`を入力するだけでも、選択した文字を[リンク]にすることができる。これであれば、テキストをタグにする[操作をキーボードで完結させる]ことができる。#書き直す

自分のScrapboxプロジェクトの新規ページか既存ページに、別なScrapboxプロジェクトのページの[リンク]だけを貼る[編集作業]のこと。何が良いか情報源についての情報が得られるどの外部プロジェクトにどういった[- 情報]ページがあるのかが何となく分かってくる何が悪いか

[アープラノート関連のアイデア][/sta/ランダムに開いたページ2つをn-hopで繋ぐ遊び]の方がタイトルの言語化が上手いwikipediaにはよく言われる説として「1つのページから、あらゆるページに6回以内のリンクで移動できる」というものがある。これは[六次の隔たり]に基づくものだろう。（実際、殆どは6回以内に辿り着く）これを確認するために「うぃきったー」というサービスがあり、ページを2つ選ぶと繋ぐ経路を探索してくれる。

コメントScrapboxでは特殊な意味を持ちうる言葉を含むリスト[アイコン][ブラケティング]

[2022/05/25]←[2022/05/26]→[2022/05/27]本日のマシュマロ[「その年齢じゃないとできないこと」とか「あの頃にやっておけば良かったと思っていること」ってありますか？]制服デート声の録音聞いて死にたくなった。つらみ。

単に「[リンク]」とも呼ばれる。[ハイパーテキスト]において、複数の文書を結びつける役割を担う。ハイパーテキストの根幹をなすもの。最も使われているリンクはWWW([World Wide Web])における[URL](Uniform Resource Locator)であるらしい。

[2022/2/4][議論を蓄積する]前の[議論]と[リンク]する前の議論の[「つづきから」]始めるどこに書けばいいかわからない

ページの内容と関係がない言葉が[リンク]になっているような状態[ページに辿り着くための助けになる]ことがある[エピソード記憶]による想起個人プロジェクトだと助かる共同プロジェクトだとどうなんだろう？

#リンク　#アイデア　#メモまずは以下のコードをご覧いただきたい。[/scrapboxlab/いい感じにリンクするomakase-links]なんという良機能……細かくページを作っていけば、一気に新たなページのリンクを貼ることもできるのではないだろうか

#奇抜なアイデア　#HTMLタグ`<h1>HTMLタグでそのまま文章を書く<h1>``<p>という<b>アイデア</b>を思いついてみた</p>``<h1>せっかくならhtmlで</h1>``<p>せっかくhtmlで書くなら<b>シンタックスハイライト<b>を使うのはどうだろう</p>`

>箇条書きリストを作る「<ul>タグ＋<li>タグ[*_ 箇条書きリストを作るには「<ul>タグ」を用いる]。[_ 「ul」は「unordered list」の略で、「順序の決まっていないリスト」を意味する[HTMLタグ]]。これだけでは機能せず、[*_ <ul>タグ内に<li>タグを入れ込む必要がある]。[_ <li>タグは「List Item」の略で、リストの項目を記述する[HTMLタグ]]。

段落を表示する[HTMLタグ]。<p>は「Paragraph」に由来。<p></p>で囲まれた部分がその段落の文章となる。`<p>体にやさしい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。</p>``<p>おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。</p>`

from [『1冊ですべて身につくHTML &CSSとWebデザイン入門講座』読書メモ]HTMLタグとは→[HTMLタグ][/prarpla/よく使うHTMLタグ]

`.`とクラス名を入力してTABを押すと、勝手にdivタグに変換してくれる。便利。[/icons/hr.icon].の後にdivタグを打てる？[Codepen]のショートカット？