つくりてのざれごと

原文 13 The HTML syntax Note This section only describes the rules for resources labeled with an HTML MIME type. Rules for XML resources are discussed in the section below entitled "The XML syntax". HTML Living Standard 訳文 13 HTML構文 注 この節では、HTML MIMEタイプとして扱われるものの規則についてのみ説明する。XMLリソースの規則については、以下の「XML構文」の項で説明する。 用語と訳の解説 syntax (linguistics) the way that words and phrases are put together to form sentences in a language; the rules of grammar for this (computing) the rules that state how words and phrases must be used in a computer language ある言語において、単語や句が組み合わされて文章を形成する方法、およびそのための文法規則 コンピュータ言語の中で、単語や句をどのように使用しなければならないかを定めた規則 Oxford Advanced Learner’s Dictionary （言語学の）統語論、統辞論、構文論 文がどのような構造を持つかを研究する言語学の一分野。文はより小さい単位から成り立つが、その各単位間に見られる文法規則を、何らかの構造論的根拠を持って明示することを目的とする。 精選版 日本国語大辞典 つまりsyntaxとは、文章を作る 規則・文法 のこと。 また「 構文 」の意味は、本来「 文の構造。文章の組み立て 」で「 文の構造の規則＝文法 」を意味しないが、 IT関連では「文法」の意味で「構文」と呼ぶ ことが多い。 故に、 syntaxの訳語は、「文法」ではなく「構文」とした 。 resources 恐らく「 HTML文書を記述するのに必要な、DOCTYPEや要素など 」を指すものと思われるが、要は「 第1...

目次 はじめに HTML5が廃止!? 翻訳の方針 13 The HTML syntax 13.1 Writing HTML documents はじめに Web制作をしなくなって早10年。 自身のサイトや知人のサイトの全面更新をせずとも無事にサイトが運用できているのは喜ぶべきことではある。 10年前に構築したサイトは全てXHTMLで書いたものである。 当時はHTML5は世に出て日も浅く、まだブラウザ対応も途上だった記憶がある。 また、スマホやタブレットも普及途上で、考慮外にすることが可能なほどであった。 ただ今となっては、完全に時代に取り残されているのは否めない。 スマホやタブレットは普及し、サイトはスマホやタブレットで見る人の方が多くなり、HTMLもHTML5で書く時代になった。 ということで、スマホやタブレットに対応（所謂レスポンシブ）したサイトにしようという話になり、そうなるとHTML5の勉強しなければ、と相成ったわけである。 HTML5が廃止!? さて、HTML5を勉強しようと思い早速「HTML5」でググったのだが、トップに出てきたのが「HTML5が廃止」である。どういうこと？？？ 詳細は全面省略して、要はこれまでW3Cで策定していたHTMLの仕様が全て廃止になり、WHATWGが策定していたHTML Living Standardが標準になった、ということらしい。 （経緯を知りたい方は、 どうしてHTML5が廃止されたのか | フューチャー技術ブログ を御覧ください） 翻訳の方針 HTML Living Standard の正式版である 英語版 を読みつつ、 日本語訳版 も参考にする。 原文及び用語を調べた辞書の意味の日本語訳は、 DeepL翻訳ツール にかけ、訳出された内のカタカナ語は、出来る限り漢字語に置き換え、適宜意訳に直していく。 ただし、HTML Living Standardは頻繁に更新されるため、正確な翻訳を目指してもすぐに変更されてしまう可能性があるが、その時点でのものを出来る限り判り易く翻訳していく。 それよりも、 判りづらい原因となる用語の解説や、それを踏まえてどう翻訳したかの解説 に重点を置いていく方針とする。 そのため、 進行がメチャクチャ遅くなる ことを予めご了承いただきたい。

現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。 縦型メニューのHTML <ul> <li> <span id="accordion01" class="accordion" >news</span> （ここに「+」または「−」が挿入される） <ul id="subNavi01" class="subNavi" > <li><a href="#">ESZETT</a></li> <li><a href="#">TYPŒ</a></li> <li><a href="#">LETTER-PRESS</a></li> </ul> </li> <li> <span id="accordion02" class="accordion" >works</span> （ここに「+」または「−」が挿入される） <ul id="subNavi02" class="subNavi" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> </ul> </li> <li> <span id="accordion03" ...

