frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

意外と知られていない!?dlの直下にdivを置いてもOK!

質問サイトにもdl要素の直下にはdt、dd以外置いていけないという答えで終わっており意外と知られていないかもしれません。

MDNのdl要素のページでも下記のように記しています。

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

WHATWG HTMLは

要素の
要素に各名前 - 値グループをラップできます。これは、マイクロデータを使用する場合、またはグローバル属性がグループ全体に適用される場合、またはスタイリングの目的に役立ちます。

つまりCSSでスタイリングする目的でdivを挟むことに問題はありません。

ulはliしか直下に置けないですが、dlに関してはバリデータエラーが出ないことが確認できると思います。

dt ddをdisplay:flexで横並びにする

floatからflexへ移行してる流れでdtddは未だにfloatで横並びにしている人も多いと思います。
もちろんそれが悪い訳ではありません。選択肢を増やすことをこの記事では紹介したいと思います。

See the Pen Yxxbyz by funclur (@funclur) on CodePen.

一つ目は、dtにclearプロパティを指定し、floatを解除しています。dlの::after要素にもclearfixが必要ですね。

二つ目が、div要素を挟みdivにdisplay:flexを指定するだけです。

htmlは記述が増えますが、cssはプロパティ1つでdt,ddを横並びにすることができました。

dlのスタイリングにdt,ddだけでは要素が足りない場合は遠慮なくdivを挟みましょう!

WAI-ARIA基礎まとめ カルーセルを例に実装方法の解説

WAI-ARIAとは

WAI-ARIAの語源は、Web Accessibility Initiative - Accessible Rich Internet Applications(ウェブ・アクセシビリティ・イニシァティブ・アクセシブル・リッチ・インターネット・アプリケーション)です。
WAIは、あらゆる人がWWWを利用できるように、アクセシビリティの向上を率先する組織です。

Web開発者は、HTMLだけでは作成できないユーザーインターフェイスコントロールを作成するために、クライアント側のスクリプトを使用し
Webサーバーから新しいページを要求することなくページのセクションを更新します。
このようなウェブサイト上の技術は、リッチインターネットアプリケーションと呼ばれています。

WAI-ARIA - Wikipedia

WAI-ARIAの読み方

WAI-ARIAの読み方ですが、イニシャルを取った略称なのであまりこだわる必要もないと個人的に思いますが、
余計発音が分からないですよね。口頭で発音した時訂正されてしまうのは恥ずかしいです。
こういう時は、自分はそれぞれ考えられる読み方を検索して一致数、有力な情報度で確かめます。
考えられる読み型は以下です。

  • ワイアリア 約 156 件
  • ウェイアリア 約 873,000 件
  • ワイエリア 約 94 件
  • ウェイエリア 約 12,600,000 件だがアクセシビリティの件ではないので対象外

よってウェイアリアが正しいようです。

WAI-ARIAはSEOに有効?

SEOについては、直接的な効果は期待しない方が良いかと思います。
情報を正しく伝えるという点では有用な気もしますが、WAI-ARIAはスクリーンリーダーに正しい読み上げを理解させるのが本来の目的の為、SEOとは切り離して考えた方が過度な使用を避けられそうです。

www.frontendmemo.xyz

WAI-ARIAの例

ではいったいWAI-ARIAを指定するとどうなるか。以下はhtml要素にWAI-ARIAを指定した一例です。

  • 読まれては困る部分にaria-hidden属性をつけると、スクリーンリーダーに無視される
  • 情報が書き換わる個所にaria-live属性をつけると、書き換わった際に読み上げられる
  • role属性を使うとその要素がなんなのか通知される
  • aria-label属性でスクリーンリーダー向けの説明を提供できる

このように読み込み(更新)時から要素が表示非表示するなどwebサイトの情報が書き換わった場合、aria-*属性も変化させることで状態などをスクリーンリーダーを通してユーザーに伝えることができます。

WAI-ARIAの種類

WAI-ARIA、role属性の種類は以下です。
ARIA in HTML

非常に多くて覚えずらいかと思います。
これを受験勉強のように一つずつ覚えていくことは不要で、必要なものを必要なだけ実例を通して覚えていくことが効率的と言えます。

カルーセルを例にしたWAI-ARIAの解説

アクセシビリティやオプションを網羅しているカルーセルのプラグインslick.jsを例に見ていきましょう。
slick - the last carousel you'll ever need

※ style属性は削除しています。

