うちやましょうたろう/成り上がり

どうも、「うちやましょうたろう」です！ ここでは日々の勉強を記録して、自分縛りと記録を…

うちやましょうたろう/成り上がり

どうも、「うちやましょうたろう」です！ ここでは日々の勉強を記録して、自分縛りと記録を目的に投稿しています。 気軽なフォローお待ちしてます！仲良くなりましょー！ ※言葉足らずやそもそも日本語が下手な部分はありますが、 おおめに見てくれると嬉しいですm(_ _)m

継続は力なり＃４８

条件に合致したときに使う画像について詳細に指定する方法sizes属性を使うと、メディアクエリーの条件に合致したときの表示幅が指定できる しかし条件に合致したときに使用する画像ファイルまでは指定できない。 例として、スマートフォン用とパソコン用では異なる画像（例えばトリミングの仕方を変えた画像など）を表示させたいような場合には、それでは困ってしまうことになる メディアクエリーの条件ごとに使用する画像やそれがどのピクセル密度向けか、といった情報を細かく指定したい場合には、次のよう

うちやましょうたろう/…

    • 継続は力なり＃４７

      出力先に合わせて異なるサイズの画像を表示させる方法（続き） ピクセル密度に合った画像だけを読み込ませる方法それでは、img要素で指定する画像は常に2倍サイズのものを使用すればいいのかと言えば、そういうわけでもない 例として iPhone 8 Plus のピクセル密度は 2.6倍であり、iPhone X なら3倍である それらを考慮に入れるのであれば、img要素には３倍サイズの画像を指定することになる しかし、もしそのようにすれば、ピクセル密度が 1倍・2倍・2.6倍 の機器

      うちやましょうたろう/…

      • 継続は力なり＃４６

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

        うちやましょうたろう/…

        • 継続は力なり＃４５

          Webページが小さく表示される理由とその対処法（続き） スマートフォンでは幅980ピクセル分が縮小表示される実はほとんどのスマートフォンのブラウザは、実際の表示領域の幅に合わせて表示するのではなく、表示領域の幅が980ピクセルあるものとしてWebページを表示させる （結果としてWebページはパソコンで見た時と同様のものが縮小表示されることのなる） もしこのような仕組みになっていなければ、スマートフォン向けに作られていない（パソコンで見ることを前提として作られた）Webペー

          うちやましょうたろう/…

        継続は力なり＃４８

        うちやましょうたろう/成り上がり

        マガジン

        • プログラミング日記
          49本
        • 創作小説
          3本
        • 旅行
          1本

        記事

          継続は力なり＃４４

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

          うちやましょうたろう/…

          継続は力なり＃４４

          うちやましょうたろう/成り上がり

          継続は力なり＃４３

          メディアクエリー出力する媒体や状態ごとに、適用するCSSを変えることができる表示領域の幅などに応じてCSSを変えられる便利な機能 メディアクエリーとは link要素やstyle要素には「media属性」が指定できる media属性は、CSSの適用対象とする出力媒体を限定したい場合に使用するもの 以下が指定できる ・all（全ての機器） ・screen（パソコン画面） ・print（プリンタ） ・projection（プロジェクタ） ・tv（テレビ） ・handheld

          うちやましょうたろう/…

          継続は力なり＃４３

          うちやましょうたろう/成り上がり

          継続は力なり＃４２

          前回の続き フロートの不都合を解消する（１）実はこの問題を解消するシンプルで簡単な方法がある ・フロートを含む親要素自体もフロートさせてしまう ・ overflowプロパティで「 visible 」以外の値を指定する この二つである こうするだけで、フロートさせた要素の親要素は、フロートしたボックス全体を含むように拡張される 親要素もフロートさせるということは、場合によってはさらにクリアする必要が出てくる 問題を一階層外側に追いやっただけの状態になる可能性がある 一般

          うちやましょうたろう/…

          継続は力なり＃４２

          うちやましょうたろう/成り上がり

          継続は力なり＃４１

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

          うちやましょうたろう/…

          継続は力なり＃４１

          うちやましょうたろう/成り上がり

          継続は力なり＃４０

          その他のプロパティ・box-sizingプロパティ →widthおよびheight　プロパティで設定する幅と高さの適用範囲を変更する ・contentプロパティ →要素内容の前後にコンテンツを追加する ・quotesプロパティ →ブラウザが表示させる引用符の種類を設定 width・height プロパティの適用範囲の変更widthプロパティとheightプロパティは、ボックスの「要素内容を表示する領域」の幅と高さを設定するプロパティ CSS3からは、「box-sizin

          うちやましょうたろう/…

          継続は力なり＃４０

          うちやましょうたろう/成り上がり

          継続は力なり＃３９

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

          うちやましょうたろう/…

          継続は力なり＃３９

          うちやましょうたろう/成り上がり

          継続は力なり＃３８

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

          うちやましょうたろう/…

          継続は力なり＃３８

          うちやましょうたろう/成り上がり

          継続は力なり＃３７

          テーブルを構築する要素の続き セルを凍結させる「colspan属性」は、そのセルから右側に向かって、指定した数のセルを凍結する 同様に、「rowsapn属性」は、そのセルから下方向に向かって、指定した数のセルを連結する これに関しては文章で説明してもわかりにくいので、具体的なサンプルのソースコードで確認する 実際には「連結する」というよりも、colspan属性またはrowspan属性を指定したセルが、指定された分だけ拡張されて大きくなると言った方が正しい セルが拡張される事

          うちやましょうたろう/…

          継続は力なり＃３７

          うちやましょうたろう/成り上がり

          継続は力なり＃３７

          テーブル関連の要素 テーブルを構築する要素テーブルの構造は、HTMLの中では最も複雑である 基本的な構造は、リストの構造にさらにもう一種類の要素が加わる テーブルを作成するには、まずその全体を「table要素」のタグで囲う その中にはテーブルのセルが入るのだが、その内容が縦列または横列の見出しであるセルは「th要素」としてマークアップし、その内容がデータであるセルは「tb要素」としてマークアップする そして各セルは横一列ごとに「tr要素」でグループ化する 以下の画像がH

          うちやましょうたろう/…

          継続は力なり＃３７

          うちやましょうたろう/成り上がり

          継続は力なり＃３６

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

          うちやましょうたろう/…

          継続は力なり＃３６

          うちやましょうたろう/成り上がり

          継続は力なり＃３５

          フォーム関連プロパティ リサイズ可能にする一般的なブラウザでtextarea要素を表示させると、ボックスの右下をドラックすることで大きさが変えられる 適用対象がテキスト入力欄に限定されているわけではないが、このようにボックスの大きさをユーザーが変更できるようにするかどうかは「resize プロパティ」で設定できる resize に指定できる値・both 幅と高さの両方をリサイズ可能にする ・horizontal 幅だけをリサイズ可能にする ・vertical 高さだ

          うちやましょうたろう/…

          継続は力なり＃３５

          うちやましょうたろう/成り上がり

          継続は力なり＃３４

          メニューを構成する要素メニューは、基本的なフォームの部品の中では唯一複数の要素の組み合わせで作られている部品 メニューの構造は、リストと同じようになっていて、全体を「select要素」で囲い、各選択肢は「option要素」で指定 select要素に指定できる属性・name="部品の名前" このフォーム部品の名前を指定 選択されたデータは、この名前とペアで送信される ・size="行数" 一度に見られる項目の数（行数）を指定 この属性を指定すると、メニューではなくリストボ

          うちやましょうたろう/…

          継続は力なり＃３４

          うちやましょうたろう/成り上がり