「HTML」の版間の差分

提供：senooken JP Wiki
(Other noscript)
 
(同じ利用者による、間の5版が非表示)
207行目: 207行目:
     }
     }
  }
  }
=== Other ===
==== noscript ====
https://chatgpt.com/c/67496a3d-4b88-800b-9d3b-a3ca26e70970
JavaScript無効でも動作するアプリの実装には、「プログレッシブエンハンスメント (Progressive Enhancement)」というアプローチをとる。
まず、JavaScriptなしで最低限の動作を実装。
JavaScriptが有効なら、addEventListenerでインタラクションにイベントを設定して、既存処理を上書き。ajaxの非同期処理が主な仕事だろう。
CSSでも参照可能。html要素のclass属性にno-jsなどを設定しておいて、script要素内で属性を削除するなど。
* [https://zenn.dev/cybozu_frontend/articles/think-about-pe 現代の Progressive Enhancement について考える]
* [https://speakerdeck.com/azukiazusa1/javascript-nasidedong-zuo-surumodannakodonoshu-kifang JavaScript なしで動作するモダンなコードの書き方 - Speaker Deck]
HTMLの属性などでもいろいろできることがある。
* CSS :has擬似クラス=CSSでif文に近いことができる。
* CSS :user-invalid擬似クラス=
* CSS field-sizing: content=入力量に応じた可変高さ。textarea。
* ポップオーバーAPI
* selectlist
* invorkers
[https://developer.mozilla.org/ja/docs/Web/API/Popover_API ポップオーバー API - Web API | MDN]


==CSS==
==CSS==
251行目: 278行目:


スペースに意味があるので注意する。
スペースに意味があるので注意する。
==== エスケープ ====
セレクター内の[]などの特所文字は\でエスケープ必要。
document.querySelector('[name="楽楽販売_オーナーマスタ\\[販売店コード\\]"]');
====結合子とセパレーター====
====結合子とセパレーター====
組み合わせると、対象の下、左右を指定できる。後ろは選べるが、前は選べない。
組み合わせると、対象の下、左右を指定できる。後ろは選べるが、前は選べない。
379行目: 411行目:


基本的にはlabelやaのスタイルでwith:100%;height:100%;を指定する。
基本的にはlabelやaのスタイルでwith:100%;height:100%;を指定する。
=== Design ===
https://chatgpt.com/c/67490a1e-798c-800b-ab01-c2b6fe99455a
==== About ====
[https://qiita.com/engineerhikaru/items/6f996d9c64b007f43eb2 BEM vs OOCSS vs SMACSS 【CSS命名規則比較】 #bem - Qiita]
CSSの設計は、class属性の命名規則がほぼ全て。
いくつか主要な方法がある。
* BEM (Block, Element, Modifiler): Block/Element/Modifierの組み合わせで表現。card/card__title/card__link--blueのように、elementは__区切り、modifilerは--区切りで表現。
* SMACSS (Scalable and Modular Architecture for CSS)
* OOCSS (Object Oriented CSS): 構造と見た目でわけて設計。
* Atomic Design
* CSS-in-JSプロジェクトやチームの規模、使用する技術スタックによって適切なCSS設計方法は異なりますが、以下のような選択を考慮することができます。
* '''小規模から中規模のプロジェクト''': '''BEM'''や'''SMACSS'''を使用することで、クラス名やスタイルの整理が容易になり、開発がスムーズになります。
* '''大規模プロジェクト'''や'''チーム開発''': '''OOCSS'''や'''Atomic Design'''、'''BEM'''の組み合わせを使用して、コンポーネントベースの設計を行うと、スタイルの一貫性と再利用性が高まります。
* '''ReactやVueなどのコンポーネント駆動型開発''': '''CSS-in-JS'''（Styled ComponentsやEmotion）を使用すると、動的なスタイルの変更やコンポーネントごとのスタイル管理が簡単になります。
CSS-in-JSは匿名化と相性悪いのでNG。
OOCSSがオブジェクト指向でいい。BEMはクラスをたくさん作る必要がある。
親要素の相対で対応する？
BEMのほうが、プラグインで画面UIを追加する場合に融通が効くか？
==== OOCSS ====
[https://www.codegrid.net/articles/2014-css-template-1/ 知っておきたいCSS設計法 | 第1回 OOCSSの基本]
OOCSSとは、Object Oriented CSSの略です。これは、Nicole Sullivanという人が提唱した考え方です。
命名規則が難しい。
例えば、button一つとっても、レイアウトなどの都合で小さくしたいことがあったりするかもしれない。どうする？
<button type="button" class="">button</button>
<nowiki><ul></nowiki>
  <nowiki><li class="label label-news">NEWS</li></nowiki>
  <nowiki><li class="label label-pickup">PICKUP</li></nowiki>
  <nowiki><li class="label label-info">INFO</li></nowiki>
<nowiki></ul></nowiki>
.label {
  margin-right:.5em;
  padding:.2em 1em;
  display:inline-block;
  &-news{
    background-color:yellow;
  }
  &-pickup{
    background-color:pink;
  }
  &-info{
    background-color:#73d1fa;
  }
}
=== Other ===
==== tooltip ====
* [https://pa-tu.work/blog/tool-tip ツールチップをCSSで実装する]
* [https://www.geeksforgeeks.org/what-is-a-tooltip-in-html/ HTML のツールチップとは何ですか? - GeeksforGeeks]
* [https://stackoverflow.com/questions/43089766/is-html-title-attribute-a-toolip Is html title attribute a toolip? - Stack Overflow]
* [https://www.w3schools.com/tags/att_global_title.asp HTML Global title Attribute]
マウスホバーで出してくれる補足情報。いくつか実装方法がある。
title属性を設定するとそれで表示してくれる。これがシンプル。
==== Space ====
* [https://qiita.com/SE-studying-now/items/23f9533c57bfef58ba1b HTMLでラベル表示すると連続した半角スペースが1つに丸められる件 #タグ内の半角スペース - Qiita]
* [https://developer.mozilla.org/ja/docs/Web/CSS/white-space white-space - CSS: カスケーディングスタイルシート | MDN]
前提として、HTMLだと2個以上のスペースが1個に丸めて表示される。
スペースを維持する方法がいくつかある。一番シンプルなのはpre要素。
ベースにあるのが、white-spaceプロパティー。この値で制御される。
{| class="wikitable"
!
!改行文字
!空白と
タブ文字
!テキストの
折り返し
!行末の空白
!行末の
その他の空白区切り
|-
!<code>normal</code>
|まとめる
|まとめる
|折り返す
|除去
|ぶら下げる
|-
!<code>nowrap</code>
|まとめる
|まとめる
|折り返さない
|除去
|ぶら下げる
|-
!<code>pre</code>
|そのまま
|そのまま
|折り返さない
|そのまま
|折り返さない
|-
!<code>pre-wrap</code>
|そのまま
|そのまま
|折り返す
|ぶら下げる
|ぶら下げる
|-
!<code>pre-line</code>
|そのまま
|まとめる
|折り返す
|除去
|ぶら下げる
|-
!<code>break-spaces</code>
|そのまま
|そのまま
|折り返す
|折り返す
|折り返す
|}
折り返しの有無で、pre/pre-wrapを使うのがよいと思われる。
== CSS framework ==
===Bootstrap===
===Bootstrap===
====Introduction====
 
=== About ===
 
==== Introduction ====
*[https://getbootstrap.com/ Bootstrap · The most popular HTML, CSS, and JS library in the world.]
*[https://getbootstrap.com/ Bootstrap · The most popular HTML, CSS, and JS library in the world.]
*[https://getbootstrap.jp/ Bootstrap · 世界で最も利用されているHTML、CSS、JSのライブラリです。]
*[https://getbootstrap.jp/ Bootstrap · 世界で最も利用されているHTML、CSS、JSのライブラリです。]
394行目: 568行目:
*多数のコンポーネント
*多数のコンポーネント
本来デザインは熟練が必要だが、Bootstrapを使うことで、Bootstrapの作法に従ったスタイル設計で、比較的簡単に一定レベルのデザインを実現できる。
本来デザインは熟練が必要だが、Bootstrapを使うことで、Bootstrapの作法に従ったスタイル設計で、比較的簡単に一定レベルのデザインを実現できる。
HTMLの要素単体でいろんな作法がある。自分が使うもの、よく使うものを中心にその都度見て構造を理解するとよさそう。
==== Version ====
[https://skillhub.jp/blogs/250 Bootstrap 5とBootstrap 4の違い：主要な変更点をまとめて紹介 | Skillhub[スキルハブ]]
2021-05-05にBootstrap5がリリースされた。記法が変わっているので、要点を把握しておく。
* jQueryの削除。
他に今までおなじみだったクラス記法が大幅に削除されている。


==== Layout ====
==== Layout ====
463行目: 648行目:


個人的には、{breakpoint}と{columns}を省略した形を優先して使っていきたい。
個人的には、{breakpoint}と{columns}を省略した形を優先して使っていきたい。
==== Forms ====
===== Overview =====
[https://getbootstrap.jp/docs/5.3/forms/overview/ フォーム · Bootstrap v5.3]


==== Component ====
==== Component ====
469行目: 659行目:
[https://getbootstrap.jp/docs/5.3/components/buttons/ ボタン · Bootstrap v5.3]
[https://getbootstrap.jp/docs/5.3/components/buttons/ ボタン · Bootstrap v5.3]


=== Other ===
よく使う。ボタンの基本となる.btnクラスがあって、これにバリエーション (btn-primary/secondary) などを使う形。
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
.btnクラスはbutton要素での使用を念頭に置いている。


==== tooltip ====
=== TailwindCSS ===
 
[https://fixel.co.jp/blog/tailwindcss/ TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社]
* [https://pa-tu.work/blog/tool-tip ツールチップをCSSで実装する]
* [https://www.geeksforgeeks.org/what-is-a-tooltip-in-html/ HTML のツールチップとは何ですか? - GeeksforGeeks]
* [https://stackoverflow.com/questions/43089766/is-html-title-attribute-a-toolip Is html title attribute a toolip? - Stack Overflow]
* [https://www.w3schools.com/tags/att_global_title.asp HTML Global title Attribute]
 
マウスホバーで出してくれる補足情報。いくつか実装方法がある。
 
title属性を設定するとそれで表示してくれる。これがシンプル。
 
==== Space ====
 
* [https://qiita.com/SE-studying-now/items/23f9533c57bfef58ba1b HTMLでラベル表示すると連続した半角スペースが1つに丸められる件 #タグ内の半角スペース - Qiita]
* [https://developer.mozilla.org/ja/docs/Web/CSS/white-space white-space - CSS: カスケーディングスタイルシート | MDN]
 
前提として、HTMLだと2個以上のスペースが1個に丸めて表示される。


スペースを維持する方法がいくつかある。一番シンプルなのはpre要素。
Atomic DesignのAtomで構成されたCSS集。


ベースにあるのが、white-spaceプロパティー。この値で制御される。
VueやReactでのコンポーネント化前提のCSS。
{| class="wikitable"
!
!改行文字
!空白と
タブ文字
!テキストの
折り返し
!行末の空白
!行末の
その他の空白区切り
|-
!<code>normal</code>
|まとめる
|まとめる
|折り返す
|除去
|ぶら下げる
|-
!<code>nowrap</code>
|まとめる
|まとめる
|折り返さない
|除去
|ぶら下げる
|-
!<code>pre</code>
|そのまま
|そのまま
|折り返さない
|そのまま
|折り返さない
|-
!<code>pre-wrap</code>
|そのまま
|そのまま
|折り返す
|ぶら下げる
|ぶら下げる
|-
!<code>pre-line</code>
|そのまま
|まとめる
|折り返す
|除去
|ぶら下げる
|-
!<code>break-spaces</code>
|そのまま
|そのまま
|折り返す
|折り返す
|折り返す
|}
折り返しの有無で、pre/pre-wrapを使うのがよいと思われる。
[[Category:IT]]
[[Category:IT]]

2024年11月29日 (金) 16:35時点における最新版

About

HTML (Hyper Text Markup Language) はウェブ用の文書を記述するためのマークアップ言語だ。文章を構成する要素 (見出しや段落など) にマークアップを施す (明示的に印をつける) ことで文書を表現する。HTMLは手作業で記述されることもあるが、プログラムから生成されることもある。

HTMLは単なるテキストだけではなく、画像や動画などのメディア、テキスト入力欄・ボタンなどのフォーム、JavaScriptによるプログラムなどを埋め込むことができるため、プログラムのGUIとしても使用される。ウェブブラウザーから表示した時のSNSやWikiの画面はHTMLで表現されている。

HTMLの見え方はスタイルシートという仕組みで決まる。これにより例えば見出しは大きな文字で、段落の前後は1行あけて、リンクは青い文字で表示される。スタイルシートを記述するための代表的な言語はCSSだ。一般的に、HTMLの制作者が自分でCSSを用意してHTMLと紐づけてウェブサイトの外観をデザインする。

Standard

HTMLの現行の標準仕様は「WHATWGのHTML Standard」および「ISO/IEC 15445:2000」だ。一般的なウェブ開発では前者が使用される。

HTMLの構文は仕様通りに記述されるべきだが、ウェブブラウザーはエラー修正機能を持ち、誤ったHTMLをなるべく正しく表示しようとする。そのためHTMLの誤りには気づきにくいが、有耶無耶にするとトラブル解決や互換性の面で問題の元になりかねない。

XHTML

通常のHTMLはXMLに似ているが厳密にはXMLではない。XHTMLを使用すれば完全なXMLの構文でHTML文書を記述できる。GNU socialの画面はXHTMLで表現されている。

PHPなどのプログラムでHTMLを生成する場合、XHTML構文を使用するか、通常のHTML構文を使用するかを区別する必要がある。また、JavaScriptでDOMを操作する場合も現在の文書がHTMLかXHTMLかで挙動に差が発生するため注意が必要だ。

HTMLとXHTMLとの主な差異は次の通りだ。

  • XML宣言がある
  • 要素名は小文字でなければならない
  • 開始タグ/終了タグの省略ができない
  • 通常のHTMLで終了タグの無い <img> 要素などは <img /> の様に閉じる必要がある

Form

About

Ref: <form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN

form関係の要素はWebアプリで非常に重要。

form要素外のinputとの連携。

基本的にform要素内に配置されたinputなどのフォーム関係要素の情報が同じform要素ないのtype=submitのボタンで送信される。

form要素外部に配置したform関係要素を送信に含めたい場合、form要素にidを指定しておき、外部のform関係要素のform属性で指定する。

<body>
    <form id="form1" method="POST" action="test.php">
        <input type="text" name="text1" id="text1" />
        <input type="submit" value="submit" />
    </form>
    <input type="text" name="text2" id="text2" form="form1" />
</body>

submitのボタンがform要素外部にある際も、form属性で指定すれば連携できる。

  • form: フォーム連携要素の処理、サーバーへのデータ送信用 (HTML Standard)。
  • fieldset: フォーム要素のグループ化用の要素 (The legend element)。
  • legend: fieldsetのラベル。

fieldsetが一番外側で、その中にformやinputがあるイメージ。

Attribute

重要な属性が何個かある。

  • action: 送信先のURL。
  • enctype: method="post"の場合のMIME。application/x-www-form-urlencoded=デフォルト。基本はこれで問題ない。multipart/form-data=画像やファイル類の場合。text/plain=デバッグに便利。
  • method: 送信時のHTTPメソッド。get=デフォルト。URLクエリー (?と&区切り)。post=フォームデータをリクエスト本体に設定。dialog=dialog要素内で有効。
  • novalidate: 論理値。フォーム送信時の検証を無視。

Autocomplete

Ref: HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN

input系要素の場合、autocomplete属性でWebブラウザーで自動入力できる。入力の手間を省くのに重要。

autocomplete属性の値で、Webブラウザーに自動入力の種類などを示唆できる。「HTML Standard」に指定可能な値がある。

いくつかよく使いそうなものを記載しておく。

  • email
  • url
  • username
  • off
  • on

Webブラウザーがオートコンプリートで認識してくれる項目がけっこう限定されている (Chrome でフォームに自動入力する - パソコン - Google Chrome ヘルプ)。

WebブラウザーがやってくれていないやつはJavaScriptでやっていることがある。

[Settings]-[Autofill and passwords] で管理されている。基本的に以下のデータが対象 (オートコンプリート属性入門 〜Chromeで設定できる項目を試してみた〜 - asoview! Tech Blog)。

  • username
  • password
  • 住所
  • 決済方法
  • email

その他の情報。

自動補完の条件がある。他のドメインにsubmitする場合はそのままだと対象外。また、autocomplete=usernameすると、ログイン時の入力補完の支援を受けられる。ややトリッキー。自動補完してほしいところはこれを指定しておくとひとまず楽ではある。

datalist

Ref: datalistタグ＆inputのlist属性の使い方と注意点 [無料ホームページ作成クラウドサービス　まめわざ]

autocompleteに近いものとしてdatalistがある。こちらはinput+selectのようなことができる。いわゆるコンボボックス的なことが簡単にできる。

    <input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
      autocomplete="on" autocorrect="off" autocapitalize="off"
      formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
      style="background-color:rgb(158,194,63)" />
    <datalist id="MaMiList">
      <option value="fedibird.com"></option>
      <option value="gp.tsukimi.club"></option>
      <option value="mastodon.social"></option>
    </datalist>

数値入力

数値入力系のフォーム作成。ポイントがいくつかある。input[type=number]は一見するとこれがふさわしく見える。が、いろいろ問題がある。たとえば、e.+-が入力できる。

数字以外も入力できるが、イベントではこれらは空になる。文字数制限などで困る。type=textで実装したほうが都合がよいだろう。 

<input type="text" inputmode="numeric" pattern="\d*">

他の方法で頑張ったほうがいい。

type="tel"だとイベントで値をとれる。

readonly/disabled

input要素の入力禁止の属性がreadonlyとdisabledの2種類ある。

readonly disabled
submit x -
focus x -

値の送信可否が非常に重要な違い。見た目だけで、送信する必要がないならば、disabledでOK。

name属性

query送信

html - How to append querystrings to a URL on submit of a form? - Stack Overflow

フォームパラメーターをURLクエリー (?name1=1&name2=2) 形式で送信したいことがある。 

<form action="http://echo.iambroken.com/" method="get">
    <input name="one">
    <input name="two">
    <input type="submit">
</form>

method="get"にすると、クエリー形式になる。

ただし、既存のクエリー文字列を全部置換してしまう。既存はhiddenで残しておくとよい。 

<input type="hidden" name="q" value="123">

[]配列参照

フォーム送信時に、サーバーサイドで配列として参照させることができる。nameの末尾を[]にすると配列扱い。キーを指定することもできる。省略すると0始まりの配列扱い。

これはHTML側ではなくて、サーバーサイド側の解釈の仕様。

PHPだと上記で定義されている。が、PHP以外の言語も同様の実装で、デファクトスタンダード的な扱い。

配列参照にすべきものと、そうでないフォームがある。

  • input[type=checkbox]
  • select

基本はcheckboxとselectのみ。逆に、これら以外は配列にしない。input[type=radio]は、送信する際は結局1個の値になる。特定したければ、[value=]のセレクターを使えばいい。

リレーションとの命名規則

https://chatgpt.com/c/673ad9c5-5d48-800b-a937-b8ff4fade246

複数テーブルとリレーションしたデータをフォームに表示したり、扱いたい場合、連動するform関係要素のname属性の命名規則に悩む。nameには_以外の記号が使えず、プレフィクスで分割などができないから。

該当テーブル名の配列にするとうまく取り扱える。 

<input type="text" name="title" value="{{ old('title', $post->title) }}">
<select name="category_id">
     @foreach($categories as $category)
         <option value="{{ $category->id }}" {{ old('category_id', $post->category_id) == $category->id ? 'selected' : '' }}>
             {{ $category->name }}
        </option>
    @endforeach
</select>

外部キーを使うだけの場合はシンプルで上記のような感じ。 

<input type="text" name="post[title]" value="{{ old('post.title', $post->title) }}">
<select name="post[category_id]">
     @foreach($categories as $category)
         <option value="{{ $category->id }}" {{ old('post.category_id', $post->category_id) == $category->id ? 'selected' : '' }}>
             {{ $category->name }}
        </option>
    @endforeach
</select>

配列にするとよさそう。上記の例は以下のようになる。 

$request->input('post'); 
// 結果:
// [
//     'title' => 'Example Title',
//     'category_id' => 1
// ]

これを片方だけテーブル名の配列にして、allで取得する想定だときれいにおさまる。

PHPで上記の命名規則にするには以下のような関数で整形する。

    /**
     * Eloquentのモデルでリレーションで外部テーブルのカラム取得用に、name属性をname=table1[table2][name]形式かname=name形式に整形する。
     *
     * @param string[] $names [table1, table2, name] 形式の配列。外部からincludeしたリレーションのモデルメソッドに対応する接頭辞付きname属性の配列。
     * @param bool $foreign 外部キーの場合true。外部キーはincludeする側のテーブルカラムにあるからprefixをつけたくないのでこれをtrueにする。
     * @return string table1[table2][name]形式か$prefixが空の場合nameを返す。
     */
    public static function getPrefixedName(array $prefix, string $name, bool $foreign = false): string
    {
        $names = array_merge($prefix, [$name]);
        $offset = ($foreign && $prefix) ? 1 : 0;
        return array_reduce(array_slice($names, 1+$offset), function($c, $e){return $c.'['.$e.']';}, $names[$offset]);
    }

テストコード。 

class GASHelperTest extends TestCase
{
    private $class = GASHelper::class;

    public function testGetPrefixedName()
    {
        $this->assertEquals($this->class::getPrefixedName([], 'name'), 'name');
        $this->assertEquals($this->class::getPrefixedName([], 'name', true), 'name');
        $this->assertEquals($this->class::getPrefixedName(['table1'], 'name'), 'table1[name]');
        $this->assertEquals($this->class::getPrefixedName(['table1', 'table2'], 'name'), 'table1[table2][name]');
        $this->assertEquals($this->class::getPrefixedName(['table1'], 'name', true), 'name');
        $this->assertEquals($this->class::getPrefixedName(['table1', 'table2'], 'name', true), 'table2[name]');
    }
}

Other

noscript

https://chatgpt.com/c/67496a3d-4b88-800b-9d3b-a3ca26e70970

JavaScript無効でも動作するアプリの実装には、「プログレッシブエンハンスメント (Progressive Enhancement)」というアプローチをとる。

まず、JavaScriptなしで最低限の動作を実装。

JavaScriptが有効なら、addEventListenerでインタラクションにイベントを設定して、既存処理を上書き。ajaxの非同期処理が主な仕事だろう。

CSSでも参照可能。html要素のclass属性にno-jsなどを設定しておいて、script要素内で属性を削除するなど。

HTMLの属性などでもいろいろできることがある。

  • CSS :has擬似クラス=CSSでif文に近いことができる。
  • CSS :user-invalid擬似クラス=
  • CSS field-sizing: content=入力量に応じた可変高さ。textarea。
  • ポップオーバーAPI
  • selectlist
  • invorkers

ポップオーバー API - Web API | MDN

CSS

CSS — Styling the web

CSS - ウェブ開発を学ぶ | MDN

CSS building blocks

CSS の値と単位

大きく数値、長さ、パーセント値の3種類がある。

  • 数値
  • 長さ
    • 絶対長さ
    • 相対長さ: em/rem, vh/vwなど。emは親要素、remはルート要素のフォントサイズが基準。lh=要素そのものの行の高さ。rlh=ルート要素 (通常html要素) の行の高さの相対値。vh/vwは拡大倍率。vh/vwは拡大倍率。1vhは1%。
  • パーセント値

Viewport (ビューポート) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN: Webブラウザーの用語としては、閲覧中文書の内、ウィンドウの中で現在見えている部分を指す。

lvh/svh/dvh

CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決 | コリス

【図解】CSSのvhとsvhとlvhとdvhは何が違う？（100vhを指定してもスマホでははみ出る問題も解決） | レンちゃんとペンタ

  • Large Viewport: アドレスバーで隠れる可能性がある。
  • Small Viewport: アドレスバーで隠れない部分。
  • Dynamic Viewport: アドレスバーで隠れない部分。

vhはデフォルトのビューポートサイズ。たいていLarge Viewportと同じ。svh<=vh<=lvhの範囲。

HTMLへの適用方法

CSS の構造 - ウェブ開発を学ぶ | MDN

CSSのHTMLへの適用方法が大きく3種類ある。

  1. 外部スタイルシート: head要素内のlink要素での参照     <link rel="stylesheet" href="styles.css" />
  2. 内部スタイルシート: head要素内のstyle要素内
  3. インラインスタイル: html要素のstyle属性 (非推奨)。

text-indent

Ref: CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる - かもメモ.

text-indentが設定されているとinline-blockが崩れることがある。

inline-blockの要素に対して「text-indent: 0 又は、display: inline;」で解決するらしい。display:inlineで自分の場合解決した。

Selector

CSS セレクター - CSS: カスケーディングスタイルシート | MDN

CSSの適用範囲を指定する。document.querySelectorなどでも使用する。非常に重要。

スペースに意味があるので注意する。

エスケープ

セレクター内の[]などの特所文字は\でエスケープ必要。 

document.querySelector('[name="楽楽販売_オーナーマスタ\\[販売店コード\\]"]');

結合子とセパレーター

組み合わせると、対象の下、左右を指定できる。後ろは選べるが、前は選べない。

  • + 次兄弟結合子next-sibling combinator: 直後の要素 (1個)。
  • > 子結合子child combinator: 直接の子要素 (1階層)。
  • || 列結合子 column combinator (実験的): 2のセレクターの間。
  • ~ 後続兄弟結合子subsequent-sibling combinator: 以後の要素 (全部)。
  • " " 子孫結合子descendant : 以後の子要素 (全階層)。
  • | Namespace separator: 左の名前空間に属する右にマッチ。

前は選べないが、:has()などと併用すると、前に近いものは選べる。

JSなしでタブ切り替えデザインを実装できるの、、、！？ #CSS - Qiita

属性セレクター

Ref: CSSで複数の属性セレクタを指定する #CSS - Qiita. 

div[data-color="red"][data-size="small"]

[属性名="属性値"]の書式。.クラス名は[class="クラス名"]の省略記法？

スペースを開けずに複数列挙することで複数指定できる。その場合、AND指定になる。

テキスト選択は不能

Is there a CSS selector for elements containing certain text? - Stack Overflow

要素のtextContentで選択したいことがあった。

CSS3の:containsでできるかもしれないが、これは未実装。空の場合だけ、:emptyが使える。

フォームのCSS required

<style>
input[required='required']::after {
	content: '*';
}
input[required='required'] {
	color: red;
}
input[required='required'] {
	background-color: red;
}

/* input[required='required'] {
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
} */
</style>

例えば、radioボタンの場合、ラベル側を修飾したい。.requiredのクラス属性を指定しておいたほうがいいだろう。 

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

他に以下のようなCSSで<label><input /></label>だとラベルを修飾できる。 

	label:has(:required):after {
		content: " *";
		color: red;
	}

Tab menu

JavaScript使用可否で実装方法が異なる。JSを使う場合、リストのclickで表示、非表示用のクラスを脱着してやる。

JavaScript使わない場合、input[type=radio]のcheckedで表示させる形で実装する。 

			<section class="tab-wrap">
				<label class="tab-label">ボタン1<input type="radio" name="tab" class="tab-switch" checked="chekced" /></label>
				<div class="tab-content">コンテンツ1</div>
				<label class="tab-label">ボタン2<input type="radio" name="tab" class="tab-switch" /></label>
				<div class="tab-content">コンテンツ2</div>
				<label class="tab-label">ボタン3<input type="radio" name="tab" class="tab-switch" /></label>
				<div class="tab-content">コンテンツ3</div>
			</section>

	.tab-wrap {
		display: flex;
		flex-wrap: wrap;
		.tab-switch {display: none;}
		.tab-label {
			color: White;
			background: LightGray;
			margin-right: 5px;
			padding: 3px 12px;
			order: -1;
		}
		.tab-content {
			width: 100%;
			display: none;
			padding: 10px 20px;
			background-color: #eee;
			border: 1px solid #ccc;
		}
		.tab-label:has(:checked) {
			background: rgb(231, 85, 1);
			+.tab-content {
				display: block;
			}
		}
	}

Table

行・列見出しの固定

position: stickyで固定できるらしい。

バリエーション1: ヘッダーをoverflow: scrollな要素の上と左に固定する 

<div class="sticky_table_wrapper">
  <table class="sticky_table">
  </table>
</div>

.sticky_table_wrapper {
  overflow: scroll;
  width: calc(100vw - 1rem);
  height: 75vh;
}

widthとheightはお好みで。widthはいらないか。heightはいるかも。

クリック範囲拡大

ラジオボタンやa要素など。クリックしたいとき。そのままだとクリック範囲が狭い。

基本的にはlabelやaのスタイルでwith:100%;height:100%;を指定する。

Design

https://chatgpt.com/c/67490a1e-798c-800b-ab01-c2b6fe99455a

About

BEM vs OOCSS vs SMACSS 【CSS命名規則比較】 #bem - Qiita

CSSの設計は、class属性の命名規則がほぼ全て。

いくつか主要な方法がある。

  • BEM (Block, Element, Modifiler): Block/Element/Modifierの組み合わせで表現。card/card__title/card__link--blueのように、elementは__区切り、modifilerは--区切りで表現。
  • SMACSS (Scalable and Modular Architecture for CSS)
  • OOCSS (Object Oriented CSS): 構造と見た目でわけて設計。
  • Atomic Design
  • CSS-in-JSプロジェクトやチームの規模、使用する技術スタックによって適切なCSS設計方法は異なりますが、以下のような選択を考慮することができます。
  • 小規模から中規模のプロジェクト: BEMやSMACSSを使用することで、クラス名やスタイルの整理が容易になり、開発がスムーズになります。
  • 大規模プロジェクトやチーム開発: OOCSSやAtomic Design、BEMの組み合わせを使用して、コンポーネントベースの設計を行うと、スタイルの一貫性と再利用性が高まります。
  • ReactやVueなどのコンポーネント駆動型開発: CSS-in-JS（Styled ComponentsやEmotion）を使用すると、動的なスタイルの変更やコンポーネントごとのスタイル管理が簡単になります。

CSS-in-JSは匿名化と相性悪いのでNG。

OOCSSがオブジェクト指向でいい。BEMはクラスをたくさん作る必要がある。

親要素の相対で対応する？

BEMのほうが、プラグインで画面UIを追加する場合に融通が効くか？

OOCSS

知っておきたいCSS設計法 | 第1回 OOCSSの基本

OOCSSとは、Object Oriented CSSの略です。これは、Nicole Sullivanという人が提唱した考え方です。

命名規則が難しい。

例えば、button一つとっても、レイアウトなどの都合で小さくしたいことがあったりするかもしれない。どうする？ 

<button type="button" class="">button</button>

<ul>
  <li class="label label-news">NEWS</li>
  <li class="label label-pickup">PICKUP</li>
  <li class="label label-info">INFO</li>
</ul>

.label {
  margin-right:.5em;
  padding:.2em 1em;
  display:inline-block;
  &-news{
    background-color:yellow;
  }
  &-pickup{
    background-color:pink;
  }
  &-info{
    background-color:#73d1fa;
  }
}

Other

tooltip

マウスホバーで出してくれる補足情報。いくつか実装方法がある。

title属性を設定するとそれで表示してくれる。これがシンプル。

Space

前提として、HTMLだと2個以上のスペースが1個に丸めて表示される。

スペースを維持する方法がいくつかある。一番シンプルなのはpre要素。

ベースにあるのが、white-spaceプロパティー。この値で制御される。

改行文字 空白と

タブ文字

テキストの

折り返し

行末の空白 行末の

その他の空白区切り

normal まとめる まとめる 折り返す 除去 ぶら下げる
nowrap まとめる まとめる 折り返さない 除去 ぶら下げる
pre そのまま そのまま 折り返さない そのまま 折り返さない
pre-wrap そのまま そのまま 折り返す ぶら下げる ぶら下げる
pre-line そのまま まとめる 折り返す 除去 ぶら下げる
break-spaces そのまま そのまま 折り返す 折り返す 折り返す

折り返しの有無で、pre/pre-wrapを使うのがよいと思われる。

CSS framework

Bootstrap

About

Introduction

元々Twitter社が公開した社内CSSフレームワーク。

[はじめに · Bootstrap v5.3] に記載のある [レイアウト (Grid)]/[コンポーネント (Button)] が具体的な使い方になる。リンク先のGrid/buttonが基本。

「【超入門】初心者向け Bootstrapの基本的な使い方 - RAKUS Developers Blog | ラクス エンジニアブログ」

なぜ使われているかは以下の特徴が由来。

  • レスポンシブWebデザイン対応
  • 導入のしやすさ、汎用性
  • 多数のコンポーネント

本来デザインは熟練が必要だが、Bootstrapを使うことで、Bootstrapの作法に従ったスタイル設計で、比較的簡単に一定レベルのデザインを実現できる。

HTMLの要素単体でいろんな作法がある。自分が使うもの、よく使うものを中心にその都度見て構造を理解するとよさそう。

Version

Bootstrap 5とBootstrap 4の違い：主要な変更点をまとめて紹介 | Skillhub[スキルハブ]

2021-05-05にBootstrap5がリリースされた。記法が変わっているので、要点を把握しておく。

  • jQueryの削除。

他に今までおなじみだったクラス記法が大幅に削除されている。

Layout

Grid

グリッドシステム · Bootstrap v5.3

グリッドシステムは、12カラムの組み合わせで構築。CSS flexboxで構築されていてレスポンシブ (横幅に応じた可変)。 

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上記が基本の構成。以下が上記を構成する基本ルール。

  1. div.containerまたはdiv.container-fluid (container-fluidは画面幅いっぱい表示)
  2. 1内のdiv.row
  3. 2内のdiv.col-{breakpoint}-{columns}を複数配置。
  4. 3の{columns}の合計を12にする。
グリッド・オプション

{prefix} 相当がグリッドの階層になっている。

デバイス 画面サイズ prefix
スマホ 576px以下 xs (eXtra Small)
タブレット 576px以上～768px未満 sm (SMall)
PC(小) 768px以上 ～ 992px未満 md

（MidDle）

PC(中) 992px以上 ～ 1200px未満 lg

（LarGe）

PC(大) 1200px以上 ～ 1400px未満 xl

（eXtra Large）

PC(特大) 1400px以上 xxl

（eXtra eXtra Large）

画面サイズごとになっている。画面サイズの境界をブレークポイント (列が変わるから？) と呼んでいて、このブレークポイント単位で上記の区切りになっている。

オプションを使ったレイアウトはいくつかさらに使い方がある。

{breakpoint}と{columns}を省略すると、個数で自動で判断してくれる。

{breakpoint}-autoは、コンテンツサイズに応じて自動で幅を近しいものにしてくれる。

個人的には、{breakpoint}と{columns}を省略した形を優先して使っていきたい。

Forms

Overview

フォーム · Bootstrap v5.3

Component

Button

ボタン · Bootstrap v5.3

よく使う。ボタンの基本となる.btnクラスがあって、これにバリエーション (btn-primary/secondary) などを使う形。 

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

.btnクラスはbutton要素での使用を念頭に置いている。

TailwindCSS

TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社

Atomic DesignのAtomで構成されたCSS集。

VueやReactでのコンポーネント化前提のCSS。

「https://wiki.senooken.jp/index.php?title=HTML&oldid=2400」から取得