職業訓練10日目になりました。今日からCSSで装飾も始まっていきます。
ぜひ読んでほしい人
- 異業界へ転職考えてる人
- 職業訓練に行こうとしてる人
- 新しく働き始めようか考えてる人
『毎日更新!!』とかぶち上げると大体がだらたらした只の日記になるので、更新頻度は特に決めません。
職業訓練訓練を受けるまでのステップや、基本的な制度についてはこちらをご確認ください。
【読めばわかる】職業訓練って?倍率高くても受かる?費用やお金は?
先日、職業訓練校の入学許可が出たのでその流れなどについてまとめてみました。
なお、この記事を読むおススメのタイミングについてですが、
在職中だが転職を考えている
退職は決まったが、次がまだ決まっていない
退職した後で、現在次の仕事に向けて準備...
午前の部
CSSの授業が始まると、HTMLとCSSの両方を触ることになるのでどんどん新しい事が増えていくので授業のスピード自体が早くなってきました。
時限 | 概要 | 内容 |
---|---|---|
1限 | font関連とbackgroundプロパティについて | font-familyの種類やfont-sizeの指定方法、ブロックレベル要素とインライン要素にそれぞれ背景色を付けながら要素の性質について確認します。他にもbackground-imageを使って背景画像の指定などについても触れていきます。 |
2限 | background-imageの詳細 | background-repeatやbackground-position、background-attachmentについて触れていきます。widthやheightの設定についても講義内で操作していきます。 |
3限 | linear-gradientプロパティの説明(線形グラデーション) | background-image:linear-gradient()の使い方についての講義です。グラデーションに関しては授業ではlinear-gradientしか触れられないのと、ベンダープレフィックスについてほとんど触れられないので以下のページで予備知識は付けたほうがいいかなと思います。 |
linear-gradient(線形グラデーション)についてはこちら↓をご覧ください。
【CSS】linear-gradientの使い方【値、角度など】
今回はlinear-gradientについてみていきます。
linear-gradientって何?
対応ブラウザについて
linear-gradientの値の書き方
グラデーションの向き...
radial-gradient(円形グラデーション)についてはこちら↓をご覧ください。
【CSS】radial-gradientの使い方【円の位置など】
今回はradial-gradientについて見ていきます。
radial-gradientとは?
対応ブラウザについて
radial-gradientの値
円の形状
円の大きさ...
ベンダープレフィックス(ブラウザ毎のタグやプロパティの対応状況)についてはこちら↓をご覧ください。
『ベンダープレフィックス』の知識と『Can I Use』の使い方
今回はベンダープレフィックス(Vendor prefix)について見ていきます。
ベンダープレフィックスって?
対応ブラウザを調べる方法
どれぐらいの割合でOKかみてみる
あえて語弊を...
午後の部
borderプロパティや<table>タグの装飾、<ol>タグについてと<li>タグをinlineで横に並べるといったところまで授業が進みます。
時限 | 概要 | 内容 |
---|---|---|
4限 | borderプロパティについて | borderプロパティを通じて一括指定プロパティ(backgroundプロパティも一括指定プロパティ)について学んでいきます。borderプロパティのなかでborder-radiusについても触れていきます。 |
5限 | <table>タグの装飾 | 前日勉強した<table>タグの装飾について触れていきます。border-collaspeやborder-spacingについて触れていきます。 |
6限 | <ol>タグとdisplay:inlineについて | 前日では<ul>タグについて講義がありましたがこの時限で<ol>タグについて触れています。また<li>タグをdisplay:inlineで横並びにするといったところまで進めていきます。 |
<ol>タグ、<ull>タグ、<li>タグについてはこちら↓で解説しています。
【HTML】ol、ul、liの使い方まとめ【リストの型・応用も】
今回はHTMLでよく使う<ol><ul><li>タグについて見ていきます。
olとは?
リストの中にリストを作って2段階リストにする
リストの順番指定
ulと...
displayプロパティについてはこちら↓をご覧ください。
【CSS】displayを学ぶ【inline、block、inline-block】
CSSでサンプルサイトを作りながら「こういうデザインにしたい」と悶絶してたので、勉強してきました!
1、displayプロパティとは?
1-1、displayの値の種類
1-2、それぞれの違い
2、displ...
まとめ
CSSが入ってくると新しいタグとプロパティの種類が一気に増えて覚える事が増えるので予習しておかないと少しつらいかもしれません。