2021-12-01から1ヶ月間の記事一覧
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CAFE de FELICA</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
自宅学習 code-step.com
saruwakakun.com pulpxstyle.com
learndigital.withgoogle.com
webサイト制作 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フェリカ｜課題まとめページ</title> </meta></meta></meta></head></html>
レスポンシブデザイン 今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 641px～959px スマート…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transitionのアニメーション2</title> <style> html,body,p,h2{ margin: 0; padding: 0; } img{ vertical-align: bottom;…</meta></meta></meta></head></html>
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 www.uniad.co.jp バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズ…
css3 レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSで…
qiita.com
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mouse-overイベント2</title> <style> html,body,h1,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } h…</meta></meta></meta></head></html>
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
www.ditjapan.com まずはhtmnl5のvideoタグのプロパティを覚えましょう src="" (URL)ファイルのURLheight="" 数値 要素の高さwidth="" 数値 要素の幅autoplay="" autoplay 自動的に再生を行います。controls="" controls 動画再生をコントロールするUIを表示…
使用するテキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、 関係性を構築するためのストーリーの設計とUXデザインを…
作例PCレイアウト SPレイアウト cssは外部参照で記述すること cssに適切なリセットをかける事 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを横に並べる 画像を自身で用意しトリミングしフルード…
カラムレイアウト www.weblab.co.jp divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレ…
演習１ <body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習２ <style> html,body,h1,h2,p{ margin: 0; padding: 0; } div{ width: 600px; background-color: mediumseagreen; padding: 10px; } h1{ color: #FFF; padding: 20px 0; } h2{ background-…
htmlの要素（タグ）はh1など特別な物以外は基本的には複数使用する事が出来ます。例えばpタグが4つある場合、それぞれのp要素に名前を付ける事で判別する事が出来るようになります。 idの使い方 idには「ファイル内で同じidは2回使えない」と「1つの要素に付…
