20210304のHTMLに関する記事は19件です。

Sassについて

SassとScssとは

CSSをより簡略化したメタ言語です!
この2つの共通点は入れ子構造で書くことです。

index.html
<div class="header">
 <div class="header-logo">Sassについて</div>
</div>
style.css
.header {
 heigth:90px;
 color:black;
}

.header-logo {
 font-size:40px;
 border-bottom:4px solid black;
}

と入力するとしましょう。
これが普段のcssの入力の仕方ですね?

Sassの場合は、少し記入の仕方が変わります。

atyle.scss
.header
 heigth:90px
 color:black
 .header-logo
  font-size:40px
  border-bottom:4px solid black

となります。
ちなみにScssで書く場合はこうなります。

style.scss
.header {
 heigth:90px;
 color:black;
 .header-logo{
  font-size:40px;
  border-bottom:4px solid black;
  }
}

みたくなる。
HTMLの親要素と子要素に共通する書き方ですね。つまり入れ子です。
ちなみにcssであたっていない場合はデベロッパーツールで確認しますが、これら(以下sass)は、崩れて画面真っ黒、そして黒い画面でエラーを訴えてくるのですね?

以上がSassの説明でした。
次の記事では導入について書いていきます?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【HTML/XHTML】<br>と<br />の違い

プログラミング勉強日記

2021年3月4日

<br><br />の違い

 結論から言うと、<br>はHTMLの書式で、<br />はXHTMLの書式である。XHTMLでは、省略式でもいいが終了タグもきじゅるしないといけない。

xhtmlでの書き方
<br></br>
<br />

HTMLとXHTMLとは

 HTMLはHyperText Markup Languageの頭文字をとったもので、コンピュータが理解できるマークアップをするための言語である。
 XHTMLはExtensible HyperText Markup Languageの略称で、HTMLとXMLの特徴を合わせたWebページを作るための言語である。XHTMLは廃止されている。

参考文献

<br><br />タグの違いとは
<br><br /> タグの違い 【HTML と XHTML 】
【初心者向け】XHTMLとは何?HTMLとの違いは?【徹底解説】

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

フォームの設定「reactメモ」

reactを今日から初めていく、メモとして覚えた知識をここに残す。

・フォームの設定
入れた値を表示させる

react_app
 <body>
    <h1>React</h1>
    <div id="root">wait.......</div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    const p = {
     fontSize: "20px",
     padding: "10px",
     };

    const input = {
     fontSize: "16px",
     padding: "5px 10px",
    }

  let message= 'お名前をどうぞ:';
  let in_val = '';


   let doChange = (event)=>{
     in_val = event.target.value ;
     message = 'こんにちは、' + in_val + 'さん!!!';
   };

    let doAction = (event)=>{

      let el = (
        <div>
          <p style={p}>{message}</p>
            <div>
              <input type="text" id="input" style={input}
              onChange={doChange} />
              <button onClick={doAction} style={input}>
                Click
                </button>
              </div>
          </div>

      );
      ReactDOM.render(el, dom);
    };
    doAction();


    </script>

  </body>

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JSXの使い方「reactメモ」

reactを今日から初めていく、メモとして覚えた知識をここに残す。

・AJXの使い方
AJXとは、「タグをそのまま値として記述する」というシンプルな機能

flgの値がtrueなら、&&の<p>タグが表示される。

react_app
 <body>
    <h1>React</h1>
    <div id="root">wait.......</div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    const p = {
     fontSize: "20px",
     padding: "10px",
     };

    const input = {
     fontSize: "16px",
     padding: "5px 10px",
    }

  let message= 'お名前をどうぞ:';
  let in_val = '';


   let doChange = (event)=>{
     in_val = event.target.value ;
     message = 'こんにちは、' + in_val + 'さん!!!';
   };

    let doAction = (event)=>{

      let el = (
        <div>
          <p style={p}>{message}</p>
            <div>
              <input type="text" id="input" style={input}
              onChange={doChange} />
              <button onClick={doAction} style={input}>
                Click
                </button>
              </div>
          </div>

      );
      ReactDOM.render(el, dom);
    };
    doAction();


    </script>

  </body>

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【javascript】appendChildを多用するコードをスッキリと

目的

自分用

HTML
<div class="e1">
    <div class="e1-1">
        <div class="e1-1-1"></div>
        <div class="e1-1-2">
            <div class="e1-1-2-1">
        </div>
        <div class="e1-1-3"></div>
    </div>
</div>

javascriptで上記のような要素の生成と追加を繰り返すコードをスッキリさせたかった。
下記のように書くと上記HTMLを出力するようにしたい。

const c = 'className';
const elmement =
    childAppender(el('div',{[c]:'e1'}),
        siblingAppender(el('div',{[c]:'e1-1'}),
            el('div',{[c]:'e1-1-1'}),
            childAppender(el('div',{[c]:'e1-1-2'}),
                el('div',{[c]:'e1-1-2-1'})
            ),
            el('div',{[c]:'e1-1-3'})
        )
    );
console.log(elmement);  //上記HTMLのような構造を出力

第一引数は親要素となる為、慣れないと少しややこしい。

関数

以下の関数を用いる

//要素の生成
const el = (tag, attr) => {
    if (!tag) return null;
    const elm = document.createElement(tag);
    if (!attr) return elm;
    const map = Object.entries(attr);
    for (const [k,v] of map) elm[k] = v;
    return elm;
};
//nodeTypeの確認
const isElementNode = n => n ? n.nodeType===1 : false;
//子孫要素の追加
const childAppender = (...elms) => {
    const idx = elms.findIndex(x => !isElementNode(x));
    switch (idx) {
        case -1:    break;
        case 0:     return null;
        case 1:     return elms[0];
        default:    elms.slice(0, idx); break;
    }
    for (let i=0,len=elms.length-1; i<len; i++) {
        elms[i].appendChild(elms[i + 1]);
    }
    return elms[0];
};
//兄弟要素の追加
const siblingAppender = (parent, ...elms) => {
    if (!isElementNode(parent)) return null;

    const available = elms.filter(isElementNode);
    for (const child of available) parent.appendChild(child);
    return parent;

};