<div class="slider single-item slick-initialized slick-slider slick-dotted" role="toolbar">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox">
<div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1"><h3>6</h3></div>
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"><h3>1</h3></div>
<div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"><h3>2</h3></div>
<div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02"><h3>3</h3></div>
<div class="slick-slide" data-slick-index="3" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide03"><h3>4</h3></div>
<div class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04"><h3>5</h3></div>
<div class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05"><h3>6</h3></div>
<div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" tabindex="-1"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<ul class="slick-dots" role="tablist">
<li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00">
<button type="button" data-role="none" role="button" tabindex="0">1</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01"><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03"><button type="button" data-role="none" role="button" tabindex="0">4</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation04" id="slick-slide04"><button type="button" data-role="none" role="button" tabindex="0">5</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation05" id="slick-slide05"><button type="button" data-role="none" role="button" tabindex="0">6</button></li>
</ul>
</div>

aria-label

要素に対してラベル付けを行うことができます。ボタンに対して「前、次」というラベル付をしてます。

aria-live

内容が更新された際にユーザーに伝達するかどうかを指定できます。値のpoliteは伝達する、offは伝達しないです。

aria-hidden

ユーザーエージェントに認識させたくない要素に指定します。その為スクリーンリーダーで無視されます。
値のtrueは隠す、falseは隠さない、つまりスクリーンリーダーで読み上げられます。表示されてる要素にaria-hidden="false"、表示されていない要素にaria-hidden="true"を指定します。

aria-describedby

説明文とコントロールを直接結びつけます。ここではカルーセル要素とドットナビゲーションを結びつけるために使用しています。

aria-selected

現在選択された状態であることを示します。選択されたドットナビゲーションの値をtrueとしています。

aria-controls

指定した要素が値に指定した要素を制御することを示します。ドットナビゲーションにそれぞれ連番で値を割り振っています。

この中でaria-hidden、aria-selectedの値をJavascriptで変更します。
aria-hiddenはカルーセルがスライドしたタイミングで、aria-selectedはナビゲーションが選択されたタイミングで処理しましょう。

IE9でcssが効いてない・崩れる場合考えられること 対処法

IE9以前のブラウザではCSSの制限があり、それを超えたCSSは適応されません。

CSSセレクタ数の制限

  • 1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個までです。
  • IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。

https://support.microsoft.com/ja-jp/help/262161/a-webpage-that-uses-css-styles-does-not-render-correctly-in-internet-e

古いサイトの更新・改修などで1つのファイルに何千行のCSSを書いてる場合は気をつけたほうが良さそうです。

エラーなどでないのでこのトラップに気づくのに時間がかかります。(自分がそうでした)
この時代でもIE9以前のブラウザで対応しなければいけないときは気をつけましょう。

対処法

1つのCSSファイルという制限なので2つに分ければいいのですが、インクルードなどでheadに入れられない場合は全ファイルを記述を追加しなければいけないなど手間ですね。

クライアントにIE9のサポートは切れてるなどの材料を武器にIE9は捨ててもらうのが最善の対処法かもしれませんね...。

iframeはmarginの相殺が起こらない

CSSにおけるマージンの相殺は深いですよね。

マージンの相殺とは、簡単に言うと要素が連続する場合にマージンのサイズが大きい方が優先されるということです。

例えばh2がmargin-bottom:30pxで続く要素がmargin-top:20pxであればその要素間は30pxになります。
しかしこのマージンの相殺は特定条件で起きなくなります。

次の場合もマージンの相殺が起こらない1例です。

iframeのmargin-topが相殺されない

See the Pen Yxwdgo by funclur (@funclur) on CodePen.

通常.boxのようにmargin-bottom:30pxが優先され30pxの空きのはずですが、iframeの場合30pxとiframeのmargin-top:20pxが足され50pxの空きが出来てしまっています。

この場合の改善策として「h2 + iframe」などのような隣接セレクタにmargin-top:0としてh2のマージンのみを生かす方法が考えられます。

Googleマップで都道府県市区町村の境界がわかるようになった!

本日Googleマップを見ると都道府県、市区町村の境界がわかるようになっていました。

東京都

これは面白いですね。

住んでる所が東京か疑問に思われる場所でも境界内に入っていれば即証明できますね笑

新宿区

こやってみると新宿って駅の1/3は新宿じゃないwとか。googleマップを見る楽しみが増えました。

ただこちら拡大するとある程度のところまで拡大すると赤い境界ラインは消えてしまいますね。
範囲が大きい都道府県の方が拡大率が小さい段階で消えてしまうところは少し残念。

また、○○3丁目~などは境界線は引かれていないので、今後もしかしたら拡張するかもしれませんね!

Evernoteで保存できない!アップグレードの強要?

本日Evernoteで保存が出来なくなりあせりました。

