シェア
うちやましょうたろう/成り上がり
2020年6月13日 22:15
条件に合致したときに使う画像について詳細に指定する方法sizes属性を使うと、メディアクエリーの条件に合致したときの表示幅が指定できるしかし条件に合致したときに使用する画像ファイルまでは指定できない。例として、スマートフォン用とパソコン用では異なる画像（例えばトリミングの仕方を変えた画像など）を表示させたいような場合には、それでは困ってしまうことになるメディアクエリーの条件ごとに使用する画像
2020年4月28日 23:21
出力先に合わせて異なるサイズの画像を表示させる方法（続き）ピクセル密度に合った画像だけを読み込ませる方法それでは、img要素で指定する画像は常に2倍サイズのものを使用すればいいのかと言えば、そういうわけでもない例として iPhone 8 Plus のピクセル密度は 2.6倍であり、iPhone X なら3倍であるそれらを考慮に入れるのであれば、img要素には３倍サイズの画像を指定することに
2020年4月27日 17:52
出力先に合わせて異なるサイズの画像を表示させる方法従来のパソコン画面の解像度は長いあいだ 96ppi *(1) 程度だった2010年に Apple が発表した iPhone 4 の画面（ Retinaディスプレイ）の解像度は、一気にその倍以上になった *(2)それ以降、さらに高い解像度の機器もどんどん登場している（パソコンのディスプレイでも同様に高解像度のものが増えている）＊（１）pp
2020年4月23日 23:12
スマートフォンの画面に対応させるWebページが小さく表示される理由とその対処法メディアクエリーを使って、パソコン画面向けのCSSとスマートフォンのような小さな画面向けのCSSを別々に指定するサンプルを見ていく以下のサンプルは、表示領域の幅が 1000ピクセル 以上の時にはコンテンツ（h１要素）の幅と高さを 1000px にして、表示領域の幅が 999ピクセル 以下の時はコンテンツの幅と高さを
2020年4月26日 17:22
Webページが小さく表示される理由とその対処法（続き）スマートフォンでは幅980ピクセル分が縮小表示される実はほとんどのスマートフォンのブラウザは、実際の表示領域の幅に合わせて表示するのではなく、表示領域の幅が980ピクセルあるものとしてWebページを表示させる（結果としてWebページはパソコンで見た時と同様のものが縮小表示されることのなる）もしこのような仕組みになっていなければ、スマー
2020年4月15日 22:20
メディアクエリー出力する媒体や状態ごとに、適用するCSSを変えることができる表示領域の幅などに応じてCSSを変えられる便利な機能メディアクエリーとはlink要素やstyle要素には「media属性」が指定できるmedia属性は、CSSの適用対象とする出力媒体を限定したい場合に使用するもの以下が指定できる・all（全ての機器）・screen（パソコン画面）・print（プリンタ
2020年4月11日 21:58
前回の続きフロートの不都合を解消する（１）実はこの問題を解消するシンプルで簡単な方法がある・フロートを含む親要素自体もフロートさせてしまう・ overflowプロパティで「 visible 」以外の値を指定するこの二つであるこうするだけで、フロートさせた要素の親要素は、フロートしたボックス全体を含むように拡張される親要素もフロートさせるということは、場合によってはさらにクリアす
2020年4月10日 23:32
clearfix についてフロートで不都合なことフロートをクリアするための特殊なCSSテクニック「clearfix」について「float プロパティ」や「clear プロパティ」は、元々画像などの横にテキストを回り込ませる目的で用意されたものなので、それを段組みのようにボックスを横に並べる目的で使用していると不都合が生じることがある例HTML<div id="contents">
2020年4月9日 23:46
その他のプロパティ・box-sizingプロパティ→widthおよびheight プロパティで設定する幅と高さの適用範囲を変更する・contentプロパティ→要素内容の前後にコンテンツを追加する・quotesプロパティ→ブラウザが表示させる引用符の種類を設定width・height プロパティの適用範囲の変更widthプロパティとheightプロパティは、ボックスの「要素内容を表
2020年4月8日 14:35
その他の要素主題の変わり目「hr要素」は元々は単純に横線を表示させるだけの空要素だったHTML5から変更され、線を表示させるのが目的ではなく、その部分で話題（または物語の場面など）が変わっていることを示すことが目的の要素となったセクションレベルでの大きな主題の大きな変わり目で使用するのではなく、段階レベルでの小さな変わり目に使用することが想定されている役割の変更はあったが、現在でも一般的
2020年4月7日 23:29
テーブル関連のプロパティ隣接するボーダーを１本の線にする一般的なブラウザでテーブルを表示させると、テーブル全体のボーダーの他に各セルのボーダーがそれそれ独立したボーダーとして個別に表示される「border-collapse プロパティ」を使用すると、それぞれの隣接するボーダーをまとめて１本の線にして表示させることができるborder-collapse に指定できる値・collapseテ
2020年4月6日 13:47
テーブルを構築する要素の続きセルを凍結させる「colspan属性」は、そのセルから右側に向かって、指定した数のセルを凍結する同様に、「rowsapn属性」は、そのセルから下方向に向かって、指定した数のセルを連結するこれに関しては文章で説明してもわかりにくいので、具体的なサンプルのソースコードで確認する実際には「連結する」というよりも、colspan属性またはrowspan属性を指定したセ
2020年4月5日 23:59
テーブル関連の要素テーブルを構築する要素テーブルの構造は、HTMLの中では最も複雑である基本的な構造は、リストの構造にさらにもう一種類の要素が加わるテーブルを作成するには、まずその全体を「table要素」のタグで囲うその中にはテーブルのセルが入るのだが、その内容が縦列または横列の見出しであるセルは「th要素」としてマークアップし、その内容がデータであるセルは「tb要素」としてマークアッ
2020年4月4日 08:37
ボックスに影をつける「box-shadow プロパティ」を使用すると、text-shadowプロパティ と同様の指定方法でボックスに影をつけることができるbox-shadow プロパティでは４つめの数値として影を拡張させる距離が指定でき、「inset」というキーワードを指定することで影をボックスの内部に表示させられるようにもなっているbox-shadow に指定できる値・inset影をボッ