関数の説明

  • el( tagName[, {attribute: value,...}] )
    要素を生成し返す。
    引数1:tagName => HTMLのタグ名
    引数2:属性名をKEY、値をVALUEで組んだオブジェクト形式
        elm.className = 'classname'のようなイコールで指定出来るもののみ
        elm.classList.add('classname')のような指定方法のものは不可

  • childAppender( element1, element2, ... )
    第一引数を親要素として残りの引数を順次、直列的に子孫に追加し、親要素を返す。
    nodeTypeが1でない要素が存在すると以降の要素は追加されない。

  • siblingAppender( parentNode, element1, element2, ... )
    第一引数を親要素として残りの引数を順次、兄弟要素として親要素の直下に追加し、親要素を返す。
    nodeTypeが1でない要素は追加されないが、childAppenderと違い最後の引数まで追加される。

感想

少し重い気がする。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日本語フォントでもOK!?自動カーニング(字間調整)できるCSSがすごい!

どうも7noteです。フォントによる字間の悩みはこれで1発解決!

様々な日本語フォントがありますが、フォントによって1文字の大きさが違い、いざ実装してみるとなんだかやぼったい感じ(ダサい)の文字の並びになってしまうことが気になるあなたへ。

特にデザイナーからWEBのコーディングも始められた方は

「cssで字間の自動調整ってできないの?」

と思われる方もいるかも。そんな方へ朗報です。
デザイナーから字詰めを迫られていたコーダーの人も、朗報です。

font-feature-settings: "palt"を使うことで、自動で字間調整してくれる。

プロポーショナルメトリクスが有効になるフォントであれば、この指定を入れるだけで一発で自動カーニングをしてくれるようです!しかもほぼ全てのブラウザで対応。

.palt {
  /* プロポーショナルメトリクスと旧字体指定 */
  font-feature-settings: "palt";
}

Can I useで確認しても主要ブラウザは全て対応。
image.png

(設定前と設定後のテキストを比較。)
image.png

全体的に指定ありの方が余分な隙間がキュッとしまった印象になります。

まとめ

font-feature-settings: "palt";の指定が使えるフォントは限られているようなので、指定しても「あれ?効かない?」と思ったらこちらのサイトに綺麗に情報がまとまっていますのでこちらを見ていただくといいかもしれません。

参考サイト:https://ics.media/entry/14087/

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML~フォーム④~

ではでは、今まで使った技術でフォームで作っていきましょう!!

index.html
<link rel="stylesheet" href="css/style.css">
  <div class="form">
    <h1>お問い合わせフォーム</h1>
  <label>名前:<input type="text"></label><br>
  <label>電話番号:<input type="number"></label><br>
  <label>メールアドレス:<input type="email"></label><br>
  <fieldset>
    <legend>どこで当社を知りましたか??(複数選択可)</legend>
    <label><input type="checkbox">知り合い</label>
    <label><input type="checkbox">新聞・テレビ</label>
    <label><input type="checkbox">インターネット</label>
  </fieldset>
  <label for="comment">お問い合わせ内容</label>
  <textarea id="comment" name="comment"></textarea>
  <button>送信</button>

</div>

簡易的なお問い合わせフォームなので雑ですが?
今まで作れなかった人が作れたので勘弁してあげてください笑
labelのあとのbrは行を変えたかったので作りました。
textareaはidとforを紐付けました?

style.css
.form {
  background-color: aqua;
  width: 40%;
  margin: 30px 40px ;
  padding: 30px;
  display: flex;
  flex-direction:column;
}

h1 {
  border: 2px solid black;
  width: 50%;
}

fieldset {
  width: 52%;
  margin-bottom:10px ;
}

textarea {
  display: block;
  height: 200px;
  margin: 20px;
  width: 80%%;
}


button {
  width: 10%;
  margin: 0px 0px 20px 20px;
}

cssは完全に感なのであれですが、、、、
噂のフレックスボックスですね(^_^;)フレックスボックスはこちらを
https://qiita.com/akari_0618/items/85a6f6d7eaf6681e11df

一応、ブラウザではこうなります!!
スクリーンショット 2021-03-04 18.34.59.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

投稿一覧画面を作っていて、長文を打ち込むと、文字がはみ出てしまう問題を解決する

今回オリジナルアプリを作るにあたって、検証ツールで、試しにめっちゃ長いアルファベットの文章を打ってみたのですが、そのときに、投稿を作っているブロックからはみ出てしまう問題が発生してしまったので、その解決策を共有していきたいと思います

実例

スクリーンショット 2021-03-04 17.59.43.png

こんな感じになってしまいます。
これでは、とてもいいUIとは言えませんよね、それを、
スクリーンショット 2021-03-04 18.01.32.png
のように、きちんと枠に収める方法があります

解決策

HTMLのbodyのCSSの部分に、

word-wrap: break-word;

をつければ解決します

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML~フォーム作成③~

前回の記事labelタグのフォーム作成について学びましたね!
次は、boxについて学んで行きましょう?

①ドロップダウンリスト

index.html
<label for="like">あなたの好きな食べ物は??</label>
<select id="like">
  <option>人参</option>
  <option>ピーマン</option>
  <option>玉ねぎ</option>
</select>

質問のセンスの無さは置いといてブラウザで表示するとこうなるかなと思います?
スクリーンショット 2021-03-04 14.35.43.png