いつものように保存しようとすると以下のような表示が。

f:id:funclur:20170726085914p:plain

アップグレードとキャンセルボタンしかありません。

どうすればよいかというと、アップグレードをクリックしてノートに戻るを選択するか、本文にそのまま入力すればいつものアイコンが
表示されます。

f:id:funclur:20170726091220p:plain

タイトルだけ入力して保存したいときや一瞬強制アップグレードかと思った自分と同じような人に向けて書いてみました。

cssで見出しデザイン117選

見出しデザインのアイディアってこれでもかっていうくらいありますよね。
今日はそんな見出しデザインをしてくれてるサイトを集めました。

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選

fit-jp.com

  • 手書き風の見出しデザイン[01]
  • サブタイトルを上部に表示する見出しデザイン[02]
  • 内側にシャドウを入れた見出しデザイン[03]
  • リボン風の見出しデザイン[04]
  • すごくリボン風の見出しデザイン[05]
  • サブタイトルを枠の上に表示する見出しデザイン[06]
  • マーカー風の見出しデザイン[07]
  • 消えていくボーダーを表示する見出しデザイン[08]
  • 外にはみ出すボーダーの見出しデザイン[09]
  • 内側にボーダーがある見出しデザイン[10]
  • 文字にボーダーを加えた見出しデザイン[11]
  • 右側にサブタイトルを表示する見出しデザイン[12]
  • 文字の下だけボーダーカラーを変更する見出しデザイン[13]
  • 様々な要素を組み合わせた見出しデザイン[14]
  • グラデーションと内線を加えた見出しデザイン[15]
  • マーク付きの見出しデザイン[16]
  • ボックス風の見出しデザイン[17]
  • 最初の文字だけ加工する見出しデザイン[18]
  • グラデーションボーダーの見出しデザイン[19]
  • グラデーションテキストの見出しデザイン[20]

【コピペで簡単】タイトル(見出し)CSSテンプレート 15選

tajuso.net

  • 1.下線
  • 2.点線
  • 3.上下線
  • 4.背景枠
  • 5.影付きボックス
  • 6.グラデーション
  • 7.先頭文字を大きく
  • 8.左線
  • 9.バイカラー下線
  • 10.マーク
  • 11.ドッグイヤー
  • 12.ストライプ
  • 13.点線で囲う
  • 14.中間線
  • 15.サブタイトル付き

HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

uxmilk.jp

  • 飾り付きの見出し 3つ
  • ボーダーがある見出し 5つ
  • 少し変わった見出し 6つ

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

saruwakakun.com

  • 下線付き
  • 点線+色を変える
  • 二重線
  • 上下に線
  • 単純な背景色をつける
  • 全体を線で囲む
  • 背景色+下線
  • 左線
  • 左に線+塗り
  • 立体感のあるバー
  • シンプルなボックスシャドウ
  • タグ風
  • 吹き出し
  • ステッチ風
  • ステッチを白に
  • 角がぺろっと剥がれるデザイン
  • 帯(リボン)風
  • 蛍光マーカー風
  • 途中で色の変わる線
  • 色を変えてみた場合
  • 線先に矢印
  • 先端が尖ったようなバー
  • 両先端を尖らせた場合
  • 背景をストライプで塗る
  • 左に縦線が入ったバージョン
  • ストライプ+上下線
  • ストライプの下線
  • ストライプの吹き出し
  • 両端に線を伸ばす
  • 二重線バージョン
  • 下側に小さく線をつける
  • スラッシュで囲む
  • 交差線
  • 角がくるん
  • 葉っぱ風
  • 細カギカッコ
  • 大括弧
  • 点線バージョン大カッコ
  • 立体的なボックス
  • 一文字目だけ装飾を変える
  • 消えていく下線
  • 段々と色が変わっていくパターン
  • 背景をグラデーションで塗る
  • 影をつけてみた場合
  • 上下のグラデーション
  • 文字の反射
  • シンプルなチェックマーク
  • おしゃれなシェブロンマーク
  • HTMLタグ風
  • ふきだしアイコン
  • フラットな見出し
  • コードアイコンのマーカー
  • タブ付き
  • タブ付きその2
  • 先頭にアイコンをつける例
  • ひらめき
  • 円にアイコンを入れてバーをつける
  • 円のまわりに影を付けた場合
  • さらに立体的にしてみた場合
  • 点滅するカーソル
  • 背景色+角丸
  • シンプルな円マーク
  • 考えごと風
  • 肉球マーカー
  • 背景にカラフルな円
  • ステッチ模様をつけた場合
  • 先頭につけた場合
  • 文字の背景を塗った場合