CSS

CSSで修飾

CSS

CSSで修飾 テキストに沿った見栄えを作る @charset "utf-8"; /* reset ----------------------------------------------- */ html, body, h1, h2, h3, p, ul, li, dl, dt, dd { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothi…

企業系サイト:トップページ

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

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

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

2カラムレイアウト基本演習

2カラムレイアウト基本 画像は適宜選択する Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コン…

positionによるレイアウト

CSS

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

思い通りに表示できない

トラブルシューティング 画像が表示されない スタイルシートが反映されない margin、padding が思い通りにならない 綴りミス 初心者のミスのほとんどが、この「綴りミス」です 「綴りミス」を発見するには Markup Validation Service(HTML文法チェック) CS…

Adobe Brackets の使い方

Adobe Brakets brackets.io インストール後の画面(文字サイズは、Ctrl+「+」で大きく変更可能) プロジェクトのルート化 「Getting Started」をクリック 管理したいフォルダーを選択(例:「myName」自分の名前をつけたフォルダー) クイックエディット ク…

ページ構築の手順

CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、1行…

1カラムレイアウト - 演習

CSS

CSSで1カラムレイアウト 「CSSでレイアウト - 基本」を踏まえて設定する 最低限の記述に徹する 例題テキスト 宮沢賢治作品 いてふの実 そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。 そして星が一杯です。けれども東の空はも…

CSS演習 - ナビゲーション・レイアウト

CSS

ナビゲーション 次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 ulとli、aの指定を理解する 擬似クラス(Pseudo-classes) 要素の性質スタイルを適用させたい場合に使います 主に…

文字の囲みと表の枠線

CSS

文字の囲み borderプロパティの値を指定する 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになります プロパティー意味 border-top要素の上の線 border-right要素の右の線 border-bottom要素…

ブロックレベル要素とインラインレベル要素

CSS

ブロックレベル要素 見出し(h1〜h6要素)、段落(p要素)、表(table要素)、リスト(ul、ol、dl要素)などが該当します ブロックレベル要素は、その前後で改行表示されます ブロックレベル要素は、デフォルト状態で親要素と同じ幅を持っています 親要素よ…

CSS基礎 - ★演習

CSS

演習 CSSの記述は、内部参照(embed)で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は不要 #91BC86 #BC908F #F5F5DB <body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン</p></body>…

文字指定とリセットCSS

CSS

文字指定 文字色と文字サイズを指定します 文字色 16進数:hexadecimal number #:number 0123456789ABCDEF(16個) RGBを2個ずつの数字を割り振る 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation) 例 #000000(黒) #FFFFFF(白) Hue(…

ボックスモデル

CSS

ボックスモデル HTMLタグでマークアップされた要素は1つの箱とみなされます ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される) 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的 パディング(padding) ボーダー辺に…

スタイルの継承と文字指定

CSS

スタイルの継承(inheritance) CSSには親要素から子要素へとスタイルが継承される仕組みがあります この仕組のおかげで、同じ指定を繰り返さなくても効率よく指定ができます <html lang="ja"> <head> <meta charset="utf-8"> <title>スタイルの継承</title> <style> body { color: red; } </style> </head> <body> <h1>bodyの子要素である見出し要素は、</h1></body></html>…

CSSとは

CSS

CSSとは Cascading Style Sheets 構造化された文書をどのように表現するのかを指定するための言語 文字の色、文字の大きさ、余白などのレイアウトの指定 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/…

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