20190403のHTMLに関する記事は13件です。

tableをレスポンシブにするときにはみ出したり中央に寄らなかったりラジバンダリ

tableのレスポンシブ対応で困ったこと

そもそもtableは何だか苦手なのであるが、、
スマホでみるときには2列のテーブルではなく1列のデザインにしようと、display: block;を使ってやっていたのはいいのだが、下記3点に悩まされた。

①横幅MAXにしても改行しないをレスポンシブで打ち消せていなかった

@mediaの時にきちんと打ち消せていなかったので、下記のように対応した。

white-space: nowrap; /* 横幅のMAXに達しても改行しない */
overflow: hidden; /* ハミ出した部分を隠す */
text-overflow: ellipsis; /* 「…」と省略 */

@media
white-space: normal; /* 横幅のMAXに達しても改行する */
overflow: visible; /* ハミ出した部分を隠さない */
text-overflow: clip; /* 「…」と省略しない */

②tdの横paddingをつけていたがためにスマホ表示で横に変な空白ができた

横paddingは0にして、widthを90%くらいにして左右は margin: auto; で調整した。変な空白ができた状態はこんな感じ。
image.png

参考

width:100%なのにはみ出す理由と回避策。

③tableに対してborder-collapse: collapse;をしておらず、trにborderが出なかった

前も同じことがあったのに忘れてて、無駄な時間を過ごした。すぐググればよかった。

参考

trにborder-bottomを引く!

終わりに

日々新しいことを学び、そして前に学んだことを忘れ、でも時代はどんどん進んでいて、心配になりますが、焦らず地道にやっていきます。(今日はgitの勉強までできるだろうか。。)

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

placeholderに付いてるスタイルを見てみたい!【Shadow DOM】

placeholder プロパティ

placeholder 使っていますか?
placeholder は input 要素のフォームの中等にテキストを入れておけるHTMLの属性ですね。
↓こんな感じ。

HTML
<input placeholder="キーワード入れて検索">

このテキストにスタイルを付けるときは以下のように擬似要素を使ってスタイルを付けてやります。

CSS
input::placeholder {
  color: red;
  font-size: 0.5rem;
  font-style: italic;
}

スタイルを確認してみる

このスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると…

>>>ない<<<
そう…ないのです。付いているはずのスタイルが見当たらない。
これは placeholder が「Shadow DOM」というもので構成されているからです。

Shadow DOM を見えるようにする

Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。

1. 右上の「⋮」から「Settings」をクリック

2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック!

Shadow DOM を見てみる

もう一度コードを見てみましょう。
image.png
なんか見たことないDOMがあるーーー!!
内側のdivにスタイル付いてるーー!!!

こんな感じで見ることができます。
placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

他にも今まで見えていなかったものが見えるかも…?

参考リンク

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

placeholderに付いてるスタイルを見てみたい!

placeholder プロパティ

placeholder 使っていますか?
placeholder は input 要素のフォームの中等にテキストを入れておけるHTMLの属性ですね。
↓こんな感じ。

HTML
<input placeholder="キーワード入れて検索">

このテキストにスタイルを付けるときは以下のように擬似要素を使ってスタイルを付けてやります。

CSS
input::placeholder {
  color: red;
  font-size: 0.5rem;
  font-style: italic;
}

スタイルを確認してみる

このスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると…

>>>ない<<<
そう…ないのです。付いているはずのスタイルが見当たらない。
これは placeholder が「Shadow DOM」というDOMで実装されているからです。

Shadow DOM を見えるようにする

Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。

1. 右上の「⋮」から「Settings」をクリック

2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック!

Shadow DOM を見てみる

さあ、もう一度コードを見てみましょう。
image.png
なんか見たことないDOMがあるーーー!!
内側のdivにスタイル付いてるーー!!!

こんな感じで見ることができます。
placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

他にも今まで見えていなかったものが見えるかも…?

参考リンク

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

Haml 導入

hamlの導入方法

まず必要なgemを追加

gem 'haml-rails'

gem 'erb2haml'

そしてしっかり

bundle installを忘れずに!!!

.erb を hamlに変える方法

$ rake haml:replace_erbs

このコマンドで表記を全てhamlに変えてくれます

是非参考にしてみてください
またこの投稿に関してわからないことやここおかしいなど意見いただけると
とても嬉しいです

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

Gmailで「AMP for Email」をテストしてみた

「AMP for Email」とは、AMPのテクノロジーを利用し、動的なコンテンツの配信をメールで可能にするものです。

今回、AMPを使った動的メールをとりあえずテストして、実際にできることと、動作を試しに確認してみました。

AMP for Email Playground」を使用すると、気軽にAMP Eメールの下書きができたり、ライブプレビューの確認や、送信テストのため、実際に自分のGmailアカウントへ作成したAMP Eメールの送信を行うことができます。

テストするにはGmailの設定変更が必要

Gmailを開き、[設定]→[全般]→[動的メール]に移動して、[動的メールを有効にする]にチェックをいれます。

スクリーンショット_2019-04-03_17_06_04.jpg

これにより、テスト目的で動的なEメールを送信できるEメールアドレスをホワイトリストに登録できるダイアログが開きます。

ホワイトリストに入力したアドレスからGmailアカウントに送信されたAMPが適用されたメールは、アカウントがGoogleに登録されていなくても表示されます。

