HTML+CSS レイアウト

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

positionを使ったレイアウト 以下のサイトを作成しなさい ナビゲーションボタン「幅:160px、高さ:50px、色帯:4px」 bg.jpg(幅800px、高さ250px) logo.png(透過PNG 幅200px) CSSシグネチャー(signature) bodyなどにidやclassを設定し、 CSSでページ…

positionによるレイアウト

positionとは テキストP.130〜136 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

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

2カラムページ設計 bodyの背景画像を設定する場合 headerの背景画像を設定する場合 定義 全体は、.conatiner幅「952px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「136px」ピクセルのナビゲーションボタンを7個作成 高さは「50…

floatを使った回り込み

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

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

テキスト 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します! 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる(白キジトラ・オス) 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1K…

相対パスと絶対パス

相対パスと絶対パス 「パス」とは、「ファイルの場所」を示すための大切な仕組みです 相対パス relative path 今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを指定します 相対パスを記述 同じ階層内にあるファイル →ファイル名 で記述 同…

Webページを作るワークフロー

プロジェクトを作成 管理するフォルダーを作成(名前は適宜) 新規HTMLドキュメントを作成(index.html) 新規CSSファイルを作成(style.css) 文書構造を記述 index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> コンテンツを記述 body内はコンテンツによってマークアップ…

横に並べるレイアウト

横に並べるレイアウト floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTMLソースコードの順序と…

求職者支援訓練 フェリカテクニカルアカデミー