ドットインストール 詳解CSS 変数編 【テーマカラーを設定しよう】
ドットインストールまとめ記事、今回は「詳解CSS 変数編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- HTML/CSSを使ってWEBページをいくつか作ってみた方
- プログラミングの基礎学習を始めて1ヶ月~数ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→CSS変数について復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSの基礎について一通り勉強をしてから読まれることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう〜
【CSS変数の基本】
・”--“＋(変数名)で変数名を付け、値を設定…①
・値にvar(変数名)とすると変数の値が適用される…②
・変数の値を変更するだけで複数のプロパティの値を一括で変更できる…③
・値を設定しない場合var関数内で設定…④
h1のborder-colorをvar(--my-color)としている。my-colorの値を画像1枚目(blue,①)から2枚目(orange,③)に変更するとスタイルが変更された
【css変数の継承】
・css変数は継承される
・h1とpの共通の親要素bodyに変数を指定したことで、h1にもpにも変数の値が適用されている…①
・:root(html要素を示す擬似クラス)を用いることで文書全体に変数の値を適用できる…②
:root(文書全体)にCSS変数を適用しているのでそれより下の階層にある要素(全ての要素)にCSS変数が継承されている
【CSS変数が継承されていない例】
h1にCSS変数を設定し(①)h1(②)とp(③)でCSSの値を使用したがh1とpは同階層なのでpにはCSS変数が適用されていない
【CSS変数使用時の注意点-1 単位の扱い】
・単位なしで変数に値を設定し(①)変数を使用する時に後から単位をつける(②)と単位が機能しない。
・プロパティ名に変数を使うことはできず、プロパティの値にのみ使用可能。
①で--my-margin-left: 32; とし、②でmargin-leftの値をvar(--my-margin-left)pxとしている。これでmargin-leftは32pxとはならず、CSS変数が適用されていないことがわかる。③で--my-property: color;とし、④で--my-property: var(--my-color);としているがこれでcolor: var(--my-color);とはならない。
【CSS変数を用いてテーマカラーを指定】
・変数を作成し(①)、colorプロパティのhslの1つ目の値(=色相)として設定(②)
・buttonを目立たせるためにcalcを用いて色相の値を+60…③
※色相の値が+60とは色相環を60度右にずらすということ
【復習】
今回はCSS変数について扱いました。最後に記憶に定着するように復習しましょう。
★CSS変数の基本
- --(変数名): 変数の値で設定。各プロパティの値でvar(--変数名)を用いることで呼び出せる
- CSS変数の値を変えることで変数を設定した全てのプロパティの値を一括で変更できる
- プロパティの値でvar--変数名とすれば直接変数を設定できる
★CSS変数の継承
- CSS変数は親要素から子要素へと継承される。同一階層の要素間では継承されない
★CSS変数使用時の注意点
- 単位は変数の値に含める
- プロパティ名に変数を使用することはできず、プロパティの値にのみ使用可能
CSS変数を用いることで今回のようにテーマカラーを設定することができます。
内容としてはちょっとマニアックなので他のレッスンの内容を完璧に理解してから取り組むと良いでしょう！
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール経過報告】
— 5日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月27日
詳解Javascript オブジェクト編 DOM編(1~8) 完了です👍
ページに動きが生まれて面白くなってきました☺️
何気なく使っていたテクノロジーの裏側を知れるのがプログラミングのやりがいです😄#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい pic.twitter.com/uDt8DvBElv
ドットインストール 詳解CSS グリッドレイアウト編 【Flexboxより複雑なレイアウトを作れます】
ドットインストールまとめ記事、今回は「詳解CSS グリッドレイアウト編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
→グリッドレイアウトについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう！
- 【gridの基本】
- 【gap】
- 【repeat】
- 【minmax,auto-fit】
- 【grid-auto-rows】
- 【grid線指定】
- 【グリッド線に名前をつける】
- 【グリッド内の要素の配置を変える】
- 【グリッド内の要素の配置を直感的に指定する】
- 【グリッド内の要素の位置を揃える】
- 【復習】
【gridの基本】
①親要素に設定してgridを作る
②③それぞれgridの列・行の幅を指定。指定した数値の個数が列数・行数になる(④)
⑤幅の単位をfrとすると可変になり、親要素から固定要素の幅を引き余白を割り当てる。frが複数ある場合frの係数比で割り当てる
⑤で各gridの幅について、最初に一番左を100pxとし、その後残りの幅を2つのgridに2:1で割り当てている
【gap】
①gapでgridのマスの間に隙間をつくる
②数値が1つの場合縦横同じ幅で間隔が指定される
③数値が2つの場合、縦→横の順で間隔が指定される
【repeat】
①gridの行数・列数が膨大な時に使用。repeat(幅、繰り返す回数)とすることで同じ幅の行・列を指定個数作成できる
②回数をauto-fillとするとブラウザの幅に入りきらなくなるまで繰り返す
③には100pxの幅が入らないので余白ができている
【minmax,auto-fit】
①minmax(最低幅,1fr)
余白が最低幅を越えるまでは幅を可変にして余白を埋める
②auto-fit
繰り返し配置する要素がなくなった場合要素を横幅いっぱいに均等に配置
【auto-fillの時の挙動】
繰り返し配置する要素がなくなると右に余白ができる
【auto-fillの時の挙動】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月29日
繰り返し配置する要素がなくなると右に余白ができる#プログラミング#programming#HTML#CSS pic.twitter.com/5dgLzvWN3w
【auto-fitの時の挙動】
繰り返し配置する要素がない場合は要素を横幅いっぱいに均等に配置する
【auto-fitの時の挙動】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月29日
繰り返し配置する要素がない場合は要素を横幅いっぱいに均等に配置する#プログラミング#programming#HTML#CSS pic.twitter.com/wpFmlPddVJ
【grid-auto-rows】
①②で指定していない行が登場した時の行幅を指定。単体で使うと全ての行の幅を設定できる
②のみの指定だと(設定した数値の個数)行目以降の行の幅がコンテンツの幅になってしまう
②のみでは2行分の高さしか設定していないので3行目以降がつぶれてしまった(画像2枚目)ので①で3行目以降の行幅を指定した
【grid線指定】
①②
grid要素の格子線の番号で要素の配置を指定
番号は画像の通りでそれぞれ要素の上・左の線の番号
③
数値で指定
④
”数値/数値”で複数範囲選択
⑤
負の数で後ろから数える
⑥
”span 数値”で終点までの長さを指定
box1(赤)にgrid-row : 2; grid-column: 2/ span 2; (=2~4)と指定した結果画像の領域の長方形になる
【グリッド線に名前をつける】
①
grid-template-columns(rows)の値で列(行)の幅の数値の間に[名前]を入れてグリッド線に名前をつけることができる
②
①の名前で要素の配置を指定
③
名前を[~-start],[~-end]とすると”~”でライン指定できる
grid-templete-columnsで100px 100px [~-start] 100px [~-end]となっている。つまり2列目と3列目の間、3列目の右の線にそれぞれ名前をつけたということ
【グリッド内の要素の配置を変える】
①グリッド内の要素を左上から列ごとに並べる
②2,3の行幅・列幅を2倍に
③グリッドの外の幅を指定
④グリッド内の空いた場所を埋めるように要素を配置。大きさの違う画像を綺麗に配置する時など使える
①でgridの並び順を横→縦に変更。②でbox2,box3の縦と横をそれぞれ2倍に。grid-flowで縦の並び順が固定されているので空白ができてしまう(画像右下)。そこで④で空白を埋めるようにした(画像左下)。
【グリッド内の要素の配置を直感的に指定する】
①グリッド内のマスを文字で表現
②マスの名前を値とすることで該当する名前のマス全体に要素が配置される
③”.”で空白のマスを作ることができる
④全ての要素が四角に配置されなければ機能しない
④で"b・b"としたためbのブロック(box5)が四角にならずデータが壊れた
【グリッド内の要素の位置を揃える】
①②グリッド全体で要素の配置を揃える
justify：列方向
align：行方向
start：左
end：右
center：中央
③④グリッド内での要素の配置を揃える
⑤⑥個々の要素をグリッドに対して揃える
-contentが全体の要素の配置、-itemが要素内の要素の配置と捉えておけばOK
【復習】
今回は以上になります。
最後に記憶に定着するように復習しましょう。
★gridの基本
- display: grid;と親要素に指定することでgridを作成
- columnが列 rowが行
★gridの要素のサイズ指定方法
- px：直接grid-itemの列幅・行幅を指定
- fr：余白を指定した係数の比で割り当て
- グリッド線指定：縦・横の線の範囲を指定することで囲まれた部分を要素の領域とする。線に名前をつけて指定することも可能
- grid-area指定：直感的に指定可能だが制約も多い
★girdの要素を自動で設定する方法
- reoeat(aut-fill,~px)：~pxの列を自動で作成。ただし~pxに満たない場合余白ができる
- repeat(aut-fit,~px)：~px以下で画面を埋め尽くすように自動で列を作成。余白ができなくて済む
- minmax(~px,1fr)：~pxを超えるまでは画面幅いっぱいに伸ばす。一番端の要素に対して指定すると使いやすい
- grid-auto-rows：grid-templete-rowsで設定されていない行幅を自動で設定
★grid内の要素の配置を調整
- gird-flow：要素の配置方向を指定
- dense：grid内の要素を詰める
- justify~→縦方向、align→横方向の配置
- ~content→grid全体の配置 ~item→gridのマスの中の配置
★その他
- gap：girdのマスの間に隙間をつくる
girdを使いこなせるようになるとより複雑なWEBページのレイアウトを作れるようになります。
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール経過報告】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月25日
詳解Javascript オブジェクト編 22~31 完了です👍
クラスの説明が結構難しかったですね。
ただ自分は複雑なものをいかにわかりやすく説明するか？を考えるのが好きなので全然苦じゃないです☺️#プログラミング初心者と繋がりたい#駆け出しエンジニアと繋がりたい pic.twitter.com/AibqKmtA16
【入門】ドットインストール 詳解CSS レスポンシブウェブデザイン編 【基礎から徹底解説】
【更新】
2020/05/31 この記事の知識を使ってウェブサイトを作成しました！
下記リンクからチェックしてみてください！
この記事は５分で読めます
ドットインストールまとめ記事、今回は「詳解CSS レスポンシブウェブデザイン編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
→レスポンシブウェブデザインについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう！
【viewportの設定】
①viewportの設定
②デバイスの画面幅に表示領域の幅を合わせる
③ズーム倍率の初期設定を等倍にする
<meta name="viewport" content="width=device-width, initial-scale = 1">
ちなみに基本はこのままコピペすればよい。が、そのしくみを理解しておくことはエラー対応が発生した時など実務で役立つ
こちらの記事も参考になるかと思います↓
【メディアクエリを用いる】
①メディアクエリを呼び出す
②メディアクエリの条件式。この条件を満たす時にスタイルを適用する、という意味
widthが600~800の時に背景色をskyblueにする設定をしたところ実際にwidth=667pxの時背景色が水色になった
ディベッロパーツールでは横×縦でそれぞれpxが表示される。画像1枚目(iphone6/7/8,667px)ではCSSが適用されたのに対し,2枚目(iphoneX,812px)では適用されていないのがわかる。
【レスポンシブデザインの実践-1】
・widthが600pxより小さい時 (スマホサイズ)の①〜③の要素のスタイルを設定…④
・下に書いたもので上書きされるのでメディアクエリ不要
・aside：diplay: none;でモバイルサイトでは表示しない設定にしている…⑤
display: none;を使用したことでhtmlには記述しているasideが表示されていない。こんな使い方もできる。
【レスポンシブデザインの実践-2】
・width≧600の時(タブレットサイズ)のスタイルを設定…①
・”section>img,text,aside”をFlexboxにしimg,textのwidthをそれぞれ200px,可変とした…③
・asideは特に上書きしていないの非表示のまま…④
imageとtextの親要素sectionにFlexboxを使用して縦並びだった両者を横並びに。flex: 1;とは他の要素の幅を全体から引いたあまりを全て割り当てるという意味で、ブラウザ幅に合わせて幅を可変にしたいときなどに使用できる。
【レスポンシブデザインの実践-3】
・width≧800の時(PCサイズ)のスタイルを設定…①
・sectionは幅固定で画面の中央に配置…②
・非表示にしていたasideを表示させた…③
・表示する際のスタイルはメディアクエリ内で設定…④
asideのdisplayプロパティの値を書き換えたので表示された
【復習】
今回は以上になります。
最後に記憶に定着するように復習しましょう。
★用語
- viewport：WEBサイトを表示する領域の設定。デバイスの幅に合わせて拡大縮小率を設定できる。基本は<meta name="viewport" content="width=device-width, initial-scale = 1">と設定する。
- メディアクエリ：デバイスの幅に応じたCSSを設定することができる。
viewportはメディアクエリで設定した幅の条件式を正しく作動させるために必要なものと考えてください。
★実践
- 初期設定(スマホサイズ)の時はCSSが下に書いたもので上書きされることからメディアクエリは不要
- displayプロパティを用いることで画面幅によって要素の並び方向(縦横)を変更したり、表示させない設定をすることができる
いかがだったでしょうか？
レスポンシブウェブデザインはGoogleの検索エンジンでも推奨されており、SEO対策にも欠かせません。今後実務でHTML&CSSを使用したい場合には必須のスキルといえるでしょう。
実際ランサーズなどで調べるとレスポンシブ対応化してほしい、というような案件も見ます↓
案件があるということは需要のあるスキルということで、身に付けておいて損はないですね！
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
👇ページはこちら
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール学習経過】
— とぅーご＠6/1~プログラミング講師 いよいよ明日！ (@togo_mentor) 2020年5月11日
「実践！アプリ紹介ページを作ろう」完了
HTML&CSS全て完了です！
Progateよりも細かく学べ、より本格的なデザインのサイトが作れることが分かりました👍
明日以降はJavascriptに進みます☺️#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい pic.twitter.com/Vx34BjmrNu
プライバシーポリシー
この記事は約3分で読めます。
こんにちは管理人のとぅーごです。下記、「プライバシーポリシー」に関して記載致しましたので、ご一読願います。
当サイトに掲載されている広告について
当サイトでは、第三者配信の広告サービス（Googleアドセンス、A8.net 
、Amazonアソシエイト、バリューコマース、 リンクシェア、もしもアフィリエイト
）
を利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。
またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。
当サイトが使用しているアクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちら、またはこちらをクリックしてください。
当サイトへのコメントについて
当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、メールアドレスとURLの入力に関しては、任意となっております。
全てのコメントは管理人であるredoが事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。
加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。
- 特定の自然人または法人を誹謗し、中傷するもの。
- 極度にわいせつな内容を含むもの。
- 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
- その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。
免責事項
当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。
当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。
当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
プライバシーポリシーの変更について
当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。
修正された最新のプライバシーポリシーは常に本ページにて開示されます。
運営者：とぅーご
ドットインストール 詳解CSS Flexbox編 【簡単に横並びのレイアウトを作成できます】
ドットインストールまとめ記事、今回は「詳解CSS フレックスボックス編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
→フレックスボックスについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいきましょう〜
- 【Flexboxの基本】
- 【Flexboxを利用した2カラムレイアウトの作成】
- 【Flexboxを用いた3カラムレイアウトの作成】
- 【Flexboxで縦方向に要素を配置する-1】
- 【Flexboxを用いて要素を中央揃えにする】
- 【Flexboxを用いてヘッダーメニューを作成-1】
- 【Flexboxを用いてヘッダーメニューを作成-2】
- 【Flexboxを用いて画像と文章を交互に配置】
- 【復習】
【Flexboxの基本】
・display: flex;
親要素をFlexboxに指定(①)
指定した要素をflex containerという。
子要素はflex itemといい、左から右、上から下の順で1,2,3…と番号が振られる(②)
・flex : 1
指定した番号のflex itemの幅を可変にする(③)
【Flexboxを利用した2カラムレイアウトの作成】
①MainとAsideをdiv要素の中に入れ、クラスセレクタを用いてFlexboxを作成
②Mainは幅をいっぱい広げたいのでflex:1;とする。するとasideの100px(③)を覗いた余白を全てMainに割り当て幅が可変になる
補足:2カラムレイアウト
サイドバーとメインコンテンツを横に並べて配置するレイアウトのこと。
例：トヨタ自動車株式会社 キャリア採用情報
【Flexboxを用いた3カラムレイアウトの作成】
①order
flex itemに使用することでflexbox内での並び順を変えることができる。初期値では左から0,1,2…となっている。一番左に持ってきたい場合①のように-1と指定
補足
3カラムレイアウト
メインコンテンツを中央に、左右にメニューや広告などを配置した３段組のレイアウト。
例：岡山一番街 さんすて岡山HP
【Flexboxで縦方向に要素を配置する-1】
・flex-direction
Flexboxの主軸(主となる要素の配置の方向)を決める。columnとすると主軸が縦方向になる。…①
・flex:1
Flexcontainr(body)に余白があれば全てcontainerクラスに入れる。…③
・height: 100%;
Flex:1;は主軸方向に余白がある場合にのみ適用される。ここではFlexcontainerの高さを②のように指定することでWEBページ全体の高さを主軸方向の長さとしている
・Flexboxではmarginの相殺が発生しない。よって④は2つのmarginを足した高さになっている
【Flexboxを用いて要素を中央揃えにする】
①justyfy-content
要素の主軸方向の並べ方を指定
値はcenter：中央揃え
flex-start：主軸の始点に揃える
flex-end：主軸の終点に揃える
②align-item
要素の交差軸方向の並べ方を指定値とスタイルは①と同様
【Flexboxを用いてヘッダーメニューを作成-1】
①justify-content : space-between;
Flexitemを主軸方向の両端に配置し、間にスペースを空ける
②margin-left(right): auto;
Flexitemを並べた時にできるulの右側の余白を左に持ってきてulを右端に移動させる
【Flexboxを用いてヘッダーメニューを作成-2】
①ulをFlexboxにし主軸方向(横)にaを配置
②widthの指定
③中央揃え
④aのheightをロゴに揃える
⑤aはinline要素でwidth,heightの指定ができないのでblock要素に変える
⑥カーソルが乗った時に背景色を変更
【Flexboxを用いて画像と文章を交互に配置】
・偶数番目のsectionだけFlexbox内での並び順を逆にする…①
・marginは②の形ではなく、④を用いてFlexbox内の要素間に均等に配置する。その際③のようにテキストのwidthをcalcを用いて全体に対する割合とする
【復習】
最後に記憶に定着するように復習します。
今回はCSSのフレックスボックスを扱いました。
重要なプロパティがたくさん出てきたので以下に整理します。
★親要素に指定
- display: flex;…親要素(flex container)に指定することでFlexboxを作成。子要素(flex item)に左→右、上→下の順で番号が振られる
- flex-direction…flex containerに指定することでFlexbox内での要素の並ぶ方向を指定。初期値はrow(横)
- justify-content…Flexbox内での要素の主軸方向の揃え方を指定。 center(中央揃え),flex-start(始点揃え),flex-end(終点揃え)
- justify-content: spacebetween;…flex itemsを主軸方向の両端に配置し間にスペースを空ける
- align-item…Flexbox内での要素の交差軸(主軸と垂直)方向での揃え方を指定。指定方法はjustify-content同様
★子要素に指定
いかがでしょうか？
基礎文法編からみると随分と難易度があがりましたね…
途中で紹介した2カラム,3カラムレイアウトは実際に多くのホームページで使用されているものです。
Googleで「2カラムレイアウト 例」などと調べていただければ、たくさん例が出てくると思います！
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
Hello world! とぅーごです。#今日の積み上げ
— 22日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月9日
・ブログ1記事
・ドットインストール「実践！アプリ紹介ページを作ろう！
」
・ハセブロ(@hbOnlineSalon @hasebe_yuusuke )勉強会参加
勉強のコツはインプットしたら即アウトプットすることです。
Twitterのおかげでよい学習ができています☺️
ドットインストール 詳解CSS セレクター編 【CSSに慣れてきた中級者むけ】
ドットインストールまとめ記事、今回は「詳解CSS セレクター編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- HTML/CSSの基本を勉強し終えた方
- プログラミングの基礎学習を始めて数週間~1ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→セレクタについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
また、各レッスンのまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。レッスンの内容で実際どのくらいのレベルのWEBサイトになるのかがわかりやすいようになっております。
そういった情報を見逃したくない方はぜひ読者登録してお待ちください！
【クラスセレクタ】
・要素にclass属性をつけるとclass属性の値ごとにcssをつけて複数の要素にまとめてcssを適用できる。その際①②のように”.(属性の値)”とする
・class属性の値は半角スペースで区切ることで複数設定できる。セレクタも複数設定できる
【idセレクタ】
・id属性をもつ要素(①)にcssを適用するには②のように”#(属性の値”とする
・id属性は同じページ内で同じ値を複数使うことができない。使うと③のように波下線で示してくれる
・*は全称セレクタといい、全ての要素にcssを適用する…④
【属性セレクタ】
セレクタの指定の仕方によりcssの適用範囲が異なる
①[属性名]
指定した属性を含む要素
②[属性名＝値]
指定した属性名が指定した値に完全一致する要素
③[属性名^=値]
前方一致
④[属性名$=値]
後方一致
⑤[属性名*=値]
部分一致
【擬似要素】
・要素の特定の部分をスタイリングすることができるものを擬似要素という。
・”before::””after::”(①,②)はcontentプロパティを伴いそれぞれ要素の前後に値を追加する
・attr(data-)とすれば追加する内容を要素ごとに変えることができる…③④
【hover,cursor】
①hover
擬似クラス。カーソルがボタンの上に乗った時のスタイルを指定。ここではopacity(透明度)を0.8(少し薄く)している…②
③cursor
ボタンの上にカーソルが乗るとカーソルが指の形になる
※擬似クラスは擬似要素と違い”:”は1つのみ
【nth-child】
擬似クラス。()内の表記によりスタイルを適用する要素が変わる
①数字：(指定した数字)番目
②kn(kは自然数)：kの倍数番目
③odd：奇数番目
④even：偶数番目
【first-child,last-child】
それぞれ最初、最後の要素にスタイルを適用…⑤⑥
【nth-of-type】
・擬似クラス
・nth-childの要素の種類も考慮したい時ver.
⓪のように要素が入り組んでいる時に使える
・使用するときは”(要素名):nth-of-type()”と記述する…①
・nth-childと同様の数字の指定方法、およびfirst,lastも使える…②③
【:empty…①】
・空の要素にスタイルを適用
・空の要素とは空白も改行もされていない、もしくはコメントのみが入っている要素のこと…②
【:not()】
・()内にセレクタをとり、指定したセレクタ以外の要素にスタイルを適用…③
【詳細度】
cssのセレクタ表記による優先度のこと
・id、クラス/属性/擬似クラス、要素/擬似要素の順番に数をカウント、比較し数字が大きい順に高くなる…①~⑤
・style属性：どのセレクタよりも優先度が高い…⑥
・!important：style属性より優先度が高い。複数ある場合後に書いたものが優先…⑦⑧
【復習】
最後に記憶に定着するように復習します。
今回はCSSのセレクタについて扱いました。内容は大きく分けて3つでした。
1.基本的なセレクタの種類
- クラスセレクタ…複数の要素にclass属性を指定してまとめてcssを適用できる
- idセレクタ…使い方はクラスセレクタに似ているが1ページ内で繰り返し用いることができない
- 属性セレクタ…指定した属性を含む要素にcssを適用。属性値も指定することができ、前方一致や後方一致が使えるのでhref属性のURLなどに有用
- 全称セレクタ…すべての要素にcssを適用
2.擬似要素と擬似クラスについて
★擬似要素
"::"を伴い、要素の特定の部分をスタイリングする。
- "::before/after"…それぞれ要素の前後にスタイルを適用
★擬似クラス
":"を伴い、指定した要素が特定の状態の時にcssを適用する。
- ":hover"…要素にカーソルが乗った時のスタイルを指定。
- ":empty"…空の要素にスタイルを適用。
- ":not"…指定したセレクタ以外の要素にスタイルを適用
- nth-child…親要素内の複数ある要素(種類は不問)の特定の順番のものにスタイルを適用する
- nth-of-type…要素の種類も限定して特定の順番の要素にスタイルを適用できる。
★詳細度
- ①id、②クラス/属性/擬似クラス、③要素/擬似要素をそれぞれカウント。それぞれ数が大きい順。優先度は①＞②＞③
- style属性：どのセレクタよりも優先度が高い
- !important：style属性より優先度が高い。複数ある場合後に書いたものが優先
それぞれ非常に難しい内容ですが、覚えるのではなく調べて使えるようにします。
またWEBサイトに反映し次第記事に追記します。
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【WEBページ制作】
— 24日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月8日
❗️WEBページを公開しました❗️
工夫した点
・Git hubとローカル環境でのパスの違いを修正
・Twitterカードの作成
改善したい点
・Top Pageが少し重い
👇ぜひご覧ください！👇https://t.co/GptWvMXmzo#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい
ハセブロ勉強会 2020/05/05 WEB系エンジニアが直面する問題とは？【知識だけでは問題は解決できません】
こんばんは。
本日はハセブロ勉強会 2020/05/05の内容の復習記事です。
【この記事はこんな人におすすめ】
- エンジニアになりたてで、これからキャリアアップを目指す方
→この記事が自分のエンジニアとしての働き方を見直すよいきっかけになると思います。
- エンジニアの働き方に興味がある方
→この記事が自分が持っているエンジニアの働き方についての理想と現実のギャップがないか確かめる機会になるはずです。
- ハセブロプログラミングコミュニティ参加者
→復習用にこの記事をご活用ください！この記事で「WEB系エンジニア実務シリーズ」を全て網羅しております！
誰よりもわかりやすく、役に立つような記事になるよう精進しますので今後ともよろしくお願いします。
WEB系エンジニアに求められる能力
- 問題解決能力
- コミュニケーション能力
- 前提を疑う能力
1.問題解決能力について
問題＝理想と現実のギャップ
ex.模写
こんなサイトを模写したい(=理想)
技術的にわからない箇所がある(=現実)
→サイトを模写するために技術を学ばなければならない(=問題)
問題解決の基礎
- 問題に気づく
- あるべき姿を設定する
- なぜ問題が発生したか考える
- 解決策を考える
- 解決策を実行する
- 問題が解決できるか検証する
問題を解決するための考え方
- 仮説思考
情報をたくさん集めるのではなく、限られた情報から仮説を立てて検証することを繰り返す
- 問題を見極める
視野を広く持ち、空気に流されないことで確証バイアスを避け、問題が発生するきざしに気づく
2.コミュニケーション能力について
周りを巻き込み、スピーディに問題を解決するためにコミュニケーションが必要
行動する技術
- 他者を助ける力
- 他者に助けてもらう勇気
- 相手の立場に立って考える
SPRINT - 多くのことをより速く Googleの仕事術
スプリントは、月曜から金曜までのたった5日間で、問題の洗い出しからアイデア出し、プロトタイプの制作、そしてユーザーテストまで行ない、最大の成果を生み出す開発プロセスだ。
グーグル式仕事術「スプリント」を今すぐあなたがやるべき理由 | SPRINT 最速仕事術 | ダイヤモンド・オンラインより引用
3.前提を疑う能力について
なぜ前提を疑うのか？
前提を疑うことでエンジニアの仕事である、それまでになかった価値を生み出すことができるから
視点を変える技術
人は問題に直面すると真正面から解決しようとしがち
→一度問題から離れ、視点を変える
アイデア発送のフレームワーク - 質問チェックリスト SCAMPER
- 入れ替える(Substitue)
- 組み合わせる(Combine)
- 当てはめる(Adapt)
- 変更する(Modify)
- 他の用途に用いる(Put to other uses)
- 排除・縮小する(Eliminate)
- 並べ替える(Rearrange)
以上7項目48の質問リストを使ってアイデアを出す方法
SCAMPER法――「10分以内にアイデア3つ出さなきゃ」をかなえる方法 (1/4) - ITmedia エンタープライズより引用
コードを書く技術力が同じであるなら、こういった仕事の進め方そのものに関わる点がエンジニアとして他の人と差別化を図るポイントになる
↓こちらの記事も参考にどうぞ↓
2020/05/05 あらゆる問題を考える
WEB系エンジニアが直面する問題
- 顧客の問題
- 人間関係の問題
- 高度な問題
顧客の問題
クライアントが望むものを明らかにするのは制作者の仕事
むしろ顧客の問題は制作者が気づかせてあげることが重要
→この意識を持つことが差別化につながる
クライアントに言われて初めてニーズ(=解決すべき問題)に気づくようでは遅いわけです。
顧客のニーズを見つけ、それにマッチする解決策を見つけよう
コマンドを覚えなくても直感的に操作できるPCがあったらいいんじゃないか
＝クライアントが望むもの・パソコンのあるべき姿
あるべき姿(=理想)に気づくことで理想と現実とのギャップ(=問題)が見えてくる。これが顧客の問題ですね。
マッキントッシュは実際クライアントが望むものを掴み、大ブームとなるわけです。
私も現在この記事はMacbookで書いていますが、トラックパッドを使用したウィンドウ・デスクトップの切り替えはすごく便利ですよね。記事に挿入する画像とか参照しやすくて助かる。Windowsを使っていたこともありましたが、ウィンドウの切り替えは確かAlt+Tabですよね。覚えないといけないし、何よりAlt+Tabは押しにくい…
人間関係の問題
相手を変えたければまずは自分から変わること
これはアドラー心理学でいう、「変えられるものに着目する」ということに近いような気がします。他人を変えることはできなくて、変えようとしている限り人間関係の問題は解決しない。しかし自分の行動は変えることができる。自分の行動を変えたことで他人の行動が変わるかはわからないが、変えられるものに着目し自分の行動を変えることが大切、というような内容だったと思います。
人間関係は最も人を悩ませる問題の1つ
※なお、アドラー心理学については後々「幸せになる勇気」について書評を書きますのでお楽しみにしてください
高度な問題
適応課題
人々の価値観が複雑に絡み合って生まれる課題
→テクニカルな課題と異なり、過去の知見で解決することができない
現代の重要な問題
こちらの記事がかなりわかりやすかったのでこちらを元に説明します。
この記事では、部下に権限を委譲したはずの上司が自分で作業をしてしまっている、というケースを扱っています。
ここでの問題は上司のリーダーシップに関する知識などが考えられます。これを技術的課題と呼びます。
しかし問題はそれだけでなく上司の仕事の進め方に対する価値観が権限委譲を妨げていると考えることができます。例えば「多くの仕事をこなすことで他人から認められたい」という価値観などです。このような考え方が上司の仕事の進め方に"自然と"表れているがために部下への権限委譲ができていないと考えられます。このような問題を適応課題といい、改善のためにはまず自分の価値観を知り、次に新しい考え方を見つけていく必要があります。
まずは自分の価値観を整理するところからはじめよう
技術的な課題の解決は既存の知識で解決可能である一方、適応課題の解決は自分の価値観・考え方を変える必要があり既存の知識では対応できないので難しいです。だからこそ人は無意識のうちに技術的な課題への対処に終始してしまうのではないか、と疑問を投げかけています。そして問題が解決しないのは技術的課題の解決はできていても適応課題が解決できていないからではないか、と結論付けています。
復習
最後に記憶に定着するように復習します。
今回はWEB系エンジニアが直面する「あらゆる問題に向き合う」をテーマに話をしました。問題は大きく3つありました。それぞれ簡単に要点をつけて振り返ると
- 顧客の問題
→顧客のニーズが望むものを制作者自分から掴みにいきましょう
- 人間関係の問題
→人を変えたければ自分を変えましょう
- 高度な問題 - 適応課題
→既存の知識では解決できない問題。ただし問題を解決する上で重要な課題
でした。
ハセブロオンラインサロン、改め長谷部雄介エンジニア養成所ではただコードを書く技術の習得のみならず、こうしたエンジニアとしてはたらく上で必要な考え方、仕事の取り組み方まで学べます。
完全無料ですのでぜひ興味のある方は下記リンクをチェックしてみてください！
ここまで読んでくださった方、ありがとうございます。
今後もプログラミング、読書、教養などを中心にみなさんのお役に立てるような情報を発信していきますので今後ともよろしくお願いします。
この記事が参考になった方はブラウザを閉じる前にポチッと押して頂けますと幸いです。
Twitterのフォローの方もよければよろしくお願いします！
【ハセブロ(@hasebe_yuusuke @hbOnlineSalon 勉強会】
— 26日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月6日
05/06
テーマ
初期の学習について情報共有
本来はJavascriptの話をする予定が話が盛り上がった結果初期学習について熱く語ってました☺️
明日はJavascriptの予定です🧐#プログラミング初心者と繋がりたい #駆け出しエンジニアとつながりたい pic.twitter.com/IftFYYSm7I
