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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

CSS基礎

グリッドレイアウト

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

第2回実技試験

1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 2、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。 3、webアイコン(Font Awesome)を使う事 4、適切な余白の設定 5、各画像を指定され…

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

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

第1回実技試験の内容

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

複数ページの制作

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

2カラム演習問題

ヘッダー要素の幅960px 高さ350px ナブ要素は幅960px高さ50px コンテント要素の幅600px 高さ400px フッター要素の高さ100px 各要素の空き10px 各要素の背景色は適宜

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

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

うちのにゃんこ|使用素材

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

positionの使い方

<style> .container { position:relative; } .box { position:absolute; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body>

リセットCSS

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

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>

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

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

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

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

CSS基礎2

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

CSS基礎

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