マガジンのカバー画像

プログラミング日記

49
運営しているクリエイター

#毎日note

継続は力なり#47

継続は力なり#47

出力先に合わせて異なるサイズの画像を表示させる方法(続き)

ピクセル密度に合った画像だけを読み込ませる方法それでは、img要素で指定する画像は常に2倍サイズのものを使用すればいいのかと言えば、そういうわけでもない
例として iPhone 8 Plus のピクセル密度は 2.6倍であり、iPhone X なら3倍である
それらを考慮に入れるのであれば、img要素には3倍サイズの画像を指定することに

もっとみる
継続は力なり#46

継続は力なり#46

出力先に合わせて異なるサイズの画像を表示させる方法従来のパソコン画面の解像度は長いあいだ 96ppi *(1) 程度だった
2010年に Apple が発表した iPhone 4 の画面( Retinaディスプレイ)の解像度は、一気にその倍以上になった *(2)
それ以降、さらに高い解像度の機器もどんどん登場している
(パソコンのディスプレイでも同様に高解像度のものが増えている)

*(1)
pp

もっとみる
継続は力なり#44

継続は力なり#44

スマートフォンの画面に対応させる

Webページが小さく表示される理由とその対処法メディアクエリーを使って、パソコン画面向けのCSSとスマートフォンのような小さな画面向けのCSSを別々に指定するサンプルを見ていく
以下のサンプルは、表示領域の幅が 1000ピクセル 以上の時にはコンテンツ(h1要素)の幅と高さを 1000px にして、表示領域の幅が 999ピクセル 以下の時はコンテンツの幅と高さを

もっとみる
継続は力なり#45

継続は力なり#45

Webページが小さく表示される理由とその対処法(続き)

スマートフォンでは幅980ピクセル分が縮小表示される実はほとんどのスマートフォンのブラウザは、実際の表示領域の幅に合わせて表示するのではなく、表示領域の幅が980ピクセルあるものとしてWebページを表示させる
(結果としてWebページはパソコンで見た時と同様のものが縮小表示されることのなる)

もしこのような仕組みになっていなければ、スマー

もっとみる
継続は力なり#43

継続は力なり#43

メディアクエリー出力する媒体や状態ごとに、適用するCSSを変えることができる表示領域の幅などに応じてCSSを変えられる便利な機能

メディアクエリーとは

link要素やstyle要素には「media属性」が指定できる
media属性は、CSSの適用対象とする出力媒体を限定したい場合に使用するもの

以下が指定できる

・all(全ての機器)
・screen(パソコン画面)
・print(プリンタ

もっとみる
継続は力なり#42

継続は力なり#42

前回の続き

フロートの不都合を解消する(1)実はこの問題を解消するシンプルで簡単な方法がある

・フロートを含む親要素自体もフロートさせてしまう
・ overflowプロパティで「 visible 」以外の値を指定する

この二つである
こうするだけで、フロートさせた要素の親要素は、フロートしたボックス全体を含むように拡張される

親要素もフロートさせるということは、場合によってはさらにクリアす

もっとみる
継続は力なり#41

継続は力なり#41

clearfix について

フロートで不都合なことフロートをクリアするための特殊なCSSテクニック「clearfix」について
「float プロパティ」や「clear プロパティ」は、元々画像などの横にテキストを回り込ませる目的で用意されたものなので、それを段組みのようにボックスを横に並べる目的で使用していると不都合が生じることがある



HTML

<div id="contents">

もっとみる
継続は力なり#40

継続は力なり#40

その他のプロパティ・box-sizingプロパティ
→widthおよびheight プロパティで設定する幅と高さの適用範囲を変更する

・contentプロパティ
→要素内容の前後にコンテンツを追加する

・quotesプロパティ
→ブラウザが表示させる引用符の種類を設定

width・height プロパティの適用範囲の変更widthプロパティとheightプロパティは、ボックスの「要素内容を表

もっとみる
継続は力なり#39

継続は力なり#39

その他の要素

主題の変わり目「hr要素」は元々は単純に横線を表示させるだけの空要素だった
HTML5から変更され、線を表示させるのが目的ではなく、その部分で話題(または物語の場面など)が変わっていることを示すことが目的の要素となった
セクションレベルでの大きな主題の大きな変わり目で使用するのではなく、段階レベルでの小さな変わり目に使用することが想定されている
役割の変更はあったが、現在でも一般的

もっとみる
継続は力なり#38

継続は力なり#38

テーブル関連のプロパティ

隣接するボーダーを1本の線にする一般的なブラウザでテーブルを表示させると、テーブル全体のボーダーの他に各セルのボーダーがそれそれ独立したボーダーとして個別に表示される
「border-collapse プロパティ」を使用すると、それぞれの隣接するボーダーをまとめて1本の線にして表示させることができる

border-collapse に指定できる値・collapse

もっとみる
継続は力なり#37

継続は力なり#37

テーブルを構築する要素の続き

セルを凍結させる「colspan属性」は、そのセルから右側に向かって、指定した数のセルを凍結する
同様に、「rowsapn属性」は、そのセルから下方向に向かって、指定した数のセルを連結する
これに関しては文章で説明してもわかりにくいので、具体的なサンプルのソースコードで確認する
実際には「連結する」というよりも、colspan属性またはrowspan属性を指定したセ

もっとみる
継続は力なり#37

継続は力なり#37

テーブル関連の要素

テーブルを構築する要素テーブルの構造は、HTMLの中では最も複雑である
基本的な構造は、リストの構造にさらにもう一種類の要素が加わる

テーブルを作成するには、まずその全体を「table要素」のタグで囲う
その中にはテーブルのセルが入るのだが、その内容が縦列または横列の見出しであるセルは「th要素」としてマークアップし、その内容がデータであるセルは「tb要素」としてマークアッ

もっとみる
継続は力なり#36

継続は力なり#36

ボックスに影をつける「box-shadow プロパティ」を使用すると、text-shadowプロパティ と同様の指定方法でボックスに影をつけることができる
box-shadow プロパティでは4つめの数値として影を拡張させる距離が指定でき、「inset」というキーワードを指定することで影をボックスの内部に表示させられるようにもなっている

box-shadow に指定できる値・inset
影をボッ

もっとみる
継続は力なり#35

継続は力なり#35

フォーム関連プロパティ

リサイズ可能にする一般的なブラウザでtextarea要素を表示させると、ボックスの右下をドラックすることで大きさが変えられる

適用対象がテキスト入力欄に限定されているわけではないが、このようにボックスの大きさをユーザーが変更できるようにするかどうかは「resize プロパティ」で設定できる

resize に指定できる値・both
幅と高さの両方をリサイズ可能にする

もっとみる