投稿日：2020-12-04T23:44:34+09:00

htmlどれがタグでどれが要素か、各名称

htmlのタグとか要素、cssのプロパティー、プロパティーの値とか何が何かよくわからなくごちゃごちゃになると思うのでまとめました。

要素
//要素
<head>
　<meta>
　<title>
　<link>
　<style>
</head>

<body>
 <footer>
 <header>
 <main> 
　<nav>
　<section>
タグ

href
class

など要素の次に書くのをタグという
<a href="`"></a>
<div class="#"></div>
フッタータグは
<footer>
 <small>
 @ 2020 example.com
</small>
セレクター、プロパティ、規則セット

セレクター
プロパティー：　プロパティー値；

div {
coloer: red;
font-size: 80px;
右左２つセットで宣言
3つセットで規則セット
div {
 color: red;
 font-size: 80px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T23:15:53+09:00

railsで画像をファイルに配置して、表示させ、装飾させる方法

はじめに

　アプリケーションのUIを整えるために画像を使った。配置する場所や装飾の方法を記録しておく。

画像の表示

配置

app/assets/imagesに配置した。

表示させる

　表示は、HTMLに
html.erb
<%= image_tag "ファイル名.png", class:"chat-image" %>
サイズの変更

　サイズの変更はCSSにwidthとheightで装飾する。
.chat-image {
  width: 50px;
  opacity: 0.5;
}
opacityによって透明度を変えることもできる。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T22:12:38+09:00

スマホ実機/iphoneで、標準セレクトボックスでの選択時に文字が表示されない問題への対処

標準のセレクトボックス（selectタグ）のoption内の文字が表示されないのはなぜか

例えば、以下のようなコードでiphone実機で確認した際に実態はあるものの、文字が表示されない問題が発生しました。

pugでvue.jsでの記載を例にしていきます。
select(v-model="hoge")
  option(v-for="n of 5" :key="n" :value="n - 1" :label="`${n - 1}名`")
PCでは表示されるようだが、以下コードのようにoption内にもラベルにしたい文字が記載されてないと表示されない模様です。
<otion></option>
対処方法

ズバリ、option内にも忘れずにラベルにしたい文言を出力しましょう。
select(v-model="hoge")
  option(v-for="n of 5" :key="n" :value="n - 1" :label="`${n - 1}名`")
表示されました！
めでたしめでたし。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T20:49:41+09:00

flexboxで横並びにしたコンテンツの中の最後の要素（ボタン等）は下揃えにする方法

どうも7noteです。横並びコンテンツの各要素の最後だけ下揃えにする方法について

先日ツイッターで見つけた画期的なアイデア・スタイルです。正直ちょっと感動しました。

Before

After

ガタガタになってしまうところをきれいに並べることができます！

ソース
index.html
<ul>
  <li>
    <figure class="thumb">
      <img src="sample.png" alt="画像">
    </figure>
    <p class="text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <div class="btn">ボタン</div>
  </li>
  <li>
    <figure class="thumb">
      <img src="sample.png" alt="画像">
    </figure>
    <p class="text">テキストが入ります。</p>
    <div class="btn">ボタン</div>
  </li>
  <li>
    <figure class="thumb">
      <img src="sample.png" alt="画像">
    </figure>
    <p class="text">テキストが入ります。</p>
    <div class="btn">ボタン</div>
  </li>
</ul>
style.css
ul {
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul li {
  width: 200px;           /* 各コンテンツの横幅 */
  border: 1px solid #000; /* 各コンテンツのborder */
  padding: 10px;          /* 余白の指定 */
  display: flex;          /* 【重要】フレックスボックスにする */
  flex-direction: column; /* 【重要】縦並びにする */
}

ul li .text {
  background: #ccc;       /* 背景色にグレーを指定 */
  margin: 0 0 10px;       /* 下に10pxの余白 */
  padding: 5px;           /* 余白5pxを指定 */
}

ul li .btn {
  border: 1px solid #000; /* borderを指定 */
  border-radius: 20px;    /* 角丸にする */
  text-align: center;     /* 文字を中央寄せ */
  margin-top: auto;       /* 【重要】上に取れるだけの余白 */
}
解説

まず各要素をフレックスボックスにして、flex-direction: column;を指定し、liの中の要素を縦並びにする。
そして、下揃えにしたい最後の要素に対して、margin-top: auto;を指定することで、最大余白を自動で取得するので、それ以外の要素の高さに依存せずに下揃えにすることが可能になります。

まとめ

CSSの様々な組み合わせで、まだまだ知らない組み方が出るのでコーディングは本当に奥が深いし面白いなと思います。
日々精進あるのみです。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T15:44:21+09:00

スマホ開発しかしてなかった初心者が良いなと思った<dialog>

はじめに

最近少し業務でも使うかもしれないと思い、HTML,CSS,JavaScriptを勉強していました。
自分は今までアプリ開発しか基本したことがなく、むか〜し1年目の頃にJavaの研修を受けて、
JavaScriptもよく分からないまま,「Angular」FWを使って少しだけ改修作業をやったレベルでしたので、
サンプルアプリを作りながら、まずベタ書きでWeb開発を１から勉強したのですが、その時にスマホ開発でも標準UIでもあったら楽だな〜と思ったので（知らないだけかもしれない）息抜きついでに書いていきます。

<dialog>タグ

自分はMDNのドキュメントを使ってインプットしていったんですが、ダイアログを実装する時に見つけたのがこの<dialog>タグ。
いや、普段フロントエンジニアで活躍されている方、FWを使ってる方からすると全然使わないのかもしれないんですが、
自分的には結構楽で良いなーって思いました。

何が良いと思った？

作り込めば大変なのかもしれないけど、わかりやすく簡単なところ。

そもそもHTMLはマークアップ言語で初心者でも簡単だというような内容の記事が多く、こちらのダイアログ実装もシンプルなものであればホント簡単でした。

(別にフロントの開発が簡単なんて思ってはいないですし、自由で歴史がある分何通りもやり方があり、今回は参考書を買ったわけではなかったのでモダンな実装の仕方、ベストな回答が探しにくいという難しさがありました)。

最新の2020年とかの記事がなかったのでそこまで使用頻度が高くないのかもしれないのですが、
HTML5.2から登場したようですね。
hoge.html
<dialog>
  <h1>ネイティブのダイアログ ボックス</h1>
</dialog>
hoge.js
const modal = document.querySelector('dialog');

// モーダルを表示する (open属性を与える)
modal.showModal();

// モーダルを隠す (open属性を削除する)
modal.close();
はい！

これで終わりです。

もちろんの中にテキストボックスだったりボタンも置いて簡単にカスタマイズできます。

ちなみに自分とかだとこんな感じ

調べながらやりつつも、1hかからないくらいで実装自体はできました。
(閉じるボタンの位置変だな...)

スマホでダイアログ実装だとアラートレベルなら良いんです。(iOSにもUIAlertというものがあります)

ただ、なかなかエラー表示くらいなら良いものの、大体デザイナーさんの用意したUIデザインに沿ったダイアログを実装することが多くい気がします。

自作でカスタムView作るのめんどいし、ライブラリ使うのもデザイナーさんからの要望にあったものを探すのも意外と大変だしと、なかなか前向きに自分はなれないんですが標準で

まとめ

誰に向けてというわけではないんですが、他の分野の勉強するのも楽しいな〜と思ったのでまとめました。
あとは、いやいやこんなの使わないよとか自分のためにもご指摘があったら受けたいのもあり。

うまくまとまらないですが、カスタマイズしやすい標準ダイアログこい！

参考

HTML 5.2で新しく登場した要素で、ダイアログボックスを実装する方法と注意点

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T15:08:22+09:00

【Shopify】liquidを編集してコンタクトフォームをカスタマイズする方法

概要

Shopifyでは、コンタクトフォームをデフォルト機能で簡単に実装することができます。しかし、デフォルト機能で実装することができるコンタクトフォームは、名前・電話番号・メールアドレス・メッセージ必要最低限の情報を入力する欄しかありません。

そこで、今回はliquidファイルを編集して、コンタクトフォームを編集する方法を解説します。

クイックスタート

今回は、すでに作成済みのデモサイトを用いて解説します。使用テーマは「Debut」です。使用しているテーマによってコードは若干異なります。基本的な構成は同じなので、流用は可能です。

なお、コンタクトフォームの実装方法については、省略します。詳しい実装方法が知りたい方は、こちらの記事をご覧ください。

【Shopifyマスターへの道】#11 コンタクトフォームを作成しよう

Shopifyマスターへの道は、Shopifyの構築を網羅的に解説しているシリーズ連載になリます。興味があれば、そちらも覗いてみてください。

編集するliquidファイルは、page.contact.liquidです。

ここにコードを追加することで、コンタクトフォームに入力欄を追加していきます。

page.contact.liquidの構造について

まず、page.contact.liquidの構造について理解します。まずコードの全体像をみます。
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
    </div>
  </div>
</div>
コードを読んでみると、page.contact.liquidは主に３つのブロックからなっています。

タイトルを表示させるブロック

コンテンツの内容を表示させるブロック

コンタクトフォームを表示させるブロック

それぞれのコードをみましょう。

タイトルを表示させるブロック

次のコードで、ページを作成する際に入力したタイトルを表示させています。
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
<h1>タグのなかで{{ page.title }}を呼び出しています。

コンテンツの内容を表示させるブロック

次のコードで、ページを作成した際に入力したコンテンツの内容を表示しています。
      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}
{% if page.content.size > 0 %}でコンテンツの内容が入力されているか判定しています。trueの場合、{{ page.content }}コンテンツの内容を呼び出して表示しています。

コンタクトフォームを表示させるブロック

次のコードで、コンタクトフォームの表示を実装しています。
      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
{% form 'contact', id: formId %}から{% endform %}までが。ストアに送信される部分になります。
この部分には、4つの<input>タグがあり、それぞれ名前・Eメール・電話番号・メッセージを受け取ることができます。

つまり、この{% form 'contact', id: formId %}から{% endform %}の間に、<input>タグなどを増やすことで、コンタクトフォームをカスタマイズすることができます。

名前のフリガナの入力欄を作成する

シンプルな入力欄を増やします。フリガナを入力するための<input>タグを書きます。<input>タグの書き方は、HTMLの知識になってくるので、ここでの詳しい説明は割愛します。

名前の横に配置したいので、名前の<div>タグとEメールの<div>タグの間に記述します。<div class="grid__item medium-up--one-half">という<div>タグで囲うことで、半分のカラム幅の入力欄を実装できます。

以下のコードを追記しましょう。
<div class="grid__item medium-up--one-half">
  <label for="{{ formId}}-furigana">フリガナ</label>
  <input type="text" id="{{ formId}}-furigana" name="contact[フリガナ]" >
</div>
このように追記できたら、一旦コードを保存しプレビュー画面で確認します。

このように実装できました。Eメールの隣が空いてしまっているので、そこに新たな入力欄を追加します。

性別の選択欄を作成する

<select>タグを用いて、性別の選択欄を作成します。<select>タグを用いると、ドロップダウン式の選択欄を作成することができます。<select>タグの中に<option>タグで選択肢を指定していきます。

以下のコードをEメールの入力欄の後ろに記述してください。
<div class="grid__item medium-up--one-half">
  <label for="{{ formId}}-sex" >性別</label>
  <select id="{{ formId}}-sex" name="contact[性別]">
    <option>--選択してください--</option>
    <option>男性</option>
    <option>女性</option>
    <option>その他</option>
  </select>
</div>
追記したらコードを保存し、プレビュー画面で確認しましょう。

電話番号の入力欄を削除する

元からある入力欄を削除してみましょう。例として電話番号の入力欄を削除してみます。

以下のコードを削除してください。
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">       　　
削除したら保存し、プレビュー画面で確認します。

問題なく削除することができました。

チェックボックスを作成する

次に、<input>タグのtype="checbox"属性を使って、チェックボックスを実装します。

以下のコードを追記します。
<p>お問い合わせ内容を選択してください（複数選択可）</p>
<label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="お仕事のご依頼">お仕事のご依頼</label>
label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="無料相談">無料相談</label>
<label　for="{{ formId}}-inquirydetails"><input type="checkbox" id="{{ formId }}-inquirydetails" name="contact[お問い合わせ内容]" value="その他">その他</label><br>
コードを保存して、確認しましょう。

このようにチェックボックスを実装することができました。

以上で、フォームの編集は終了です。

送信できることを確認する

送信フォームが正常に送信することができるか、確認します。作成したコンタクトフォームで、必要事項を入力し送信します。

以下のようなメッセージが表示されれば送信は、正常に完了しています。

実際に届いたメールはこのようになっています。

最後まで読んでいただきありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-04T00:12:04+09:00

最近やったことのメモ（MVVM, asyncとdefer）

MVVM

Webサービスの設計思想（ソフトウェアアーキテクチャ）
MはModel、VはView、VMはViewModelのこと

View -> View Model -> Model の順

役割でいうと、
表示　→　表示するために値の取得と加工　→　値　　こんな感じ？

View Modelが値と表示の間を取り持ってくれます。超優秀ですね☆

asyncとdefer

JavaScriptファイルの非同期での読み込み
<script async src="/abc.js"></script> <script defer src="/xyz.js"></script>

asyncとdeferどちらもドキュメントのパース中にスクリプトをダウンロード実行。

async・・・パースが完了前に実行。asyncスクリプトの実行は必ずしも順番通りではない。
defer・・・パース完了後に実行。deferスクリプトの実行は順番に行われる。

スクリプトが独立　→　async
スクリプトが依存　→　defer

今日の名言

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
（付け足すものがなくなったときでなく、取り除くものがなくなったとき、それが完璧になるということだ）
-アントワーヌ・ド・サン＝テグジュペリ（作家）

　 Tweet
Qiitaで続きを読む

20201204のHTMLに関する記事は7件です。

htmlどれがタグでどれが要素か、各名称

railsで画像をファイルに配置して、表示させ、装飾させる方法

はじめに

画像の表示

配置

表示させる

サイズの変更

スマホ実機/iphoneで、標準セレクトボックスでの選択時に文字が表示されない問題への対処

標準のセレクトボックス（selectタグ）のoption内の文字が表示されないのはなぜか

対処方法

flexboxで横並びにしたコンテンツの中の最後の要素（ボタン等）は下揃えにする方法

どうも7noteです。横並びコンテンツの各要素の最後だけ下揃えにする方法について

ソース

解説

まとめ

おそまつ！

スマホ開発しかしてなかった初心者が良いなと思った<dialog>

はじめに

<dialog>タグ

何が良いと思った？

はい！

まとめ

参考

【Shopify】liquidを編集してコンタクトフォームをカスタマイズする方法

概要

クイックスタート

page.contact.liquidの構造について

タイトルを表示させるブロック

コンテンツの内容を表示させるブロック

コンタクトフォームを表示させるブロック

名前のフリガナの入力欄を作成する

性別の選択欄を作成する

電話番号の入力欄を削除する

チェックボックスを作成する

送信できることを確認する

最近やったことのメモ（MVVM, asyncとdefer）

MVVM

asyncとdefer

今日の名言

日付別

タグ一覧

`<dialog>`タグ

`page.contact.liquid`の構造について