以上の設定で、自分のアカウントに動的メールを送信すれば、期待どおりに機能しているかテストすることができます。

AMP for Email Playground」から自分のアカウントにAMP Eメールを送信するには、ホワイトリストに「amp@gmail.dev」を登録します。

スクリーンショット_2019-04-03_17_06_27.jpg

実際のメールデモ

カルーセル

<amp-carousel>を使ってみました。
外部から画像を読み込む場合は、Gmailの[設定]→[全般]→[メッセージ内の画像]で、[外部画像を常に表示する]にチェックをいれる必要があります。

amp_mail.gif

フォーム

<amp-form>を使ってみました。
フォームに関しては活用方法を色々考えることができ、夢が拡がりそうですね。

amp_mail2.gif

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

<script>の中をコメントアウトするやつ、なんなん?

掘り出し物大市。

TL;DR

ガラケーとIE3対応がなければ不要。
まずその前にスクリプトはhtmlから.jsに切り分ける。

経緯

XHTMLの管理画面を触っていて、ふとこんなのを見かける。

<script type="text/javascript">
<!--
// 省略
// --> </script>

この<!--// -->でjavascriptを囲むのが一体何者なのか気になり、調べてみた。

コメントアウトの目的

scriptタグ内が表示(レンダリング)されてしまわないようにする、のは知っていたが、
一体、何に対しての配慮なのかは見当がつかない。

teratailで丁寧に回答されている方が居た。
https://teratail.com/questions/28215#reply-44118
拙い知識で時系列順にまとめると、

  • HTML3.2
    scriptタグの中は将来的にスクリプトに使用し、ブラウザでは非表示にする旨の記述
  • HTML4.01
    scriptタグを理解しないブラウザのための、コメントアウト方法について勧告
    (ここで上記のコメントアウト方法が出たんですね。)
  • XHTML
    scriptタグ内で<![CDATA[]]>で囲う
  • HTML5
    そもそも認識の仕方が違うので、コメントは不要

というところか。

つまり、HTML4.01時代であれば必要だったこともあったが、HTML5で書き始めたら、コメントアウトは不要である。
XHTMLなら<![CDATA[]]>で囲うということで、あのコメントアウトは何の意味も為していなかった...。

結論

いま自分の書いているコードに疑問を持とう。

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

WEBページの文字をちょっと編集してみるブックマークボタン

まえおき

以前、こんな記事を書きました

HTMLデザイン検収に、WEBページを直接WYSIWYGできる「jQuery Console」を利用する
https://qiita.com/RAWSEQ/items/8cb265318d1339940f66

これ、ワンタッチでできたらよくね。

とツッコミをいただきました。

「開発ツールで該当の場所探して編集する」という手間は省けたとしても
編集する為にはウィンドウを開かなければいけない。
クールじゃないですよね。

そこで ???

本題

EDIT PAGE -「WEBページの見た目(文字)を変えてみることができるブックマークツール」
https://ltside.com/jqc/edit.html

ブックマークをクリックするだけで編集可能になります。
これで、HTMLデザインの幅チェックとか、文言変えた感じのチェックやデモンストレーションがクールにできます。

editpageout.gif

実際はまあ、こんなことしてるだけですが・・

javascript
document.querySelectorAll('*').forEach((e)=>{e.setAttribute('contenteditable',true)});

開発ツールのスニペット等が使い慣れている方は上記1行実行するだけでテキスト編集可能になります。

その他、相性よさそうなWYSIWYGツールがあれば組み合わせてみたいです。
「もうあるよ」って方も是非教えてください!

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

WEBページの文字を直接編集してみるブックマークボタン

まえおき

以前、こんな記事を書きました

HTMLデザイン検収に、WEBページを直接WYSIWYGできる「jQuery Console」を利用する
https://qiita.com/RAWSEQ/items/8cb265318d1339940f66

これ、ワンタッチでできたらよくね。

とツッコミをいただきました。

「開発ツールで該当の場所探して編集する」という手間は省けたとしても
編集する為にはウィンドウを開かなければいけない。
クールじゃないですよね。

そこで ???

本題

EDIT PAGE -「WEBページの見た目(文字)を変えてみることができるブックマークツール」
https://ltside.com/jqc/edit.html

ブックマークをクリックするだけで編集可能になります。
これで、HTMLデザインの幅チェックとか、文言変えた感じのチェックやデモンストレーションがクールにできます。

editpageout.gif

実際はまあ、こんなことしてるだけですが・・

javascript
document.querySelectorAll('*').forEach((e)=>{e.setAttribute('contenteditable',true)});

開発ツールのスニペット等が使い慣れている方は上記1行実行するだけでテキスト編集可能になります。

その他、相性よさそうなWYSIWYGツールがあれば組み合わせてみたいです。
「もうあるよ」って方も是非教えてください!

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

RailsでHTMLCollection/NodeListを使うとき。(JavaScript)

RailsでHTMLCollection・NodeListを使う

今回、getElementByClassNameやquerySelectorAllで要素を取得してイベントを登録する際に引っかかったっ点を備忘録として記述しておく。

まず、要素を取得する時点からミスっていたのでその原因の究明から先に行った。

まず、Railsから要素が取得できていなかったので次のようなコードを書いた。

var menuSeconds = document.getElementsByClassName('menu__second');
var profiles    = document.querySelectorAll('.profile-lists li a');
console.log(menuSeconds);
console.log(profiles);

