些細な日常

Bloggerのウェブの記事／追加ページの投稿（編集）のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language（ハイパーテキストマークアップランゲージ：超越文書記述言語）の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。 追記：2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 投稿のHTMLモードの入力画面｜ Blogger 通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザイン…

YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 追記：CSSで iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio が多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。 Bloggerブログでどうや…

HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、…

Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML： HTML: HyperText Markup Language 、 HTML5（目的別） など CSS： CSS: カスケーディングスタイルシート 、 CSS3（目的別） など JavaScript： JavaScript 、 JavaScript など Blogger： レイアウト用ページ要素タグについて ／ レイアウト用のウィジェット タグ 、 Les balises Blogger [introduction] など 一般的にサイト作成はHTMLとCSSという構成とデザインのマークア…

サイトでリストを表示するにはulタグ（順序なしリスト）、またはolタグ（順序ありリスト）にliタグを追加して行く。追加されたliタグのところがリストになってサイトに表示されることになる。 初期設定だと上下と左側に間隔が取られてリストの頭にulタグならば中点（・）が、olタグならば番号（1.）が付けられて縦並びで空行なしにデザインされている。 目次 リストの四つの主なデザイン リストの左側の間隔を消す リストのマーカーを消す 縦並びのリストを広げる リストを横並びにする リストの位置を揃える 全体的なリストの幅の調整 部分的なリストの幅の調整 リストの折り返しを調節する 文字間で改行させる場合 項目毎に改行させる場合 IEのバージョン７以前への対応 リストの四つの主なデザイン リストの左側の間隔を消す 画面に左寄せで表示するにはulタグ、またはolタグにで {padding-left:…