はい!ドロップアンドリスト完成です!

最初から選択している状態でスタートしたい場合は、select の中の一つを選んでselectedを付けるとできます!
スクリーンショット 2021-03-04 14.46.07.png

②チェックリスト

それではチェックボックスを作っていきましょう!

index.html
<fieldset>
<legend>性別を教えて下さい</legend>
<label><input type="checkbox" name="gender" value="man"></label>
<label><input type="checkbox" name="gender" value="woman"></label>
<label><input type="checkbox" name="gender" value="other">その他</label>
</fieldset>

ここでタグについての説明をしますね!
fieldset▶ここではlabelのグループ化を図っています!
legend▶labelのタイトルを作っています!

ブラウザ上ではこうなります?
スクリーンショット 2021-03-04 16.05.02.png
クリックするとチェツクが付きます!

上記したチェックボックスは複数選択の際に利用するものなので、
一つだけ選択させる場合はラジオボタンに書き換えていきましょう!

index.html
<fieldset>
<legend>性別を教えて下さい</legend>
<label><input type="radio" name="gender" value="man"></label>
<label><input type="radio" name="gender" value="woman" checked></label>
<label><input type="radio" name="gender" value="other">その他</label>
</fieldset>

はい!こうすると一つのみの選択に変わります!?

name属性について解説しますと、
フォーム部品を識別するための名前を指定します。

複数のラジオボタンに同じ部品名を付けることで、1つのグループを作ることができます。
ラジオボタンでは、そのグループの中から1つだけを選択することができるのです!

③ボタン

次はボタンですね!!
結構簡単なのでちゃちゃっとやっちゃいましょう!

index.html
<input type="button" value="決定">

<button>決定</button>

ね、びっくりするぐらい簡単でしょう?
ブラウザ上だとこんな感じですね?
スクリーンショット 2021-03-04 16.39.12.png

どっちでも記述はいいみたいです?

ちなみにvalue属性とは、input要素の値を指定する属性。テキスト入力欄などにおいては初期入力値、チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、送信ボタンなどにおいてはボタン名を表す。ようです!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML~フォーム作成②~

前回の続きから始めていきます!
前回の続きはこちらからどうぞ?▶ https://qiita.com/akari_0618/items/86e5e8b1535c5cec5d7f 

前回入力したものをブラウザで表示するとこうなっているかなと思います!
スクリーンショット 2021-03-04 13.23.20.png

これだと何を入力するのかわからないので名前をつけてあげましょう!
この名前を付けるのは"label"を使いましょう!

その際に使うのが"id属性"と"for属性"です。この子達がlabelの名前とinputで入力した値を紐付けてくれます!
紐付けではいくつかあるみたいなのですが、気になる人は自分で調べてみてください!!
id属性とfor属性についてはこちらを▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d

index.html
<label for="name">名前:</label>
<input type="text" id="name">
<textarea></textarea>
<label for="password">パスワード:</label>
<input type="password" id="password">

スクリーンショット 2021-03-04 14.00.02.png

id属性とかわかんないからめんどくさい!って思った方!
私もそうだから省略しちゃいましょう?

index.html
<label>名前:<input type="text"></label>
<textarea></textarea>
<label>パスワード:<input type="password" ></label>

はい!こんな感じに楽になりましたね?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Bootstrap5 最小構成のメモ

たぶんこれが最小構成だと思う。
あくまでメモ

javascriptあり

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

cssのみ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <body>
    <!-- page content -->
  </body>
</html>

厳密にはもう少し減らせるかもしれないが、、実用性を考えてここまでにしときます
最後に一応html5における最小構成を載せときます

<!DOCTYPE html>
<title></title>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML~フォーム作成①~

ここではお問い合わせフォームの部品について見ていきます。

まずは、お問い合わせフォームを作るために必ず使う"type"属性について見ていきましょう!
フォーム部品の種類を指定する際に使用します!inputタグと一緒に使います。
それでは見ていきましょう。

①1行テキスト

index.html
<input type="text">

と入力するとブラウザ上で1行のみ表示されますね。
スクリーンショット 2021-03-04 13.01.14.png

これはtype属性の初期値です?
他にも様々な値がありますので、参考にどうぞ!
http://www.htmq.com/html5/input_type_search.shtml

②2行以上のテキスト

index.html
<textarea></textarea>

スクリーンショット 2021-03-04 13.20.36.png

③password テキスト

index.html
<input type="password">

スクリーンショット 2021-03-04 13.23.20.png

いつも入力するpassword入力ホームになりましたね!!
ただこれだと、何を入力するのかがわかりにくいですね(^_^;)

そこで何を入力するのかがわかるようにしていきたいと思います?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

metaタグ 基礎知識

タグとは?

私たちが見ているホームページは、タグと呼ばれるプログラムによって構成されています。

また、タグはホームページの見た目や意味を構成するためのプログラムであり、具体的にはHTMLという言語で書かれています。

一般的なプログラムと違い「処理」ではなく、ホームページのデザインやリンクなどの表示や意味付けという「情報を付加する」はたらきがあります。

タグなどの制作系の知識を得ると、作業効率化につながるだけでなく、制作チームとのコミュニケーションが円滑に進みやすくなります。

meta情報とは?

ホームページを作成しても、Googleなど検索エンジンに理解されにくいタグ(HTML)であれば、あまり効果は期待できないかもしれません。

そこで重要なのがmeta情報と呼ばれる文書自体の情報を付加することです。

meta情報はページ表面上は見えないのですが、その文書の性質を表す重要な情報です。

meta descriptionタグとは?

meta descriptionタグ(メタ・ディスクリプションタグ)はHTMLタグの一種で、そのページがどんな内容なのかを検索ユーザーに伝える役割を持っています。