getElementsByClassNameでは戻り値がHTMLCollection、querySelectorAllでは戻り値はNodoListsとなる。

スクリーンショット 2019-04-03 14.20.32.png

ちなみに矢印をクリックすると中の要素が表示されるがHTMLCollectionの中身は全て表示され、lengthも表示される。NodeListsは中身もなく、lengthも0と表示される。
しかし、HTMLCollectionで取得できた要素ですら、いざ使用しようと思うとなぜかできない。
念の為、console.logでそれぞれのlengthを出してみよう。

console.log(menuSeconds.length);
console.log(profiles.length);

スクリーンショット 2019-04-03 14.28.45.png

するとどちらの要素もlengthが0で何も取得できていないことがわかる。

なぜか。簡潔に言うとこれはJavaSctiptがDOMがrenderされる前に走っているから。つまりHTMLのbodyが読み込まれる前にスクリプトが読み込まれているから。Rails上で先にjsファイルが読み込まれていた。

解決策は
1.HTMLのbodyの最後にscriptタグで囲んで書く。
2.下記のようにDOMが読み込まれるのを待つ記述をする。

(function() {
  'use strict';
   document.addEventListener('DOMContentLoaded', function(e) {
     var menuSeconds = document.getElementsByClassName('menu__second');
     var profiles    = document.querySelectorAll('.profile-lists li a');
     console.log(menuSeconds.length);
     console.log(profiles.length);
   });
 })();

のように書くと、
スクリーンショット 2019-04-03 14.40.12.png

上のようにちゃんと取得される。

また、NodeListsから一つの要素を取り出す際は、profile[0]のように配列と同じでいいが、HTMLCollectionから取り出す際は、menuSeconds.item[0]と、itemをつける必要がある。

イベントリスナーを登録したい

取得した要素にイベントリスナーを登録したいときの処理も備忘録のため。

まず前提としてHTMLCollectiondにはforEachは使えない。よってfor文を使おう。