今回の 拙サイト 全面改修の際追加したメニュー横の＋−表示が切替るjQueryの詳説をば。 実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。 メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるようなメニュー展開・収納jQuery。この「＋」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「＋」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。（詳細は jQuery Core 1.9 Upgrade Guide | jQuery を参照） 他に手はないかと色々調べた結果、jQueryの〔 after() 〕と〔 replaceWith() 〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「＋」「−」の切替えを可能にした。 以下に使用例を。 HTML <ul> <li><span id="accordion02" >works</span> <ul id="subNavi02" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> <li><a href="#">letter carving</a></li> </ul> </li> ...

ちょっと思うところあって7回目の 拙サイト 全面改修を挙行。 今回は見映えなどの大幅変更というよりも細かい箇所の改装が主目的だったが、構造見直しのためHTMLは全取っ替え。以下に今回の改修点を列挙。 横幅を960pxから1200pxへ ヘッダおよびサイドメニューの固定化 不要になったページの削除 「上に戻る」ボタンの削除 メニュー展開時のアイコンのアニメ追加 文字詰めjQueryの追加 横幅変更 横幅は現状1200pxでも大丈夫と（勝手に）判断し変更。そのついでに今まで左寄せにしていたレイアウトを左右中心揃えに。そのTIPSはネット上に沢山転がっているので割愛。 サイドメニュー固定 ウェブ、ショウジン さんの記事「 サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 ＊一応「IE6」もいける。 」を参考にした。深謝！ サイドメニューに該当するCSS #side { width: 100%; float:left; position: fixed; overflow: auto; background-image: url("../images/common/eszett_logo01.jpg"); background-repeat: no-repeat; background-position: 3.6rem top; } #sideWrapper {width: 180px;} 上記赤字の「position: fixed;」を追加することでサイドメニューは固定される。 そして、今回の密かな目玉である「eſzett」ロゴを背景に追加しこれもサイドメニューと共に固定させるために、上記青字を追加。幅100％はサイト全体の横幅に対する設定で、これにより背景ロゴはサイドメニューに設定しているにも関わらず中途で切れずに（サイドメニュー自体は#sideWrapperにて幅180pxに設定）表示される。 コンテンツ部分のCSS #main { width: 900px; float: right; overflow: auto; position: relative; margin-bottom: 6rem; } コンテンツ部分のCSSにて、赤字の「float: r...

日頃WEBのテキストで句読点および括弧類が連続して出現する場合の詰め処理をしたくてどうしたものかと思案していたら、素晴しいJavaScript（とjQueryの混合）を発見。このスクリプト、要はペアカーニングを任意に設定できてしかも2つの括弧類連続を設定するだけで括弧類が3つ以上連続してもちゃんと詰めてくれる。いやはやありがたや。ということで今回参考というか丸々活用させていただいたのは FLAutoKerning.js というスクリプト。 HTMLで文字詰めするタイポグラフィー用JS | fladdict 感謝深謝。 カーニングのペアを自動処理 今回の組版の設定は、基本ベタ組みで、句読点および括弧類が2つ連続した場合「全角二分取り」になるような、つまりは二分分詰まるような、オーソドックスな設定で試してみる。そして今回の句読点および括弧類は 起こし括弧類：「『（［｛〈《【〔 受け括弧類：」』）］｝〉》】〕 句読点類・中点：、，。．・ の計21種の組合せに詰め設定を施すが、この組合せを配列にて自動化した。 jQuery(function($){ var pncPrn = ["」","』","）","］","｝","〉","》","】","〕","「","『","（","［","｛","〈","《","【","〔","、","，","。","．","・"]; for (var x=pncPrn.length; x--;){ for (var y=pncPrn.length; y--;){ p[pncPrn[x] + pncPrn[y]] = -0.6; } } }); 上記jQueryにて設定した句読点括弧類の【 組合せ 】をFLAutoKerning.js内カーニングペア定義の箇所に追...

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...

表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。 自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。 参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳） Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版 . オライリージャパン, 2010 インライン要素とは何か 文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。 インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。 非置換要素とは何か 要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。 インライン非置換要素の特徴 widthとheightは適用されない。 背景はコンテンツエリアとpaddingに適用される。 上下marginは、事実上適用されない。 左右paddingは、要素の先頭と末尾のみに適用される。 上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。 line-heightは何を制御しているか 行高を指定するline-heightは単純に行間を制御しているのではなく、 leadingという、コンテンツエリアの上下にある余白を制御 している。 leadingはline-heightとfont-sizeとの差 であり、 この差を等分 して コンテンツエリアの上下に加えることによって行間が決まる （コンテンツエリア＋leadingをインラインボックスという）。 コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。 図解すると以下の通り。 つまり、line-heightが設定され...