求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

HTML+CSS実践

カラムレイアウト- 提出課題

提出課題 以下のレイアウトを作成し、各自のサーバーにアップロードしURLを提出すること グリッド設計 <html lang="ja"> <head> <meta charset="UTF-8"> <title>名前 | 8月1日提出課題</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> </link></meta></head></html>

Flexboxを使ったレイアウト - 実践

Flexboxを使ったレイアウト - 実践 <html lang="ja"> <head> <meta charset="UTF-8"> <title>池袋珈琲</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> <link rel="stylesheet" href="css/sample.css"> </head> <body> </body></html>

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい logo.png(透過PNG 幅200px) 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Position Cafe</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> </link></meta></head></html>

複数ページのリンクを作成

複数ページのリンクを作成 「season」フォルダーを作成 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>四季の風景</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

2カラムレイアウト - 実践

2カラムレイアウト - 実践 Mont-Saint-Michel フランスの旅フランス国旗 モンサンミシェル フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねてい…

文字をpositionで配置

文字をpositionで配置 背景色を不透明度80% <html lang="ja"> <head> <meta charset="UTF-8"> <title>文字ボックスを配置</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> <style> html,body,p { margin: 0; padding: 0; line-height…</link></meta></head></html>

floatを使った回り込み

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

floatを使ったレイアウト基礎

floatとは テキストP.104 浮く(浮動状態) floatは要素を横に並べたり、文字を回り込ませたいときに指定するプロパティ プロパティの指定 プロパティの指定 挙動 float: left; 指定した要素を左に浮き上がらせて寄せて、次の要素を左方向にあとに続いている…

作例

マークアップ例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>

マークアップ - 実習

実習 テキストP.020〜033 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証(バリデート)しながら修正をしていきます ★うちのにゃんこ★ 我が…

2カラムレイアウト-実践(企業系サイトトップページ作成)

2カラムページ設計 定義 全体は、.conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50px」 「トップページ TOPPAGE」「ソリューション SOLUTION」「実…

CSSレイアウト - HTML文書構造

THAI-NAMA floatを使ったレイアウト THAI-NAMA CONCEPT MENU ACCESS CONTACT 生春巻き THAI-NAMAは タイ風の家庭的な料理をご提供しているお店です。 季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。 NEWS 2018/12/15 冬のメニ…

CSSレイアウト - うちのにゃんこ(CSS)

レイアウト用のdiv要素を追加 「section」要素は、正しく使用しないとツリー構造が崩れます 迷ったら「div」要素を、使用しましょう 基本的には「クラス名」をつけます にゃんこ紹介にはクラス名を使う 同じレイアウト(CSS)なので、必ず「クラス名」を使い…

CSSレイアウト - うちのにゃんこ(HTML)

テキスト テキスト内容にそってマーアップ 画像は、テキストに書いてあるURLからダウンロードする マークアップ - 実習手順 テキストP.020〜033 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います 最初からテキストを真似る…