for (var i = 0; i < menuSeconds.length; i++) {
  menuSeconds.item[i].addEventListener('mouseover', function() {

のように書き始めていた。が、

これだとクロージャが生成されずカウンター変数が保持されないためどこから参照してもlengthの値しかカウントされないらしい。

よって中で即時関数を定義することで解決できる。

for (var i = 0; i < menuSeconds.length; i++) { function(n) {
  menuSeconds.item[n].addEventListener('mouseover', function() {
  .
  .
  .
  }, false);
 })(i);

これでちゃんとイベントが登録されているはず。

NodeListsはforEachが使えるので、

profiles.forEach( pf => {
  pf.addEventListener('mouseover', function() {
  .
  .
  .

などとかけば登録できる。

まだまだ未熟者なので至らない箇所があればぜひコメントください。

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

【HTML】便利な[tab]キー でも知らない単語が出てきた

未来電子テクノロジーでインターンをしているUsamです。

今回はProgateのHTMLコース中級を終えて、[tab]キーを使いまくっていたのですがそこでわからない単語(属性)が出てきたので触れていこうと思います。

  • link [tab]

はじめに

いらすとやの画像を使っていこうと思ったのですがいい感じのイメージがわかなかったので今回はありません。
また、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

link [tab]

Progateにおいて、HTMLの方に link と打ち込み[tab]を押すと以下のようになりました。

link rel="" href="" title="" type=""

簡単にメモしていきます。

rel

relation の略、rel属性と呼ばれリンク先の位置づけを表す。

rel="   "

   ↑
ここの位置に入るもの(属性値)はだいたい決まっている。
「リンク先の位置づけを表す」と言われましても僕はまだイメージがわきません。
現時点ではstylesheetしか使ってません。他の属性値がでてきたら、ググります。

以上

href

hyper text-reference の略、いつもリンク先を貼ってるところ

初めて見たときは ハーフ(half)と読んでいたが「何が半分やねん」と思いググると Hレフ(href) でした。

title

カーソルを合わせたら出てくるテキスト
パソコンでしか見ることができずスマホが普及した今ではほとんど見ない
(昔、サイトでよく見たことあるイメージ)

type

調べた感じ、リンクには使わなさそう。
他のときに使いそうなのでメモしときます。

type="    "

     ↑
ここにはtext、search、tel、button などここでも属性値は決まっています。
ちなみにプロゲートではtextしか使ってなかった気がする。

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

【初心者】paddingとmarginの使い分け

はじめに

未経験Webデザイナーとして入社後、最初の研修課題をやりながらpaddingとmarginの使い分けが理解出来ずになんとなく設定していました。世の中のWebデザイナーさんは息をするくらい無意識に簡単に設定出来てしまうくらい自然なことなんだろうな~と、その時は思ったのですが、初心者の私にはどうしても理解できなかったので、私なりの解釈をまとめました。

paddingとmargin

  • padding
    borderから見て内側の余白部分を設定するときに使用

  • margin
    borderから見て外側の余白部分を設定するときに使用

正直この理解はなんとなく出来るのですが、デザインとして線を必要としていない場合にその境界線がどこになるのかが理解出来ませんでした。そのため、境目がないのに何を基準にしてpaddingとmarginを決めればいいわけ?となり、ハテナの無限ループに陥る結果となったわけです。

あなたも私と同じ理由ですか?

このページを見つけたということは、あなたもpaddingとmarginの違いや使い方を調べているからだと思うのですが、つまづいた理由は同じでしょうか?
もし理由が同じだった場合、paddingとmarginを考える前にWebサイトの構成をもう一度よく考えてみるといいと思います。研修課題をチェックしてくれた先輩からは「1つ1つの画像やテキストに焦点を当てるのではなく、もっと大きなくくりでサイト全体の構成をよく観察するといいよ」とアドバイスをもらいました。そう言われて初めて、自分がいかに狭い範囲でしか見れていなかったことに気付きました。

”お盆とお皿”で考える

私はサイト全体の構成をよく観察するため、開発者ツールを使用して、あるサイトを上から順にどういうブロックに分かれて構成が組まれているのか順を追って確認しました。(もっと良い方法があるのかもしれないのですが、かなりアナログ人間なものでして…。)
ひたすら上から順に確認した結果、最終的に行き着いた先が”お盆””お皿”の関係でした。どんなに美味しい料理でも、料理に合った大きさのお皿を選んだり、お皿に盛った料理をバランスよく見栄えを考慮して並べたりしますよね。paddingは料理をきれいに見せるためのお皿の余白、marginはお盆に乗っているお皿全体をきれいに見せるための余白と理解しました。そうなると、borderは必然的にお皿の淵に該当しますね。

複雑になった時も同じ

”お盆”と”お皿”で考えられれば、もっと複雑な構成にしても考え方は同じだと思います。
例えば、1テーブル4人席があったとしましょう。1人ずつ好きなお盆メニューを頼むとテーブルの上には必然的に4つのお盆が並びますね。きっと、無意識に隣同士ぶつからないように配置されると思います。また、自分の目の前にあるお盆の上に乗っている料理も、自分の食べやすい位置に変更したり、少しずらしてみたりするでしょう。
そうなると今度は、paddingはお盆とお盆の上に乗っているお皿の間を、marginはお盆とお盆の間と理解することが出来ます。また、borderはお盆の淵に該当することになります。
Qiita_20190403.png

まとめ

paddingとmarginが理解出来なかったのは、そもそも全体の構成がどうなっているのかが見えていなかったことが根本的な原因でした。これは完全に、paddingとmarginを理解する以前の問題でした…。
全体の構成がどうなっているのか(どうなるべきか)は、本当にいろいろなサイトを見て参考にする必要があります。自分でレイアウトを考えながら制作してみることも1つの手段ですね。今は、Webデザイナーさんが息をするように設定出来る理由も納得です!私もpaddingとmarginを上手く活用して見やすいレイアウト構成を考えられるようになりたいです。

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

AMPのライブラリをjQueryの代わりに使う

みなさん、jQuery、使っていますか?
先日ウェブサイトの制作をある会社さんに発注したところ、jQuery満載のコードが納品されました。
「うわぁ…」ってなったんですけど、(主に発注ノウハウの)のいい勉強だなあと思ってjQuery排除のリファクタリングをしました。

リファクタリングしている中で、AMPのライブラリ便利だなあって思ったのでここにまとめます。

AMPとは?

Googleが推進している高速なWEBサイト表示技術です。
詳しくはこちらをどうぞ。
https://www.ampproject.org/

AMPのUIライブラリは非AMPページでも使える

AMPに対応するためにはいろいろ規則を守らなければなりませんが、それを守っていられない案件もあるでしょう。
しかし、AMPのための公式JavaScriptライブラリは、非AMP対応ページでももちろん使用可能です

<script async src="https://cdn.ampproject.org/v0.js"></script>

基本はこれだけです。あとはこれに含まれない拡張コンポーネントを使いたい場合にはそのスクリプトを読み込む必要があります。
現時点でも非常に多くのコンポーネントが提供されていて、UIライブラリとしても優秀です。
https://www.ampproject.org/ja/docs/reference/components

このライブラリを使ったからと言って、AMP対応を頑張らないといけないわけではありません
formだって使っていいし、aタグにJavascriptを仕込むのも自由です。

なんだ、ただのGoogle製のUIライブラリじゃないか。

まずは amp-img から

これは有名だと思いますが、遅延読み込みができる画像表示コンポーネントです。
<img>の代わりとして使うだけで、

  • 遅延読み込み
  • レスポンシブ対応などの柔軟なレイアウト

が簡単に実現します。組み込みコンポーネントなので、上記の基本ライブラリをリンクし、

<amp-img alt="A view of the sea"
  src="images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

のように記述するだけです。
width, heightを記述し描画速度を高めた上で、レスポンシブ対応までできる方法ってなかなかないのではないでしょうか。
これをjQueryなどで実現しようとすると、jQueryを読み込み、lazyloadを読み込む必要があり遅いです。
もちろん遅延読み込みだけなら他にもjQuery依存のないものがたくさんありますが、AMPはそれだけではないのです。

便利コンポーネントたち

下記のようなコンポーネントが提供されています。いずれも、よく使うけどちょっと厄介なやつらです。

カルーセル

https://www.ampproject.org/ja/docs/reference/components/amp-carousel

アコーディオン

https://www.ampproject.org/ja/docs/reference/components/amp-accordion

lightbox

https://www.ampproject.org/ja/docs/reference/components/amp-image-lightbox

他にもたくさんあります

https://ampbyexample.com/

amp-fx-collection でアニメーション

これを推したくてこの記事を書きました。すごく強力です。

  • 要素が見えるとふわっとでてくるやつ amp-fx="fade-in"
  • パララックス効果 amp-fx="parallax"
  • スクロールに応じて透明度がかわるやつ amp-fx="fade-in-scroll"
  • スクロールすると横からヒュッとでてくるやつ amp-fx="fly-in-right" etc.

などが簡単に実現できます。
こちらに例がたくさんあるのでみてみてください。
https://ampbyexample.com/components/amp-fx-collection/

効果の重ねがけ

すごいのは、上記の効果の重ねがけもできるところです。
効果の個別のライブラリを使っている場合には、競合したりして難しいところがありますが、AMPなら心配いりません。
例えば、

<div amp-fx="fade-in fly-in-right" >
~
</div>

と書けば、ふわっとフェードインしつつ横からヒュッと出てくる、という効果が実現できます。
(ただし、一部、同時に使えない効果があります)

細かい調整もできる

じわ〜っと変わってほしいときか、
最初速くてだんだんゆっくりになるとか、
いろいろ好みがあるとおもいますが、かなり柔軟に指定できます。

  • 効果の持続時間の指定 data-duration="1000ms"
  • 効果のイージングをキーワードで指定 data-easing="ease-in-out" data-easing="linear" など
  • 効果のイージングをベジェ曲線で指定 data-easing="cubic-bezier(1.000, 0.005, 0.725, 0.055)"

自分はベジェ曲線指定が好きなので、できて嬉しいです。

読み込みはasyncで

jQuery系のライブラリでは、asyncで読み込むとうまく動かないことが多い印象です。
ていうかjQuery自体、ふつうは同期で読み込むと思います。
https://jquery.com/
この公式サイトでも下記のように同期で読み込んでますね。(ていうか公式サイトなのにめちゃ古いバージョン使ってて驚く)

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

もちろん、WEBサイトの描画をブロックしないためには、JavaScriptはなるべく非同期で読み込んだほうがよいです。
その点AMPは、拡張コンポーネントのみならず、基本のコンポーネントも非同期読み込みを前提に作られているので、いつ読み込んでも大丈夫です。描画をブロックしません!

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fx-collection"
        src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

結論

というわけで、AMPのライブラリはとっても便利でパフォーマンスも良いです。
みんな使いましょう!

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

HTMLの書き方

HTMLの書き方

請われていい感じの本でも探すかなと思ったけど面倒だったので書く。
基本的にその道の素人を対象にしていてわかりやすく書くつもりだけど、PCの扱いができない人は想定していない。
内容は

  • HTMLを書く
  • CSSも書く
  • スマホ対応はしたい

みたいな感じ。

前準備

何を使ってHTMLとCSSを書いていくか、ということと、どうやって表示をするか、である。

IDE

筆者は普段からVimを使っていて他のエディタ/IDEはわかっていない。とはいえ、今から始める人にVimでやれっていうのはねぇ…
どれも使ったことがないけれど、VSCodeは良さそうだと思っている。
複雑なことをするつもりもないし、複雑なことをしようと思ってからこの辺は工夫すればよくてとりあえず使えるものを使えばいいと思っている。
取り合えずはVSCodeなどを作って、プロジェクトを作って、index.htmlとindex.cssを作ってやればよいと思っている。
文法チェックなどは多分拡張子があっていれば働くと思う。

ブラウザ

ChromeからFirefoxでいいと思っています。僕はFirefoxを使っているけれど、どっちを使ってもいいし、デバッガもさして差がないと思う。

デバッガの使い方

デバッガというと何かということになると思う。
Firefox / ChromeでF12を押すと出てくる機能。
何ができるかというと

  • JavaScriptの構文/実行時エラー (今回は対象外ですね
  • HTMLの各種要素のCSSの適用具合など
  • ネットワークの状態の確認
  • JavaScriptの実行 ( CSS/セレクターの選択などで使えるといいと思っているので書くかも。

HTMLを書く前に決めること

まず何を書くのか決める

このページは何を書きたいページなのかを決める。
このページであれば、

  • HTMLの書き方を説明するページだと宣言する。
  • 説明をする前に必要なことを提示する。
  • HTMLの書き方を説明する。
  • HTMLの詳細の説明をする。
  • CSSの書き方を説明する。
  • CSSの詳細の説明をする。

といった感じである。
実際にこのページの構成を見るとそんな感じになっていると思う。

決めたら、アウトラインを書く

このページを例に何を書くのかを決めた。
その書きたい内容の中での上下関係や優先順位を決める。
上記の例であれば、一番重要なことは
HTMLの書き方を説明するページだと宣言する。
である。
これはh1タグに相当する。

  • 説明をする前に必要なことを提示する。
  • HTMLの書き方を説明する。
  • CSSの書き方を説明する。

これらは、一番重要なことから一段落ちる。h2タグ相当になる。
また、CSSはHTMLの説明を先に行う必要があるので、上下関係で行くと HTML > CSSとなる。

  • HTMLの詳細の説明をする。
  • CSSの詳細の説明をする。

これらは、HTML/CSSの詳細なので、それぞれの下に位置する。h3タグ相当になる。

内容を書く

上記で書く内容、上下関係、優先順位などを整理した。
あとはそれぞれに対して肉付けをしていくだけでよく、段落付されたみやすいページとなるはず。

HTMLを書く

まずHTMLとは何かという話をする。そもそもの対象読者は何かは知っているが一旦説明はしておく。

  • <div></div>と言った形で書く。
  • <div1><span></span></div1>と言った形で入れ子にすることができる。
  • <div1 class="className"></div1>と言った形でクラス名をつけて、タグをグループ化して管理することができる。
  • <div1 id="idName"></div1>と言った形でIDをつけることで、タグに唯一の名前をつけることができる。
  • <a href="https://google.com" >クリックで開く</a> といったようにタグごとに固有の属性を設定できる。
  • グループ化した要素や唯一の名前はJavaScriptやCSSで参照させることができる。

htmlタグとheadタグとbodyタグについて

これらのタグは表示上ではなく記述上の意味を持っている。

htmlタグ

今書かれているファイルがHTMLであるということを記述する。おまじないみたいな感じで毎回書く。

headタグ

このページ自体の説明や属性などを書く。

  • このページはどういったことを書いている、と説明をするmetaタグ
  • このページの名前を書くtitleタグ

などを書く。

bodyタグ

ページの中身を書く。

<html>
    <head>
        <title>ページ</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
    </body>
</html>

ブロック要素とインライン要素について

HTMLの要素、表示上で大きく二つに分けることができる。
一つはブロック要素で、もう一つはインライン要素である。
それぞれ比較をする。

ブロック要素

  • 幅、高さなどの属性値を持つ。
  • 設定をされていない場合には中身の高さ、画面の幅になる。
  • 幅、高さのある箱の中でのテキストの表示の仕方などを設定することができる。
  • margin / paddingが効く。
  • 改行する。

インライン要素

  • 幅、高さなどの属性値を設定しても効かない。
  • 中身の幅、高さになる。
  • テキストの表示の仕方などは親になる要素で設定することができる。
  • marginは効かない。paddingが効く。
  • 改行しない。

marginとpaddingについて

margin

marginを設定した要素の周りをどの程度開けるか、ということを指定する。
書き方はmargin-top , margin-right , margin-left , margin-bottomといった形で、バラバラに書くか、marginにまとめて書くかが選べる。

marginとして書いた時に、一つしか書かなかった場合には、全ての方角に対して効く。
marginとして書いた時に、二つ書いた場合には、それぞれ、上下、左右の順番で効く。
marginとして書いた時に、三つ書いた場合には、それぞれ、上、左右、下の順番で効く。
marginとして書いた時に、四つ書いた場合には、それぞれ、上、左、下、右の順番で効く。

div{
    margin : 10px;

    margin : 10px 10px;

    margin : 10px 10px 10px 10px;

    margin-top    : 10px; 
    margin-right  : 10px; 
    margin-left   : 10px; 
    margin-bottom : 10px; 
}

上記の改行で区切られたそれぞれの書き方は全て同じものをさしている。

div{
    margin : 10px 20px;

    margin : 10px 20px 10px;

    margin : 10px 20px 10px 20px;

    margin-top    : 10px; 
    margin-right  : 20px; 
    margin-left   : 10px; 
    margin-bottom : 20px; 
}

上記の改行で区切られたそれぞれの書き方は全て同じものをさしている。

padding

paddingを設定した要素の中の要素の周りをどの程度開けるか、ということを指定する。
書き方のルールはmarginと同様で、padding-top , padding-right , padding-left , padding-bottomといった形で、バラバラに書くか、paddingにまとめて書くかが選べる。

頻出するタグについて

よく使うタグと使い道を書いていく。
いわゆるHTML5で追加されたタグ群はあまり書いていない。
本当はより書いている内容に合わせたタグを使うべきだが、説明を書くと長すぎるし見た目上はdivで問題がないので割愛。

div

割と普通のブロックを作るタグ。
ブロックを作って、その中に画像を表示したり文章を表示したりする。
ブロックの中にブロックを二つ、三つと横に並べたりもできる。

h1~h6

見出しに使うタグ。h1~h6まであって数が小さいほど表題的な意味の強くなるタグである。
段落の強さだけれど、h5,h6あたりを使うようになってくるとページの構成が悪いような気もする。

ul/li

一覧を作るために使うタグ。
デフォルトでCSSのプロパティのlist-styleが有効になっていて、見出しとしての・が表示される。大体list-style : noneって書く印象がある。
ul/liのタグが両方インライン要素(多分)になってて取り回しが悪かったりする。

table

そのままの意味でテーブルを作るタグ。
素直にスタイルを書くと結構思ったように動いてくれない。
あまり一般的なサイトで使うことがないと思う。
上記のul/liで書けることの場合はそっちの方が良いので、それがダメなら考えよう。

a

リンクを作る。
href属性にURLを入れることで、aタグで囲まれた中の要素をクリックしたときにそのサイトに飛ぶことができる。

img

画像を読み込む。
src属性にURLを入れることで、画像を表示することができる。画像の大きさはスタイルシートで行う。

span

divと同じようにひとまとまりの塊を作る。でもブロック要素じゃない。

p

文章を書くために用いる。ブロック要素。

main

メインコンテンツを書く。

header

ヘッダーになる内容を書く。

footer

フッターになる内容を書く。

button

押したら何か起きるボタンを作る時に使う。
スタイルをいい感じに当てると押下時のアクションとかが自動的に入ったりして便利。
background-imageを指定して使うことも多め。

読みやすさを意識したい

先ほど作ったアウトラインに沿ってものを書いていきたい。
それぞれのアウトラインごとに改行などを使ってある程度分割して書くとわかりやwすい。
要素につけたクラス名などをいい感じにすることで、誤解を無くしやすく読みやすいHTMLになる。

CSSを書く

CSSとは

HTMLの要素の表示、動作などを修飾する。
例えば、

  • 要素のフォントの色、サイズを変える
  • 要素の大きさを変える
  • 要素の位置を変える
  • 要素の透明度を変える
  • 要素の属性値を変更する時に、何秒かけて実行するか( アニメーション

などなど。

書き方は、

$selector{
    $style-name1 : $style-value1;
    $style-name2 : $style-value2;
}

といった形で書く。

セレクタの書き方

下記の指定の仕方が可能。
* タグ。
* クラス名で検索する
* IDで検索をする
* 上下関係などで指定をする。
* 組み合わせで指定をする。
* 状態を指定することができる。
* 上記は全て組み合わせが可能。

といった形。それぞれ説明をしていく。

タグ

div{
    color : red;
}

このように書くと、全てのdivタグのフォント色が赤くなる。
このままでは全ての要素が変わってしまうために、使いづらい。

クラス名で検索する

クラス名を指定するにはクラス名の前に.をつける。

<div class="hometown">toshima</div>

といったHTMLの要素を指定して、フォントのサイズを変更したい場合は、

.hometown{
    font-size : 16px;
}

といった形で指定をする。
前述ものと組み合わせると

div.hometown{
    font-size : 16px;
}

といった形になる。

IDで検索をする

クラス名を指定するにはクラス名の前に.をつける。

<div id="myhometown" class="hometown">toshima</div>

といったHTMLの要素を指定して、フォントのサイズを変更したい場合は、

#myhometown{
    font-size : 16px;
}

といった形で指定をする。
前述ものと組み合わせると

div#myhometown.hometown{
    font-size : 16px;
}

といった形になる。
IDは1画面中に一つしか存在できないので、あまり他の要素と合わせてセレクターを書く必要性は薄い。

上下関係などで指定をする

特定の要素の下にある要素群を指定する場合には > を使用する。

<h1>cities</h1>
<ul class="cities">
    <li>Toshima</li>
    <li>Shinjuku</li>
    <li>Bunkyo</li>
</ul>

上記のようなHTMLに対して、豊島、新宿、文京を修飾したい場合には

ul.cities>li{
    letter-spacing : 2px;
}

これで、豊島、新宿、文京の文字列の文字間のサイズは調整ができる。

<h1>cities</h1>
<div class="cities">
    <ul>
        <li>Toshima</li>
        <li>Shinjuku</li>
        <li>Bunkyo</li>
    </ul>
</div>

このようなHTMLの時に > では呼び出すことができない。.citiesの下に一つulタグが入り、その下にliが存在するからである。
この場合には、ul.cities>div>liと書くと動作する。
もしくは

ul.cities li{
    letter-spacing : 2px;
}

と記述することで動作する。
スペースは、スペースの左の要素の子方向の要素群に対してスペースの右側で検索を行うことになる。

複数要素が存在する場合に、そのうちのどれを指定するかを選ぶことが可能である。

ul.cities li:first-child{
    letter-spacing : 2px; // Toshimaのみ適用
}

ul.cities li:last-child{
    letter-spacing : 2px; // Bunkyoのみ適用
}

ul.cities li:nth-child(2){
    letter-spacing : 2px; // Shinjukuのみ適用
}

ul.cities li:nth-child(2n){
    letter-spacing : 2px; // 偶数番目のみ適用
}

ul.cities li:nth-child(2n + 1){
    letter-spacing : 2px; // 奇数番目のみ適用
}

状態を指定することができる。

要はhoverした時にどうか、ということを書くことができる。

組み合わせで指定をする

上記の中で軽く触れてはいるが、セレクタの組み合わせが可能である。

<h1>cities</h1>
<ul class="cities">
    <li class="city hometown">Toshima</li>
    <li class="city">Shinjuku</li>
    <li class="city">Bunkyo</li>
</ul>

と記述されているHTMLの場合に、仮にcitiesの下にあるli要素で、自分の出身地を詳細に指定したい場合には、

ul.cities>li.city.hometown{
    letter-spacing : 2px;
}

とスタイルシートを書く事になる。

上記は全て組み合わせが可能

それぞれ組み合わせが可能である。

Flexスタイルについて

特定のブロック内で、インライン要素は全て改行をする。つまり、そのままでは、要素群を横に並べることは不可能である。

例えば上記の画像は、Twitterのヘッダであるが、二つの要素群が横に並べられている。
昔は、Floatを使って頑張って書いたりしたけど今は忘れて良くて、flexboxというスタイルシートのプロパティを用いる。

ホームボタン、#ボタン、通知ボタン、DMボタン、検索ウィンドウ、本人名

こういう時には、HTMLは下記のように書く。

<header>
    <ul>
        <li>ホーム</li>
        <li>#</li>
        <li>通知</li>
        <li>DM</li>
        <li>検索ウィンドウ</li>
        <li>本人名</li>
    </ul>
</header>
header>ul{
    list-style : none; // これをつけておかないと要素の頭に・が表示されてしまう。
    width : 500px;
    margin : 0 auto; // 左右のmarginが均等に配置される = 真ん中に配置される。
    display : flex;
    justify-content : space-between;
}

といった形で書く。
これで、500pxのul要素が画面中央に作られ、上記のホーム、#、通知、DM、検索ウィンドウ、本人名は、ul内に均等に配置される事になる。

要素のサイズに指定する単位系について

  • px
    ピクセル。絶対値。
    例えば画面の幅を800pxと使ってしまうとブラウザの幅を縮めた時にブラウザ幅からはみ出してしまい見づらくなってしまったりする。
    ボタンのサイズ指定などで使うならそこまで問題にはならないと思う。

  • vh/vw
    それぞれview heiight / view widthの略で、要は画面高さと画面幅である。
    相対値になっていて、例えばブラウザの幅、高さを変更した時には、vh/vwはそれぞれ再計算される。
    80vwとなっていた場合には常にブラウザの幅の80%である。

  • %
    親の要素に対しての%評価である。相対値。
    親要素のwidthが100pxで、要素のwidthが80%ならば80px。
    親要素のwidthが100vwで、要素のwidthが80%ならば80vwとなる。

  • em
    あまり使ってないので詳しくない。調べて。

頻出するスタイルについて

よく使うスタイルを書く。

要素のサイズ系

  • width
  • height
  • margin
  • padding

  • border
    要素の周りに線を引く。
    太さ、線のタイプ、色を指定する。
    実際にスタイルを当てる時も使うし、要素がどんな感じになっているかをみる時にも使う感じですね。

.target-parent{
    border : 1px solid black;
    border : 3px solid #FF00000;
}
  • border-radius 要素の周りの線の角を丸める。 marginと同じように左上から順に指定したり、できるんだけど、大体角の丸具合は全周囲一緒だったりするので、一個しか書かないことが多い。 曲率なんかはお気持ちで調整しがち。
.target-parent{
    border-radius : 10px;
}
  • border-shadow 要素の周りの境界線に影をつける。 これは線を引かずとも使えたりして便利。 http://www.bad-company.jp/box-shadow/ オプションが結構面倒臭く、ここのサイトは普段から使っていて、書いた後の現物合わせしていく感じ。

フォント系

  • color
    フォント色を指定する。red,greenなどの著名な色名、もしくは#00FF00などといった形で、16進数でRGBを指定する。カラーコードなどで検索してみると良いと思う。

  • font-size
    フォントサイズを調整する。

  • font-weight
    フォントの太さを指定する。

  • letter-spacing
    文字間のスペースを指定する。

  • text-align
    left/center/rightで指定する。
    ブロック要素内のインライン要素、もしくは文字列の水平方向の位置を指定できる。

  • vertical-align
    top/middle/bottomで指定する。
    ブロック要素内のインライン要素、もしくは文字列の鉛直方向の位置を指定できる。
    line-height要素が同時に指定されていないといけない。
    大体、ブロック要素のheightと同じ高さをline-height要素に指定して、vertical-alighをmiddleで指定して上下の真ん中におく、といった使い方をする

.target-parent{
    height : 300px;
    line-height : 300px;
    vertical-align : middle;
    text-align : center;
}
  • opacity 透明度をしていする。
.target-parent{
    opacity : 0; // 見えない
    opacity : 1; // 見える
    opacity : 0.5; // 半透明
}
  • font-weight #### 背景系
  • background-color
    背景色をしていする。

  • background-image
    背景画像を指定する。書き方は、

.target{
    background-image : url("https://example.com/background.jpg");
}

などと書く。

アニメーションなど

レスポンシブ対応をする

昔はスマホ用サイトとPC用サイトでHTMLとかHTMLテンプレートを変えたりしていた。
今はメディアクエリができてそういうことはしていないのが一般的と思える。
メディアクエリは何かというのをざっくりいうと、画面サイズに応じて適用されるCSSを変えられる、といった取り組み。
簡単に例示すると、下記の通りで

@media screen and (max-width: 480px) {
    .target{
        color : red;
    }
}
@media screen and (min-width: 480px) {
    .target{
        color : blue;
    }
}

この場合、画面の幅480pxを分水領として、それ以上の場合には、.target要素の文字色は青、それ以下の場合は赤となる。
480pxを分水嶺としているが、スマホは大体480px以内で、ここでスマホ/PCを分けると都合が良い、ということでここに線を置いている。
もし、スマホ、タブレット、PCなどと細かく分けたい場合は480px以外にも720px(てきとう)などでもう一つ境界を設定すればよい。

デモページ

https://s2.github.io/html-qiita/

デバッガの使い方

画面は Firefox。

スクリーンショット 2019-04-03 20.22.31.png

こんな感じで、メニューが出るので、要素を調査、をクリックする。
選択済み要素

するとこんな感じで、HTMLが表示される。

選択埋み要素スタイル

選択されているスタイルが右上にこのような形で表示される。

意図したスタイルが正しく当たっているか

  • セレクターが間違っていないか?
  • 異なるセレクターのスタイルが当たっていないか?
  • の確認ができる。

正しく当たっているスタイル自体が誤っていないか。

  • CSSのプロパティが誤っていて無視されている。
  • プロパティも値も正しかったが、意図とは異なっていた。

セレクターのテストをする

  • コンソールを開く
  • document.querySelectorAll(".target");と入力する(.targetは適宜任意のセレクターを入れる)
  • nullが帰ってきた場合にはそのセレクターに合致する要素は存在しない。
  • 帰ってきた要素が意図したものと正しくなければセレクターを誤っている。 スクリーンショット 2019-04-03 20.16.16.png
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む