レスポンシブWebデザイン入門 ascii.jp HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>トップ|allWeb 豆はカラダにイイ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <h1></h1></header></body></html>
レスポンシブWebデザインの誕生 Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です alistapart.com レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変…
画面サイズ PCの推奨サイズ 推奨サイズは「1920*1080」 gs.statcounter.comシェア率の高いデバイスの等倍サイズ 実際には、デスクトップ全体にブラウザを使用することは少ないと思われるので「1280pxまたは1440px」で作成します スマートフォンの推奨サイズ …
マルチデバイスに対応するときの指標 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました Google モバイルガイド マルチデバイス対応において求められる考え方や技術的な手法がまとめら…
Part３ - ２カラムページ（CSS ） テキストとは別のワークフローで記述してみる CSSはresetも含めて１ファイルで記述 読み込みファイル数を少なくする <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】FARM CAPYZOU</title> <link rel="stylesheet" href="css/style.css"> </head> reset CSS @c…</html>
Part３ - ２カラムページ（マークアップ） マークアップ HTMLで文書構造を作成 テキスト内容のアウトラインを見ると以下のようになります aside部内のnav要素内の「h2」は「h3」として判断されています ※asideにnavタグ使用は適切ではないため、divタグに変…
富士山の紹介 （PC用）- CSS リセット ブラウザーの持つCSSの初期値を「0」にする @charset "UTF-8"; /* -------------------------------------- reset -------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } u…
富士山の紹介（PC用）- HTML クラス名の付与 クラス名は、外側の囲みから内側に向かって付与する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】富士山の紹介</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
富士山の紹介（PC用）- ワイヤーフレーム レスポンシブWebデザインにおけるHTML・CSSのコーディングテクニック chot.design
2カラムレイアウト(１) ロゴは、幅300pxで作成する テキストは、架空 コンテンツ幅「960px」 unsplash.com ウェブサンプル株式会社 ホーム 会社概要[f:id:web-0220:20230206233859j:plain] 事業内容 アクセス お問い合わせ 私たちはWebで価値を想像する会社…
CSSによるページ構築の手順 入力内容のチェック 入力内容（文法）チェックは、必須です W3C Markup Validation Service（HTMLのチェック） W3C CSS Validation Service（CSSのチェック） 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブ…
２カラムページ（文書構造） テキストP.096〜 文書構造（セマンティックなマークアップ） HTML Living Standard（日本語訳） セマンティックWeb テキストP.037 検索サイトに正確な情報を提示する Webアクセシビリティも考慮する Webサイトを構成するパーツ …
ワンカラム演習 適宜完成させましょう 観光ガイド 情報を1つの文脈で伝えることができる スマートフォン画面のデザインと統一感が生まれる 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 気候は亜熱帯気候で、1年…
背景画像 画像解説が必要な場合：img要素 画像解説が不要な場合：backgroundプロパティ プロパティ意味値初期値 background-color背景色カラーコード｜カラーネーム｜transparenttransparent（透明） background-image背景画像url（ファイルパス）｜nonenone…
ナビゲーションの種類（PC版） ボタン形式（面） ロゴとナビゲーションを横に並ぶ ボタン形式（面） <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1 class="logo"><a href="#"></a></h1></header></div></body></html>
Flexboxで横並び <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="box"> <img src="img/01.jpg" alt=""> <p>左の画像の説明</p> <…</div></div></body></html>
Flexboxで横並び シンプルな横並び 幅の計算は、box-sizing: border-box; を前提にする 親要素にpaddingがついている場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flexboxで横並び</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <…</body></html>
Flexboxアイテムで指定できるプロパティ order：並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow：伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値（整…
justify-content：水平方向の位置 justify-content: flex-start（デフォルト） .container { display: flex; justify-content: flex-start; } justify-content: flex-end .container { display: flex; justify-content: flex-end; } justify-content: center…
Flexboxとは CSS3 Flexible Box (可変ボックス) CSS Flexible Box Layout Module Level 1 ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にするもの flex：融通のきく、柔軟なとい…
Flexbox 「display: flex;」で、要素を横並びにできます 「リストや画像を横並びにしたい」 「要素間の余白を均等にして、はみ出たら折り返したい」 「表示する順番を逆からにしたい」 「画像とテキストを左右交互に配置したい」 Flexboxの性質 以下の性質が…
要素の横並び displayプロパティの初期値 block inline inline-block none display: block <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display: block</title> <style> /*--…</meta></meta></meta></head></html>
擬似クラス 特定の状態に対してのみスタイル（CSS）が反映されるセレクタを作る :hover 主にマウスカーソルの動作に対して使われる擬似クラスです マウスカーソルがホバーした時（要素の上に乗った時）にスタイルを反映させる <p><a href="#">テキストリンク</a></p> a { color: inh…
リセットCSS ブラウザのデフォルトスタイル（初期値）を解除するためのCSSは「リセットCSS」と呼ばれ、世界中でいろいろな手法が試されています。 目的は、各ブラウザが持つ「ボックスモデルの値」を初期化すること 以下の例は、最小記述の resetCSS の例に…
「ユニバーサルセレクタ」のデメリット ブラウザのレンダリングが遅くなる。 良いデフォルトのCSSをリセットしてしまう。 フォームの表示がおかしくなるブラウザがある。 とされてきました。 検証しているサイトがあるので紹介します。levelup.gitconnected.…
演習 CSSの記述は、内部参照（embed）で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は300px #006AB8 #BAD4EB <body> <h1>background-colorの設定</h1> <p>見出しには濃いめの色を背景に指定し、文字を白抜</p></body>…
ブロックレベル要素とインラインレベル要素 ブロックレベル要素の特徴 テキストP.076〜P.077 要素が縦に並ぶ（その前後で改行表示されます） 幅と高さを指定できる（デフォルト状態で親要素と同じ幅を持っています） 余白を自由に調整できる 要素の配置を指…
文字の囲み borderを使用して、要素に枠線をつける borderプロパティの値を指定する セレクタ { boder: 線の太さ, 線の種類, 線の色 ; } 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになり…
文字設定 - font 文字の修飾 ページ全体に反映したい場合は「body」に指定します（継承） 文字のプロパティ color : 文字の色 font-size : 文字の大きさ font-family : フォントの種類 font-weight : 文字の太さ font-style : 文字のスタイル line-height : …
ボックスモデル テキストP.076〜 HTMLタグでマークアップされた要素は１つの箱とみなされます HTMLの要素は4つの領域を持っています 表示領域 要素の内側の余白（padding） 要素の外側の余白(margin) paddingとmarginの境界線(border) 記述するプロパティの…
