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

webサイト制作の勉強に関する解説ブログです。

CSS基礎

グリッドレイアウト

グリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザイン…

2カラムの演習課題|コーポレートサイト

作例 http://yachin29.com/school/Stylesheet_Company/ 使用テキスト サンプルスタイルシートカンパニー トップページ ソリューション 実績紹介 パートナー カスタマー 会社概要 お問い合わせ あなたにとっての最高のパートナーであるために サンプルスタイ…

第1回実技試験の内容

今回の制作の仕様 header要素の幅1000px高さは350px、同じサイズの画像を自身で制作し、「FELICA kitchen」の文字を修飾し画像に入れる。 cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 h1はテキストで「FELICA kitchen」を挿入し、cssで…

floatを使ったレイアウト演習

使用するテキスト Cafe de Felica Home Concept Menu Access Cafe de Felicaは、 食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、スペイン料理に「東京」の エッセンスを取り入れたモダンスパニッシュ。 店内は、新進気鋭のアー…

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

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

複数ページの制作

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

CSS復習問題

フロートを使った文字の回り込み 使用テキスト Herb Kitchen イタリアの家庭料理のオリジナルレシピを紹介します。 タコのカルパッチョ 画像 たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。 レモン果…

dlのレイアウト

ニュースリリース 2017年11月7日 「キリン 氷結®ストロング 南高梅(なんこううめ)<期間限定>」新発売 2017年11月7日 「ジョニーウォーカー トリプルグレーン アメリカンオーク 10年」を数量限定で発売2017年11月7日 「『キリン 午後の紅茶』学校では教え…

2カラム演習問題

ヘッダー要素の幅960px 高さ350px コンテント要素の幅600px 高さ400px フッター要素の高さ50px 各要素の空き10px 各要素の背景色は適宜 ボタンは5つを均等の幅で設置 ボタンの高さは50px ナビゲーションボタンをホバーした際に文字色と背景色が変わるように

positionの使い方

CSSスプライト

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

フロートを使ったレイアウト

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

隠し文字の設定

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。ここで絶対にやっては…

font-familyの指定 2018年版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味し…

CSS演習問題

演習1 <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: …</meta></head></html>

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

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

CSS基礎2

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

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

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

リセットCSS

各ブラウザ(IE、FireFox、Chrome、safariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…

CSS基礎

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