些細な日常

サイト作成でHTMLのemとstrongはHTML5／Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em／強調タグとは何か strong／重要性タグとは何か i／斜体タグとは何か b／太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em／強調タグとは何か HTMLのemタグのemはemphasis／強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不…

Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で…

正規表現で文字列の間、一つの部分から他の部分までを指定するには両端を任意で決めて中間をパターンで記載する。 何でも良ければ「.*」（どんな文字でもなければなくてあればあるだけ続く：文字の0以上の繰り返しという指定）が一般的に使える。 例えばサイトや画像などのURLで半角スラッシュ（/）の間を指定するには「/.*/」のように記載する。 参考サイト 正規表現パターンの記述 JavaScriptで使う場合は文字列の半角スラッシュはエスケープしなくてはならないので、正規表現リテラル（/文字列/）ならば半角バックスラッシュを前に一つ追加して「 \/.*\/ 」、それを正規表現オブジェクト（RegExp()コンストラクター）に渡すならば半角バックスラッシュを前に二つ追加して「 \\/.*\\/ 」と書き換えることになる。 Istanbul by Ben_Kerckx / Pixa…

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次 グリッドデザインで画像に文字を重ねるソースコード 画像の中央に文字を重ねる 画像の右上に文字を重ねる 画像の左上寄りに文字を重ねる 文字の位置取りを余白で調節する 区分けしたレイアウトで画像に重なる文字を整序させる 画像の中央の下のスペースの中央に文字を重ねる 文字を整序して位置取りを余白で調節する 文字の幅を確保しながら画像に重ねる グリッドデザインで画像に文字を重ねるソースコード 画像に文字を配置するスペースの割合を計算する 計算されたスペースの中に文字を実…