meta descriptionタグに設定した文章はYahoo!やGoogleの検索時に以下のように表示されます。この検索結果上の説明文のことをスニペット(snippet)と呼びます。

スクリーンショット 2021-03-03 10.55.10.png

以下のように記述します。

<meta name=”description” content=”明日のために超合金のようなお宝のサイトを見つけるWebサイト100選。合金とは、純粋な金属と複数の元素からなる金属のもの。合金の様に、純粋な僕とたくさんのサイトを掛け合わせて、明日またアップデート。#1日1サイトレビューを ...”>

meta keywordタグとは?

Webページのキーワードを指定できるメタタグで、かつてはSEO対策として高い効果がありました。
しかし、現在ではGoogleからランキング決定要因にはならないと明確に言われており、設定してもSEO効果は望めないでしょう。
わざわざ労力を割いてまで設定する必要はありませんし、設定済みのものを削除する必要もありません。

設定する場合は以下のようにキーワードをカンマ区切りで記述します。

<meta name=”keywords” content=”明日に向かって超合金,Webサイト100選”>

ページタイトルの指定をするには?

Webページのタイトルはtitleタグ(title要素)で指定します。

こちらはmetaタグではありませんが、「キーワード」や「概要」よりも検索結果に大きな影響を与えるため、併せて紹介しておきます。

titleタグは以下のように記述します。

<title>明日に向かって超合金 | Webサイト100選</title>

Webページのタイトルは、Webブラウザのタブ部分に表示されるだけでなく、検索結果の画面にも表示される極めて重要な要素です。

また、ページタイトルに「検索キーワード」が含まれていると、検索結果の上位に表示される可能性が高くなります。

SEOの観点から見ると、titleタグはmetaタグ以上に重要な要素と言えます。

よって、ページタイトルに「ターゲットとするキーワードが含まれているか?」を必ずチェックしておく必要があります。

metaタグで検索エンジンを操作するには?

サイト内に低品質なページがある場合には、Googleはサイト評価を落とします。そのため低品質なページは削除した方がいいのですが、そうしたくない場合は「noindex,nofollow」を使って対策することができます。

なお、低品質なページの定義は、「Webmaster Guidelines – Search Console Help

」でご確認ください。

「noindex,nofollow」を理解するには、検索順位が決まるまでの3つの工程を知る必要があります。

その工程は、以下の通りです。

1.クロール
ページのリンクを追跡する(follow)

2.インデックス
記憶する(index)

3.ランキング
検索順位を決める

つまり、「noindex,nofollow」とは、クロールもインデックスもしないようにして、そのページが検索結果に表示しないようにGoogleに伝えることができます。

低品質のページが評価されなくなったことにより、サイト全体の評価向上に繋がります。

noindexとnofollow設定を同時に行う場合は以下のように記述します。

<meta name=”robots” content=”noindex,nofollow”>

デフォルトの状態だとクロールもインデックスも許可されている状態ですから、許可しない場合にだけそれぞれnoindexやnofollowを記述します。

効果をよく理解せずに使っていたり、サイト制作段階で入れていたnoindexを除去し忘れていたりすると、インデックスさせたいページがインデックスされなくなるなど重大な不具合が起こることがありますので、robotsメタタグは特に注意すべきメタタグです。

ちなみにサイト全体でクロールを制御する場合は、robots.txtファイルを使うほうが良いです。

metaタグで文字エンコードを指定するには?

文字エンコードを指定することで、文字化けを防ぐことができます。

ちなみに文字エンコードとは、コンピュータは数字しか理解できないので、その数字を言葉に変換するものです。

いくつか種類がありますが、例えば下記のようなものがあります。

UTF-8
Shift_JIS
EUC-JP
原則として「UTF-8」を使用することが今はスタンダードで、以下のように記述します。

<meta charset="UTF-8">

metaタグでスマホページの最適化をするには?

「viewport」を設定することで、スマホやタブレットでも最適なページをユーザーに見ていただくことができます。

これはスマホ用ページには必須ですし、PC/スマホで同じページを表示するレスポンシブにも必須です。

近年スマホからのアクセスが増えてきているので、必ず書いておきましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">

まとめ

metaタグについてまとめてきましたが、いかがでしたでしょうか?

知らないmetaタグもあったのではないかと思います。

この機会にmetaタグについて詳しくなりましょう!

参考URL

ferret
DS Magazine
サクラサクラボ
うるチカラ
とりもち

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML / CSS 覚書 Vol.1

1...ついつい忘れがちなインライン要素たち

特徴

  • width(横幅)とheight(高さ)の指定ができず、内包する要素次第。(margin: o auto;で中央寄せ不可)
  • 改行できない。(横に並ぶ。)
  • marginは、上下には効くが左右には効かない。
  • paddingは上下左右に効くが他の要素を無視して被さる。

メンバー

  • <a></a>
  • <br>
  • <img><img/>
  • <input><input/>
  • <label></label>
  • <textarea></textarea>
  • <span></span>
  • <small></small>
  • <strong></strong>

付き合い方

  • displayinline指定、又はinline-block指定する。
  • <img>はブロック要素の「背景画像」で指定する。

2...画像話あれやこれや

画像の形式と適正

  • JPEG : 写真
  • PNG : イラスト、ロゴ、画像文字。透明色の利用。
  • GIF : 極めて短時間のアニメーションを作れるが、今はあまり使われない。
  • SVG : 拡大しても劣化しないベクター形式。AdobeのIllustlatorがこの形式。(ちなみにPhotoshopはBMP:ビットマップ形式)

3... 横中央寄せ

text-align: center;

css
.inline {
   text-align: center;
}

