HTML,CSS
ここではフォーム作成に使えるタグ(<input type="email">など）について説明しています。
こちらです。ここではCSSルールが適用される優先順位ついて説明しています。
こちらです。ここではoverflowプロパティついて説明しています。
こちらです。ここではtableついて説明しています。
こちらです。ここではborderプロパティについて説明しています。
こちらです。「font-size,font-style,font-weightプロパティについて」
こちらです。「CSSにおける背景画像を利用したデザインついて」| About design using background image in CSS
text-shadowやパーツを重ねる設定について説明しています。
こちらです。「グラデーション、円形で囲むデザイン」| Gradation, circular design
background-image: linear-gradientの使い方、border-radiusの使い方がポイントです。
こちらです。「リンクを横に並べたメニューの作り方」| How to make a menu with links arranged side by side
border-right、またfirst-child を使用しています。
こちらです。「サムネイル画像の横にテキストを並べたメニューの作り方」| How to make a menu with text next to the thumbnail image
画像とテキストの間隔をとるためのmargin-leftを使っています。
こちらです。「リストマークを画像で表示したメニュー」| Menu with list mark displayed as an image
contentで画像を指定。また画像表示位置を自由に指定するためpositionを「absolute」を設定。基点とするためのpositionをrelativeと指定してます。
こちらです。「画像にテキストを回り込ませたレイアウト」| Layout with text wrapped around the image
floatと::after疑似要素とclearを使い解除する方法です。
こちらです。「ヘッダー画像にテキストを重ねたレイアウト」| "Layout with text overlaid on header image"
background-positionについて説明しています。
こちらです。「ヘッダー画像を表示したレイアウト」| "Layout displaying header image"
vertical-align: bottomの使い方が重要です。
こちらです。「ヘッダーの基本レイアウトついて」| "About the basic layout of the header"
max-widthの使い方は大切ですね。
こちらです。「floatを利用したヘッダーのレイアウト」| "Layout of header using float"
いろいろ使う場面が多いfloat. 使い方を覚えておいて損はありません。
こちらです。「ヘッダーの基本レイアウトついて」| "About the basic layout of headers"
vertical-alignをマイナス設定にし、ロゴ画像の表示位置をベースラインより下にずらすテクニックです。
こちらです。「疑似クラス、背景画像を繰り返すbackground-repeatプロパティについて」| "Pseudo class, background-repeat property that repeats background image"
ちょっと難しいですが、大事なので覚えておいて損はないです。
こちらです。「ページの特定の場所にリンクする。またCSS、主なセレクタと書き方ついて」| "Link to a specific location on the page. Also CSS, main selectors and how to write"
「特定の場所にリンクする」は覚えておくと便利です。
こちらです。「特殊な文字の入力、代表的なタグ、テキストを修飾するための代表的なタグ」を掲載しました。| Input of special characters, typical tags, typical tags for modifying text
使う頻度も多いので覚えておくべきことですね。
こちらです。video、audioタグを使って動画、音声の掲載を勉強し、作った作品を掲載しました。
動画が載っているサイトはよく見かけるようになりました。載せるにはそれ用のタグを使用します。これを覚えておくと個人でもスマホで撮ったたまった画像などを整理して「動画アルバム」も作れますね。 こちらです。勉強した本「文系でもプログラミング副業で月10万円稼ぐ！」こちら
スマホで撮影した動画をvideo、audioタグを使って作品を掲載しました。
こちらです。CSSのdisplay:flexについて復習しました。
たまに復習することも大切ですね。忘れていたことを思い出させてくれます。こんなふうに横に並べることが出来れば作れるデザインの幅も広がります。 簡単に作ってみた作品はこちらです。 このスキルはこちらの著書「スラスラわかるHTML＆CSSのきほん」から復習してみました。本を買っておくといつでも手軽に復習できていいですね。CSSのmin,max,clampについて学んだことを作ってみました。
便利な機能ですね。メディアクエリの細かな設定も不要になり、今後も活用していきたいと思いました。今回しまぶーさんのこちらの動画から学ばせてもらいました。本当にわかりやすく作ってもらって感謝です。自分なりに作ってみた作品はこちらです。王冠スタイル
しまぶーさんの動画から「王冠スタイル」を作ってみました。何回か作っているの慣れてきました。昔はこのスタイルを作るのが難しかったみたいですが、今は機能が増えて簡単に作れるようになったようですね。 ヤフーのトップ画面のような感じです。 私でも作ることができました。またパソコンで画面の幅を狭めるとスタイルが適応するようにメディアクエリも使っています。 こちらのリンクからその作品を覗いてみてください。
（スマホでは王冠スタイルは見れません。） しまぶーさんの動画から学べますのでぜひ、こちらもご訪問ください。
王冠スタイルを作る動画
| 名前 | 好きな食べ物 | 嫌いな食べ物 |
|---|---|---|
| Aさん | ラーメン | 特になし |
| Bさん | ケーキ | 梅干し |
| Cさん | 焼肉 | たまご |
| Dさん | 白いご飯 | ケーキ |
このブログでの2コラムレイアウト（メイン領域、サブ領域）、パンくずリスト、背景色などは著書「WEBクリエーター能力認定試験、エキスパート」を利用しました。
ギャラリーレイアウトと呼ばれる技法にて。
著書「WEBクリエーター能力認定試験、エキスパート」を参考。
