webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

CSS基礎

2カラムレイアウトの演習

演習1 使用するテキスト 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な…

第1回実技試験の内容

作例 今回の実技試験の概要 フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事 画像は各自で用意し指定されたサイズにトリミングする事 headerの幅960px高さは350px。背景画像に「CAFE de FELICA」の文字を修飾し入れる cssファイル…

2カラム演習問題

ヘッダー要素の幅960px 高さ350px ナブ要素は幅960px高さ50px コンテント要素の幅600px 高さ400px(メインコンテンツ) フッター要素の高さ100px 各要素の空き10px 各要素の背景色は適宜 a要素をホバーした際に背景色と文字色が変わるように設定する

CSS演習問題 回答

<body> style要素 style element HTML文書内にまとめて設定します。 </body> 解答例 <html lang="ja"> <head> <meta charset="utf-8"> <title>演習問題1</title> <style> html,body,h1,h2,p { margin: 0; padding: 0; line-height: 1.0; } body { } h1 { color:#0e8d87; padding: 20px 0; } h2 { background: #355584; color: #FFF…</meta></head></html>

複数ページの制作

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のようにページ毎にフォルダーを…

CSS演習問題

演習1 <body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習2 <body> About wine Chianti Classico Riserva 1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあり</body>…

positionの使い方

positionとは要素の位置を動かす事の出来るプロパティで、positionを使用する事でより自由なレイアウトが作れるようになります。 さらに、「z-index」を指定する事で要素の重なり順を変える事が出来ます。 <style> .container { position:relative; } .box { positi</style>…

うちのにゃんこ

以前マークアップしたhtmlデータにcssを追加してページを完成させてしまいましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <h1>★<span>うちのにゃんこ</span>★</h1> <p id="lead">我が家のアイドル、にゃんこ達を紹介します!</p> <ul> <li></li></ul></div></body></html>

CSS-spriteを使った3カラムレイアウト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。 メリット ・画像の読み込みが1回で済むので、サイトの…

2カラムレイアウトの作成

<html lang="ja"> <head> <meta charset="UTF-8"> <title>2カラムレイアウトの作成2</title> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet"> <style> html,body,h1,ul,li{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; color: #…</link></meta></head></html>

floatを使ったレイアウト

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく自由なレ…

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

HTMLには色々な要素(h1とかp)がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。 この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じて…

font-familyの指定 2019年版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 初期設定で使われる標準フォントはPCやOSのバージョンによって違うので、確実に同じフォントで表示させた…

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。 margin marginとは要素の外側に出来る隙間の事です。 padding paddingとは要素の内側に出来る隙間です。言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトで…

divの使い方と1カラムレイアウト

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

CSS基礎

CSS(Cascading Style Sheets) CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…