インライン要素の中の要素の横中央寄せ。
中央寄せにしたい要素そのものでなく親要素に指定する。
中の要素がテキストの場合も、あくまで中央にくるのは中のテキスト。(テキストはタグで囲まれていないけどインライン要素。)
省略記法:tac=>text-align: center;

margin: 0 auto;

CSS
.block {
   width: 80%;
   max-width: 1000px;
   margin: 0 auto;
}

ブロック要素そのものの横中央寄せ。
widthの指定必須。(そうでないとブロック要素は横幅いっぱいに広がるので中央寄せに見えない。)
省略記法:m0-a=>margin: 0 auto;

①②をまとめるとこんな感じ。
HTML _ CSS (1).png

display: inline-block;

CSS
.inline-block {
  display: inline-block;
}

インライン要素の横幅を指定せず横中央寄せ。
省略記法:dib=>display: inline-block;

4...縦中央寄せ

heightline-heightを揃える

CSS
.sample {
   height: 60px;
   line-height: 60px
}

ボタンのデザインなどによく使われる。
テキストが複数行になると使えない。
省略記法:h60=>height: 60px; lh60=>line-height: 60px;

②上下のpaddingの数字を揃える

CSS
.sample2 {
   padding: 10px 0;
}

複数行のテキストでも対応可。
①②をまとめるとこんな感じ。
HTML _ CSS (2).png

③複数のインライン要素の縦中央寄せ

CSS
.sample {
   vertical-align: center;
}

縦中央寄せにしたいインライン要素全てに指定する。
ブロック要素には効かない。
省略記法:vam=>vertical-align: middle;
こんな感じ。
HTML _ CSS (3).png

④ブロック要素の縦(横)中央寄せ

CSS
.sample {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate -50% -50%;
}

省略記法:
poa=>position: absolute;
t50%=>top: 50%;
l50%=>left: 50%
trft=>transform: translate( x y )「x」「y」それぞれに「-50%」を入力
こんな感じ。
HTML _ CSS (4).png
position: absolute;で要素の左上が画面中央になるので、それをtransform: translate(xy);で要素そのものの縦横50%分戻す。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML / CSS 覚書 Vol.1 インライン 画像 縦横中央寄せ

1...ついつい忘れがちなインライン要素たち

特徴

  • width(横幅)とheight(高さ)の指定ができず、内包する要素次第。(margin: o auto;で中央寄せ不可)
  • 改行できない。(横に並ぶ。)
  • marginは、上下には効くが左右には効かない。
  • paddingは上下左右に効くが他の要素を無視して被さる。

メンバー

  • <a></a>
  • <br>
  • <img><img/>
  • <input><input/>
  • <label></label>
  • <textarea></textarea>
  • <span></span>
  • <small></small>
  • <strong></strong>

付き合い方

  • displayinline指定、又はinline-block指定する。
  • <img>はブロック要素の「背景画像」で指定する。

2...画像話あれやこれや

画像の形式と適正

  • JPEG : 写真
  • PNG : イラスト、ロゴ、画像文字。透明色の利用。
  • GIF : 極めて短時間のアニメーションを作れるが、今はあまり使われない。
  • SVG : 拡大しても劣化しないベクター形式。AdobeのIllustlatorがこの形式。(ちなみにPhotoshopはBMP:ビットマップ形式)

3... 横中央寄せ

text-align: center;

css
.inline {
   text-align: center;
}

インライン要素の中の要素の横中央寄せ。
中央寄せにしたい要素そのものでなく親要素に指定する。
中の要素がテキストの場合も、あくまで中央にくるのは中のテキスト。(テキストはタグで囲まれていないけどインライン要素。)
省略記法:tac=>text-align: center;

margin: 0 auto;

CSS
.block {
   width: 80%;
   max-width: 1000px;
   margin: 0 auto;
}

ブロック要素そのものの横中央寄せ。
widthの指定必須。(そうでないとブロック要素は横幅いっぱいに広がるので中央寄せに見えない。)
省略記法:m0-a=>margin: 0 auto;

①②をまとめるとこんな感じ。
HTML _ CSS (1).png

display: inline-block;

CSS
.inline-block {
  display: inline-block;
}

インライン要素の横幅を指定せず横中央寄せ。
省略記法:dib=>display: inline-block;

4...縦中央寄せ

heightline-heightを揃える

CSS
.sample {
   height: 60px;
   line-height: 60px
}

ボタンのデザインなどによく使われる。
テキストが複数行になると使えない。
省略記法:h60=>height: 60px; lh60=>line-height: 60px;

②上下のpaddingの数字を揃える

CSS
.sample2 {
   padding: 10px 0;
}

複数行のテキストでも対応可。
①②をまとめるとこんな感じ。
HTML _ CSS (2).png

③複数のインライン要素の縦中央寄せ

CSS
.sample {
   vertical-align: center;
}

縦中央寄せにしたいインライン要素全てに指定する。
ブロック要素には効かない。
省略記法:vam=>vertical-align: middle;
こんな感じ。
HTML _ CSS (3).png

5...ブロック要素の縦横中央寄せ

position: absolute;transform: translateXY

CSS
.sample {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate -50% -50%;
}

省略記法:
poa=>position: absolute;
t50%=>top: 50%;
l50%=>left: 50%
trft=>transform: translate( x y )「x」「y」それぞれに「-50%」を入力
こんな感じ。
HTML _ CSS (4).png
position: absolute;で要素の左上が画面中央になるので、それをtransform: translate(xy);で要素そのものの縦横50%分戻す。

display: flex;

CSS
.sample {
   display: flex;
   align-items: center;
   justify-content: center;
}

省略記法:
df=>display: flex;
aic=>align-items: center;
jcc=>`justify-content: center;
こんな感じ
HTML _ CSS (5).png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

サイドバーのカレント表示で詰まったことと解決策

(備忘録なので少々煩雑です。落ち着いてきたら整理したい)

困った

hogehoge.hbs
<ul class="side-menu">
    <!-- ここからカレント表示したいのに・・・ --->
    <li id="side-menu"><a href="#gohan">{{oishiina}}</a></li>

        ...

    <li id="side-menu"><a href="#panmo">{{daisuki}}</a></li>
    <li id="side-menu"><a href="#pasta">{{mogumogu}}</a>
        <ul class="side-menu-child">
            {{#each this.shushoku as | koubutu | }}
            <li id='side-menu-child'>
                <!--ここ以降だけカレント表示で色がつく.なんで?? -->
                <a href='#{{koubutu.link}}'>{{koubutu.namae}}</a>
            </li>
            {{/each}}
        </ul>
    </li>
</ul>

<script>
    function changeBackColor(secNum) {
    if (secNum != current) {
        current = secNum;
        let secNum2 = secNum + 1;
        $('#side-menu li').removeClass('colorOn');
        $('#side-menu li:nth-child(' + secNum2 + ')').addClass('colorOn');
    }
</script>

原因

つまり上の書き方だと、「side-menuというidがついたタグ(ここではli)の子要素としてあるliタグ(id='side-menu-child'であるli)」にcolorOnクラスが追加されていたのです。

対応策

以下のように実装を変更すると、うまくサイドバーの最初からカレント表示されました。

newHogehoge.hbs
<ul class="side-menu">
    <li id="side-menu"><a href="#gohan">{{oishiina}}</a></li>

        ...

    <li id="side-menu"><a href="#panmo">{{daisuki}}</a></li>
    <li id="side-menu"><a href="#pasta">{{mogumogu}}</a>
        <ul class="side-menu-child">
            {{#each this.shushoku as | koubutu | }}
            <li id='side-menu-child'>
                <a href='#{{koubutu.link}}'>{{koubutu.namae}}</a>   
            </li>
            {{/each}}
        </ul>
    </li>
</ul>

<script>
    function changeBackColor(secNum) {
    if (secNum != current) {
        current = secNum;
        let secNum2 = secNum + 1;
        if (secNum2 <= 5) {
            $('ul #side-menu-child').removeClass('active');
            $('ul #side-menu').removeClass('active');
            $('#side-menu:nth-child(' + secNum2 + ')').addClass('active');
        } else {
            let secNum3 = secNum2 - 5;

            $('ul #side-menu').removeClass('active');
            $('ul #side-menu-child').removeClass('active');
            $('#side-menu-child:nth-child(' + secNum3 + ')').addClass('active');
        }
    }
</script>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryのクラスセレクタは約8~11倍、getElementByIdより遅いことがあるぞ ~ DOMを10,000回取得しただけ ~

DOM取得にどれくらい時間がかかるのか、数値として知りたかったので調べた。

  • 環境
    • MacOS Mojave(2019) Chrome最新
    • ベタ書きのHTMLファイルを用意して、JSもそこに書いちゃう。
    • jQueryは3系
    • VSCode拡張の LiveServer経由で開く。
  • やること
    • DOMを10,000回取得
  • やるやつ
    • Document.getElementById() (<= 一番速そう)
    • Document.getElementsByClassName()
    • jQuery IDセレクタ これ => (“#id”)
    • jQuery IDセレクタ これ => (“.class”) (<= 一番遅そう?) 

1. 計測結果

以下みたいな感じになりました。

処理 速度 倍率
getElementById() 1.372 ms x1
getElementsByClassName() 1.374 ms x1.002
jQuery IDセレクタ() 5.203 ms x3.792
jQuery クラスセレクタ 12.028 ms x8.767

何回かやったら、だいたい x8~11。複数回やって正確な平均欲しいけれど今日はやらない。意外にもbyClassNameの方がbyIdと同じくらいの速度で嬉しい。


以上です。
以下は余談です。

2. 計測手順

2.1. HTMLを用意

    <!-- jQueryも読んでおく -->
    <div id="hello-id" class="hello-class">hello</div>

2.2. 計測するためのコードを用意

      const DisplayProcessTime = (object) => {
        const N = 10000;
        console.time(object.name);
        for (let i = 0; i < N; i++) {
          object.func();
        }
        console.timeEnd(object.name);
      };

2.3. 計測される側の処理を用意

なんとなく配列でまとめた。

      const domGetters = [
        {
          name: "Document.getElementById()",
          func: () => document.getElementById("hello"),
        },
        {
          name: "Document.getElementsByClassName",
          func: () => document.getElementsByClassName("hello"),
        },
        {
          name: "jQuery_ID",
          func: () => $("#hello"),
        },
        {
          name: "jQuery_class",
          func: () => $(".hello"),
        },
      ];

2.4. 計測する

      for(let i = 0; i < domGetters.length; i++) {
          DisplayProcessTime(domGetters[i]);
      }

2.5. ブラウザコンソールで確認(おわり)

スクリーンショット 2021-03-04 0.33.41.png

処理 速度 順位
getElementById() 1.3720703125 ms 1
getElementsByClassName() 1.3740234375 ms 2
jQuery IDセレクタ() 5.203857421875 ms 3
jQuery クラスセレクタ 12.028076171875 ms 4
  • Chromeしか計測してない
  • 何回かやったけれど、だいたいこれくらいの感じ
  • これもさらにループして平均出したいけど、今日はやらない

3. おわりに

DOM取得にどれくらい時間がかかるのか、数値として知りたかったので調べた。
全部の環境でそうとは限らないから、本当のところはよくわからない。

書き方や使いどころを間違えないことは大事。

getElement~ って書くのがめんどい時は、ヘルパー関数的なのをつくればよいかも。

計測にかかった時間よりもこの記事を書く時間の方が多くかかった。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryのクラスセレクタは約8~11倍、getElementByIdより遅いことがあるぞ (DOMを10,000回取得しただけ)

DOM取得にどれくらい時間がかかるのか、数値として知りたかったので調べた。

  • 環境
    • MacOS Mojave(2019) Chrome最新
    • ベタ書きのHTMLファイルを用意して、JSもそこに書いちゃう。
    • jQueryは3系
    • VSCode拡張の LiveServer経由で開く。
  • やること
    • DOMを10,000回取得
  • やるやつ
    • Document.getElementById() (<= 一番速そう)
    • Document.getElementsByClassName()
    • jQuery IDセレクタ これ => (“#id”)
    • jQuery IDセレクタ これ => (“.class”) (<= 一番遅そう?) 

1.1. 計測結果

以下みたいな感じになりました。

処理 速度 倍率
getElementById() 1.372 ms x1
getElementsByClassName() 1.374 ms x1.002
jQuery IDセレクタ 5.203 ms x3.792
jQuery クラスセレクタ 12.028 ms x8.767

何回かやったら、だいたい x8~11。複数回やって正確な平均欲しいけれど今日はやらない。意外にもbyClassNameの方がbyIdと同じくらいの速度で嬉しい。

1.2. 計測結果(追記: 2021.03.04)

document.querySelector()メソッドと、Document.querySelectorAll()メソッドの計測が抜けていました(コメントくださった方、ありがとうございます)。そのため、この2つを加えて再計測しました。

処理 速度 倍率 順位(1 ~ 8)
getElementById() 1.297 ms x1.000 1
getElementsByClassName() 1.292 ms x0.996 1
jQuery IDセレクタ 5.075 ms x3.913 7
jQuery クラスセレクタ 11.831 ms x9.122 8
querySelector()_(ID取得) 新規 2.250 ms x1.735 4
querySelector()_(クラス取得) 新規 1.500 ms x1.157 3
querySelectorAll()_(ID取得) 新規 3.929 ms x3.030 6
querySelectorAll()_(クラス取得) 新規 3.740 ms x2.883 5

querySelectorではIDとクラスの両方を取得できるので、両方の結果を書いています。

  • getElementById と getElementsByClassName は同じくらいの速度。今回のように、byClassNameの方が早いことも時々ある。
  • querySelector()メソッドは、クラス指定で取得した方が早い
  • querySelectorAll() においても、クラス指定の方が早い。マッチしたものを全て探すので、当然にquerySelectorより遅い。

1.3. 順番整理(追記: 2021.03.04)

実行にかかった時間の早い順に並べます。

getElementById() <=
getElementsByClassName() <
querySelector()_(クラス取得) <
querySelector()(ID取得) <
querySelectorAll()
(クラス取得) <
querySelectorAll()_(ID取得) <
jQuery IDセレクタ <
jQuery クラスセレクタ


以上です。
以下は余談です。

2. 計測手順

2.1. HTMLを用意

    <!-- jQueryも読んでおく -->
    <div id="hello-id" class="hello-class">hello</div>

2.2. 計測するためのコードを用意

      const DisplayProcessTime = (object) => {
        const N = 10000;
        console.time(object.name);
        for (let i = 0; i < N; i++) {
          object.func();
        }
        console.timeEnd(object.name);
      };

2.3. 計測される側の処理を用意

なんとなく配列でまとめた。

      const domGetters = [
        {
          name: "Document.getElementById()",
          func: () => document.getElementById("hello"),
        },
        {
          name: "Document.getElementsByClassName",
          func: () => document.getElementsByClassName("hello"),
        },
        {
          name: "jQuery_ID",
          func: () => $("#hello"),
        },
        {
          name: "jQuery_class",
          func: () => $(".hello"),
        },
      ];

2.4. 計測する

      for(let i = 0; i < domGetters.length; i++) {
          DisplayProcessTime(domGetters[i]);
      }

2.5. ブラウザコンソールで確認(おわり)

スクリーンショット 2021-03-04 0.33.41.png

処理 速度 順位
getElementById() 1.3720703125 ms 1
getElementsByClassName() 1.3740234375 ms 2
jQuery IDセレクタ() 5.203857421875 ms 3
jQuery クラスセレクタ 12.028076171875 ms 4
  • Chromeしか計測してない
  • 何回かやったけれど、だいたいこれくらいの感じ
  • これもさらにループして平均出したいけど、今日はやらない

2.6. 再計測 => ブラウザコンソールで確認(追記: 2021.03.04)

再計測を行った時の結果を残しておきます。

スクリーンショット 2021-03-04 21.11.03.png

処理 速度 順位(1 ~ 8)
getElementById() 1.297119140625 ms 1
getElementsByClassName() 1.2919921875 ms 1
jQuery IDセレクタ() 5.074951171875 ms 7
jQuery クラスセレクタ 11.8310546875 ms 8
querySelector()(ID取得) 2.249755859375 ms 4
querySelector()(クラス取得) 1.4990234375 ms 3
querySelectorAll()(ID取得) 3.92919921875 ms 6
querySelectorAll()(クラス取得) 3.74072265625 ms 5

3. おわりに

DOM取得にどれくらい時間がかかるのか、数値として知りたかったので調べた。
全部の環境でそうとは限らないから、本当のところはよくわからない。

書き方や使いどころを間違えないことは大事。

getElement~ って書くのがめんどい時は、ヘルパー関数的なのをつくればよいかも。

計測にかかった時間よりもこの記事を書く時間の方が多くかかった。

querySelectorを使用した場合の速度は、クラス指定の方がID指定より早かった点が気になる。

返り値の型の使い易さだったり、他のコード群との親和性だったりと、実際のプロダクトでは速度以外に考えるべきことは無数にある。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

漢字熟語陣取り合戦に練習向け機能を実装した

前回までのあらすじ

漢字熟語陣取り合戦というものを作りました。漢字を集めてきてバラバラに表示し、そこから熟語を見つけて取り合うゲームです。ルール、成果物はこちらをご覧ください。
今回実装した部分はこちら。

取ってきた漢字が難しすぎた場合、いつまでも終わらないという問題がありました。[阿呆陀羅経]や[百万陀羅]のような一般的でない語はいつまでたっても思いつかないという懸念です。

いっそ選出した熟語を表示してしまうことにしました。これなら漢字数が多くても難しくても計30手くらいで決着をつけることが可能です。
先攻が長い単語を獲得できるので、普通にやれば先攻の勝ちです。しかし、表示されていない熟語を思いつければ相手の点数を奪ったりできます。
これなら、難しすぎて「漢字の山から熟語を見つける」というゲームになっていた状況から、「熟語というブロックを意識しながら、意外な熟語で盤面をひっくり返す」という本来狙っていた面白さを実現できそうです。公平さを犠牲にして面白さを取ります。

ちなみにこの選出方法で選んだ熟語を表示するだけなので、漢字群から作れるすべての熟語を網羅するわけではありません。

どう実装するか

選択した熟語はjukugosという配列に入れてあります。それを表示するだけなので、
<div onclick="this.innerText=jukugos">クリックして表示</div>
という要素を追加することにしました。htmlにスクリプトを直書きすること、onclick要素を安易に使うこと、あまつさえそれがグローバルな変数を参照していることなど良くないことをたくさんしています。将来的なバグの温床になりえます。保守運用を続けていくつもりなら別のスクリプトファイルに書くべきでしょう。
また、現在漢字を表示しているエリアの右側に並べたいので、下記のように書きました。

漢字、熟語表示部分
  <div id="main-area">
    <div id="fields">
      Aの獲得文字<br/>
      <div id="a-list" class="field"></div><br/>
      手付かず<br/>
      <div id="free-list" class="field"></div><br/>
      Bの獲得文字<br/>
      <div id="b-list" class="field"></div><br/>
    </div>
    <div id="selected-jukugo" onclick="this.innerText=jukugos">クリックして熟語を表示する</div>
  </div>

スタイルシートは

要素を横並びにする
div#main-area{
  display: flex;
}

div#selected-jukugo{
  width:40%;
}

div#fields{
  width:40%;
}
div.field{
  /* 漢字が横に広がりすぎないように */
  width:60%;
}

のようにして、横にならべました。また、漢字群が横に広がっていると遊びにくいため、縮めています。デザインのセンスがないので横幅の数字を適当に変えて一番よさそうだった比率にしました。センスがない以上、スタイリングの知識や定石を学ぶべきかもしれません。

ともあれ、たった数十行で熟語を表示することができました。

実装した結果

こちら。
image.png

実装し、実際に熟語を表示してみました。「映画倫理規定管理委員会」やら「司法試験管理委員会」やらイカつい熟語が並んでますね。
これは答えが良すぎる例ですね。「(小さい)熟語のブロックを意識しながら、意外な熟語で盤面をひっくり返す」という遊びにするつもりが、「意外な熟語」の方を表示してしまっています。
「映画」「倫理」「管理委員会」が表示されていて「映画倫理規定管理委員会」を導き出して盤面をひっくり返したら戦略性があっていいんですが、ネタバレしてしまっています。

このネタバレをどう回避しましょう。長すぎる単語は表示しない?分割できる熟語は分割する?

要件の方を変える

どう対策してもネタバレになってしまう懸念がぬぐえません。なので、私が実装したのはゲームに戦略性を持たせる機能ではなく、熟語を見つける練習のための機能だったということにしました。手前味噌ですがなかなかの機転です。でもコイツに仕事頼みたくないですね。絶対言われたもの作ってこないタイプです。

まず、漢字群を見ます。なるべく多くの熟語を見つけます。で、クリックして熟語を表示させます。すぐに答え合わせができるので効率よく練習できます。

慣れてきたら、漢字群から「奪う」パターンを考えます。例えば「映画」「倫理」「管理委員会」を見つけたら、相手が「映画」や「倫理」を取ってきたら「映画倫理規定管理委員会」で奪えるというパターンを想定するということです。
ここで、答えを表示し、「司法試験管理委員会」などを見つけて、「管理委員会」は奪われがちだから後半に言ったやつが5点得するな、などと反省することができます。

あるいは、一向に消費できない「二」や「三」を、答えを見て納得することもできます。今回の例だとベースとして選んだ熟語がまずかったのか「二三千」など熟語とは言い切れないものが載っています。これは熟語辞典じゃないものから取ってきているせいで、加工者の責任です。いかんせん自動生成なので駄作も生み出してしまいます。そのケースに気が付けるので、さっさと次の問題に移ることができ、やはり練習効率は上がります。

いかがでしたか

熟語を表示してしまうというアイディアはいい線いってたと思います。生成した問題によってはただのチートツールになってしまいますが。副産物として練習ツールができたので良かったです。
競技を面白くするためか、競技について考察を深めるためかは分からないが、その問題を構成している熟語を表示することが必要だったわけです。

「二三千」のような熟語とは言えない単語が辞書に入っているという失態があきらかになってしまいました。しかし、東大王の番組でも「格闘家」がダメだったり、我々の考える熟語と熟語辞典に載っている熟語には乖離があるようです(ちなみに「格闘技」はあります)。「最高経営責任者」はいるけど「経営責任者」っていないんだなぁとか、確かな知識が要求されるゲームみたいですね。なので不問にします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む