100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

April 4, 2020, 3:01 am

≫ Next: CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

≪ Previous: 10px以下の文字が含まれたWebデザインが上がってきたので対応した

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 14日目 - CSS - CSSの基礎1

CSSのセレクタ

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ(selector)はCSSを適応させる対象のことです。

どの部分のスタイルを変えるのかを指定するのには
まずセレクタの使い方を覚えないと
変なところが変更されてしまいレイアウト崩れが発生してしまうことがあるので
頑張って覚えていきましょう。

要素セレクタ

セレクタに要素名を使用すると
指定した全ての要素にスタイルが適用されます。

sample.css

/* 全ての h2 タグに適用 */
h2 {
  color: blue;
}

/* 全ての div タグに適用 */
div {
  color: red;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<div>divテキスト</div>
<p>pタグのテキスト</p>

全称セレクタ

セレクタに *（アスタリスク）を使用すると
その配下の全ての要素にスタイルが適用されます。

sample.css

/* div タグ内の全ての要素に適用 */
div * {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
  <h2>タイトル2</h2>
</div>
<p>pタグのテキスト</p>

idセレクタ

任意のidが付いている要素にスタイルが適用されます。
id名の前に#をつけることで指定できます。

sample.css

/* id名がotuの要素に適用 */
 #otu {
  background-color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p id="otu">pタグのテキスト</p>

classセレクタ

任意のクラスが付いている要素にスタイルが適用されます。
クラス名の前に.をつけることで指定できます。

sample.css

/* class名がopの要素に適用 */
.op {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p class="op">pタグのテキスト</p>

子孫セレクタ

半角スペースでセレクタを区切ると、指定した要素の中の要素にスタイルが適用されます。

sample.css

/* div タグ内の a タグに適用 */
div a {
  color: red;
}

sample.html

<div>
  <p>pテキスト</p>
  <a href="#">aテキスト</a>
</div>

子要素、孫要素にのみ適当させることができるなど
幅広い指定ができます。

子セレクタ

セレクタとセレクタを >で繋ぐことで、要素の直下の子要素のみにスタイルが適用されます。

sample.css

/* class名がotuのdivタグの直下のspanタグのみに適用 */
div.otu > span {
  color: blue;
}

sample.html

<div class="otu">
  <span>spanテキスト1</span>
  <p>
    <span>spanテキスト2</span>
  </p>
</div>
<div>
  <span>spanテキスト3</span>
</div>

特定の子要素にだけスタイルを適用できます。
全称セレクタとあわせると要素の中の全ての子要素にスタイルが適用されます。

/* p タグ内の全ての子要素に適用 */
p > * {
  color: blue;
}

隣接セレクタ

セレクタとセレクタを +で繋ぐことで
ある要素に隣接してる要素にスタイルが適用されます。

sample.css

/* h2 タグに隣接してる p タグに適用 */
h2 + p {
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<p>隣接1</p>
<p>隣接2</p>

関接セレクタ

セレクタとセレクタを ~で繋ぐことで、ある要素以降の兄弟要素にスタイルが適用されます。

sample.css

/* p タグ以降の span タグに適用 */
p ~ span{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<p>隣接1</p>
<h2>タイトル2</h2>
<p>隣接2</p>
<div>div1</div>
<span>span1</span>
<div><span>span2</span></div>

属性セレクタ

要素の後に [ ]で属性を指定すると
任意の属性を持つセレクタにスタイルが適用されます。

要素[属性名]

要素[属性名="値"]

属性値まで指定すると、その属性値のものだけに適応されます。

sample.css

/* target属性を持つ div タグに適用 */
div[target="window"]{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<div target="window">target1</div>
<div target="blank">target2</div>

link擬似クラス

セレクタの後に:linkをつけることで、未訪問のリンクにスタイルを適用することができます。
また、セレクタの後に :visitedをつけることで、訪問済みのリンクにスタイルを適用できます。

sample.css

/* 未訪問リンクに適用 */
a:link{
  color: red;
}
/* 訪問済みリンクに適用 */
a:visited{
  color: green;
}

sample.html

<a href="https://www.yahoo.co.jp/">link1</a>
<a href="https://www.google.co.jp/">link2</a>

その他の擬似クラス

hover擬似クラス

セレクタの後に:hoverをつけると、ある要素にマウスが乗っている間だけ
スタイルが適用されます。

a:hover{
  color: blue;
}

active擬似クラス

セレクタの後に:activeをつけると、ある要素をクリックしてから離すまでの間だけ
スタイルが適用されます。

input:active{
  color: blue;
}

focus擬似クラス

セレクタの後に:focusをつけると、ある要素をフォーカスしている間だけ
スタイルが適用されます。

textarea:focus{
  background-color: blue;
}

first-child疑似クラス

セレクタの後に:first-childをつけると、最初に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:first-child{
  color: green;
}

last-child疑似クラス

セレクタの後に:last-childをつけると、最後に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:last-child{
  color: green;
}

nth-child疑似クラス

セレクタの後に:nth-child(n)をつけることで、
最初から数えて「n番目」に当たる子要素にスタイルが適用されます。
偶数や奇数を指定して交互に色を変更する事もできます。

/* 3番目の li タグを赤くする */
ul li:nth-child(3){
  color: red;
}

まとめ

セレクタはかなりたくさんあり
スタイルをきちんと適応させるには押さえておく必要があります。
頑張って覚えておきましょう。

君がエンジニアになるまであと85日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

↧

CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

April 4, 2020, 3:28 am

≫ Next: 【プログラミング学習3日目】CSSのプロパティとか

≪ Previous: 100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

【やったこと】
position: absoluteとrelativeのそれぞれデフォルト(top,left,rightの設定なし)でmargin:autoの併用を実施。挙動がことなるため調査を実施。

【わかったこと】
Chrome Developer Toolsにて属性の確認を実施。positionのデフォルトが異なるためにabsoluteは左寄り、relativeは中央に配置されることがわかった

※詳細は下記ブログに記述
【第3回】CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

↧

【プログラミング学習3日目】CSSのプロパティとか

April 4, 2020, 5:33 am

≫ Next: Reactぴえんチャンレンジ

≪ Previous: CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

はじめに

独学プログラミング学習の3日目

忘れっぽいので備忘録代わりに残しておこうと思う
※人に見せる前提ではないよ

目標

簡単なページをサクっと作れるようになる
Web上に自分のポートフォリオを公開
アウトプットのスキルを身につける

CSSとは

プログラミング学習2日目でも軽く触れたけど，webサイトのデザインを作るための言語
今回はCSSでも土台になるpositionとdisplayについて勉強したのでアウトプットをば

potisonとは

positonとは，要素の位置を決めるためのプロパティ

位置を決めるには4つに方法がある

プロパティ名	説明
static	初期値(ほぼ使わない)
fixed	固定
relative	相対位置
absolute	絶対位置

ほぼ使わないstaticは割愛して，fixedから解説していく

fixed

fixedは画面の決まった位置に要素を固定させる効果がある
例えば，ヘッダーをページ上部に固定しておきたいときなどに使われる

relative

relativeは移動させたい対象が元々いた位置が基準となる
たぶん要素の左上が基準になると思う
また，relativeの特徴として要素を移動させても元あった要素分の空間が確保され続けるといったものがある

absolute

absoluteはウィンドウまたは親要素が基準となる
absoluteの特徴として，親要素にstatic以外が指定されている場合，親要素の左上が基準点となる
また，relativeと違い要素が移動したら元あった空間に別の要素が詰めて入る

要素のど真ん中に要素を置きたい

たぶんこんな感じ
動作確認はしていないです

/* 親要素 */.wrap{position:relative;}/* 子要素 */.inner{position:absolute;top:50%;left:50%;/* 
   * 上記までだと子要素の左上が中央に来るので，
   * 子要素の半分だけ上と左に戻す
   */transform:translateX(-50%)translateY(-50%);}

※iOSとかに対応させるときはwebkitとか使っていい感じにやる

displayとは

displayとは，要素の表示形式を指定するプロパティ

たぶんよく使うdisplayプロパティの値

値	説明
block	縦に積み上がっていく
inline	横に並んでいく
inline-block	横に並んでいくけど，blockの特徴も持つ
flex	横に並んでいく
none	なし

詳しくは下で解説するので，どの値を設定したらどの方向に並ぶのかだけ覚えていればいいよ

block

display: blockは内部要素を包み込むタグの初期値だよ
div, p, ulなどの初期値はdisplay: blockになるよ

blockの特徴は以下のとおり：
1. 要素は横いっぱいに広がる
2. 要素が縦に積み上がっていく
3. 幅と高さが指定できる
4. 上下左右で余白を指定できる
5. text-alignやvertical-alignは指定できない

inline

display: inlineは中に要素が入らないタグの初期値だよ
主にspan, a, imgなどがあるよ

inlineの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できない
3. 縦の余白が指定できない
4. text-alignとvertical-alignが指定できる

inline-block

display: inline-blockはblockとinlineのどっちの特徴ももっているよ

inline-blockの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できる
3. 上下左右で余白を指定できる
4. text-alignとvertical-alignが指定できる

かっこいいボタンとか作るときによく見かける気がする

flex

display: flexはフレックスボックスを作るために指定する値だよ
フレキシブルの略で，曲げるって意味があるよ

最近使い勝手がよくなって，よく使われるようになったからモダンコーディングではこれを使うのかな？どうなんでしょう？
ともかく，レスポンシブとの親和性が高いという特徴を持っているよ

まずはフレックスボックスってなんぞや？ってなったので調べました
「親要素にdisplay: flexを設定した場合，親要素がフレックスコンテナになる．子要素はフレックスアイテムになって色々なレイアウトが設定できる」

・・・なんのことを言っているのかわからないけど，スゴイやつってことでいいかな？いいよね

ちょっと整理してみようと思う．

項目	説明
display: flex	フレックスコンテナを指定
flex-direction	子要素の並ぶ方向を指定
flex-wrap	子要素を横並びにするか縦積みにするかを指定

ということらしい
上記の他にjustify-content，align-itemsというプロパティもあって，
この2つどちらも子要素同士をどの間隔で並べるかを指定するプロパティだよ
どっちがどっちかは多分文字で覚えるより実際に使って身体で覚えたほうが良さそう(脳筋)

おわり

今日はCSSのプロパティのpositionとdisplayについて勉強したよ
今までなんとなく適当に使ってたけど，結構間違った使い方してたみたい

flexに関してはまだ親要素のことしか調べてないから子要素も含めてflexだけで勉強しなおす必要ありそうかな
ともあれ，今日は疲れたからここまで
次回はJavaScriptをかじってみるよ

↧

Reactぴえんチャンレンジ

April 4, 2020, 4:40 pm

≫ Next: 【WordPress】こんなことかよ、、をなくす豆知識

≪ Previous: 【プログラミング学習3日目】CSSのプロパティとか

Reactぴえんチャレンジって何？

nikoさんの記事に触発されたものです。
2019年12月からUdemyでReactの学習を開始したのですが、練習に丁度よいチャンレンジだと思いやってみました。

チャレンジ結果

画像をクリックしてください。

チャレンジのポイント

スライダーを実装するため、初めてMaterial UIというものを使ってみました。
ReactのHooksを学習したので、クラスコンポーネントを使わず、propsでバケツリレーしないパラメータの引き渡し方法を採用してみました。
CSSの設定。
少し前に、webpackで悩みに悩んでしまったので今回は create-react-appを使ってみました。
Netlifyにデプロイしてみました。
GitHubで初めてブランチを使ってみました。

ソースコード

GitHub
練習のために作ったものではありますが、ここをこうしたほうが良いとかありましたら、ぜひご指導ください。

謝辞

ふうさんや弱々エンジニア会の強々エンジニアの方に教えていただきました。
妻にファビコンを作って貰いました。

その他

これを作るのに1週間くらいうんうんうなっていたら、小学生の娘が半日でこんなものを作ったと自慢してくれました。
私はその後も更に2週間くらいうなっていました。ちょっとピエンですね。

↧

【WordPress】こんなことかよ、、をなくす豆知識

April 4, 2020, 7:53 am

≫ Next: positionプロパティについて

≪ Previous: Reactぴえんチャンレンジ

経緯

この記事を投稿するにあたって、自分自身がWeb制作をはじめるにあたって、最初にぶつかった見えない壁についてを共有していきたいと思います。
はじめたばかりの頃「あれ！？ここってどうなってるんだ？？」ってところがググってみても意外に見つからなかったりするんですよね。
他の人は当たり前のようにできていることなのかな？なんて思いましたが、自分のメモと同じような苦悩を抱えている方の一助になれば幸いでございます。

注意

ここでは、HTML＆CSSのコーディングとWordPressのはじめ方のような導入部分の解説は行いません。
すでに、ローカルでの環境構築は行われていることを想定しております。
その際にHTML＆CSSでコーディングした時とWordPressにあげた時とで、壊れるところが個人的に戸惑ってしまったので、そのポイントを中心に多くしていきたいと思いいます。

【目次】今回つまづいたポイント

1.謎の空白
2.表示されない画像
3.お問い合わせフォーム
4.効かないCSS・SCSS

1.謎の空白

直接自前エディターで記述を行う際には全く問題ないのですが、WordPressの固定ページに直接コードを入力する際には全く身に覚えのない空白が発生してしまうことがあります。
こちらを解決するための方法は非常に簡単で、自作テーマ内のfunctions.phpに以下のコードを入力するだけで綺麗に解決しますので、お試しください。
また、functions.phpをいじる際には前もってバックアップを取っておいたほうがいいそうですよ。

functions.php

add_action('init',function(){remove_filter('the_excerpt','wpautop');remove_filter('the_content','wpautop');});add_filter('tiny_mce_before_init',function($init){$init['wpautop']=false;$init['apply_source_formatting']=ture;return$init;});

2.表示されない画像

こんなことあるのか、、というようなアクシデントですが、少し頭を使わないとなかなか抜け出せない沼になっております。
一般的にWordPressにアップロードする際にはタグに以下のようなテンプレートを入れる決まりとなっております。

<img src="<?php echo get_template_directory_uri(); ?>img/image.jpg"/>

フロントページのようにエディターでのコーディングで済むものであれば上記のコードを組み込めば問題ないのですが、それ以外の固定ページ等に画像を挿入する際にはこれではいけません。
原因としては、おそらく外部からの読み込みではなくWordPress内部で読み込まれるということで、テンプレートではなく階層構造での読み込みとなるそうです。

<img src="/wordpress/wp-content/themes/wordpress/img/image.jpg"/>

これがわからないと、画像が表示できなくて大変なことになってしまうのですが、意外と解説している書籍やサイトが少なくて困ってしまいますね。

3.お問い合わせフォーム

これはシンプルにプラグインだよりなのですが、contact form 7とmw wp formの両方を試してみて、個人的にはmw wp formが直感的に使いやすかったので、お問い合わせフォームの実装で詰まっている方はぜひ試してみてください。
詳しい設定方法はこちらで習得しました。
→https://newstd.net/user_manual/mwwpform
ただ、実際に実装してみた時にフォームがうまく機能しなくなってしまうことがありました。
原因は埋め込んだショートコード自体にもともと

タグが入力されていたことに気がつかず、その上から二重でタグで囲ってしまっていたことにあります。
気をつけましょう。

[mwform_formkey key="195"]

4.効かないCSS・SCSS

WordPressにあげる前、HTML&CSSのみのコーディングであればなんの問題もなくCSSが反映されていたんでけど、WordPressにあげた途端反映されなくなってしまった、、という方も多いかもしれません。
しかし、それが反映されなくなったのではなくて遅くなっただけなので、焦らずに対応しましょう。
方法は簡単ですが、実行する前によく確認してみましょう。
①クロームの右上にある縦黒３点をクリックしてこの画面を開く
　その他のツール→閲覧履歴を消去

②削除期間を指定して実行
　※削除前に確認しましょう

最後に

せっかくWeb制作をはじめたのに、つまらないところで挫折したらもったいないですよね。
難しいと思うような問題も時間と執念をかければ大抵のことはなんとかなるはずですので、頑張りましょう。
これからも、気づいた情報を共有していきたいと思いますのでよろしくお願いします！

↧

positionプロパティについて

April 4, 2020, 8:43 am

≫ Next: あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。

≪ Previous: 【WordPress】こんなことかよ、、をなくす豆知識

positionプロパティとは？

指定した要素の配置方法を決めることができるプロパティです。
ボックスの配置方法を相対位置か絶対位置かを指定する際に使用します。
主に一緒に使われるのは、top / bottom / left / rightなどです。

positionの値について

振り返り用。

static
デフォルトの左上を基準値とします。この値のときには、top、bottom、left、rightは適用されません。
※positionを指定していない親ボックスは全てstaticになります。
覚え方 → 初期値！
fixed
絶対位置への配置となり、ブラウザ表示領域（ウィンドウ）の左上を基準位置とします。
またスクロールしても位置が固定されたままとなります。
覚え方 → 動かざること山の如し！fixedの場所が〜〜？ \\\ぜった〜い///
relative
相対位置への配置となります。staticを指定した場合と同じ基準位置になりますが、top、bottom、left、rightは適応されます。
覚え方 → 親クラスに設定するやつ
absolute
こちらも絶対位置への配置となりますが、position:relativeが設定された最も近い親要素の左上を基準位置とします。
また、どの親要素にもrelativeが設定されていない場合は、ブラウザ表示領域（ウィンドウ）の左上を基準位置とします。
覚え方 → 生みの親と育ての親が違う場合もあるので注意すべきやつ

relativeとabsoluteの関係性

ここではpositionを理解する第一歩としてrelativeとabsoluteの関係性に絞って理解を深めていきたいと思います。

positionの値(relativeやabsolute)の指定をしているはつまり、
『topとleftが、10pxがいいって？おけ！じゃあ基準位置どこにすんの？』ってことだと認識しました。

とりあえず理解はできたけど、なんかパッとしませんね。
自分の腑に落とし込むために、もっと身近なもので抽象的に捉えてみましょう。

relativeとabsoluteの関係は、牧場と羊さんです！！！(あくまでも私のイメージ)

relative(牧場)を親要素で指定することによって、absolute(羊さん達)は牧場でのびのびと快適に過ごすことができます。

ただ、topやleftのサイズ指定や子要素の大きさによっては...

このように、羊さん脱走事件も起きてしまう可能性はあるので要注意。
※わざとデザイン的に上半身だけ脱走させたい時もあるので、一概に事件とは言えませんね！

補足

natsukibokujo.html

<body><divclass="bokujo"style="position:relative"><divclass="hitsuzisan"><divclass="ushisan"style="position:absolute"></div></div></div></body>

このように、class="bokujo"にposition:relativeが付いている場合、class="ushisan"の親要素は一つ上のclass="hitsuzisan"ではなく、class="bokujo"となります。
つまり、何を親とするかはposition:relativeが記述されているものに起因する（直近のとは言っていない）ということです。

最後に

様々なWEBサイトでは、このpositionにz-indexやoverflowが絡んでくることがよくあります。
コードも女も男も、一筋縄ではいかないということですね。

気になるサイトを見つけたらソースを確認して、htmlとcssを確認していくのも面白そうですね！

↧

あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。

April 4, 2020, 9:00 am

≫ Next: 【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

≪ Previous: positionプロパティについて

できたもの

こちら

途中だけどとりあえず公開しちゃいます。
あとで綺麗にまとめます。

あとでつくるリスト

時間プルダウンに「絞り込まない」追加
項目並び替え実装(売値の昇順、降順)
Cookieを使用して南半球などのチェック設定を保持
Cookieを使用して捕まえたかどうかのチェック項目を追加
レスポンシブ化

↧

【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

April 4, 2020, 12:29 pm

≫ Next: 初心者によるプログラミング学習ログ 281日目

≪ Previous: あつ森の魚・虫リストCSVをVueでテーブル表示し、現在時刻でソートしました。

1. 記事の目的

わたしはCSSが書けません。

しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。
「最低限の見た目」＝「画面サイズに依存せずに画面の中心に配置する」と考えた私は、「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」と決意しQiitaに投稿しました。それだけです。

2. コード（コピペ用）

bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。

body{margin:0;display:flex;min-height:100vh;justify-content:center;align-items:center;/* flex-direction: column; */}

一般公開するので、一通り解説をします。
詳細は参考リンクに譲ります。

3. CSS の解説

3-1. 解説用html

解説用のhtmlサンプルは以下の通りです。今回はbodyタグの下に見た目用のCSSを追記しています。あくまで解説用のため、本来は必要ないです。

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>body{/* ここを個々に解説をします *//* margin: 0; *//* display: flex; *//* justify-content: center; *//* min-height: 100vh; *//* align-items: center; *//* flex-direction: column; */}</style></head><body><divclass="item item1">アイテム1</div><divclass="item item2">アイテム2</div><divclass="item item3">アイテム3</div></body><style>/* 枠線や背景色などの見た目用CSS */body{box-sizing:border-box;border:black10pxsolid;padding:10px;background-color:gainsboro;}.item{border:black2pxsolid;padding:3px;margin:3px;background-color:#fff;}</style></html>

こんな感じの見た目になります。（通常なら見た目用CSSがないため、もっと味気ない感じになりますよね。）

図1. 何もない状態

3-2. `margin:0;`

まず、marginと呼ばれる枠(border)の外の設定です。（図1の黒太枠の外の余白です。）

デフォルトではmargin:8pxとなっていました。margin:0に設定することで枠の外の余白をなくします。
※margin:0のときはpxのような単位がなくても構いません。もちろん、単位があっても動作します。

body{margin:0px;/* display: flex; *//* justify-content: center; *//* min-height: 100vh; *//* align-items: center; *//* flex-direction: column; */}

図2. margin:0 を設定

黒太枠（bodyのborder）の外側の余白(margin)がなくなりました。

3-3. `display: flex;`

flexコンテナと呼ばれるものを設定します。
以下のjustify-contentやalign-itemsなどを使用するために必要です。

body{margin:0;display:flex;/* justify-content: center; *//* min-height: 100vh; *//* align-items: center; *//* flex-direction: column; */}

図3. display: flexの適用

display:flexを適応するとこんな感じです。黒太枠内がflexコンテナです。
flexコンテナを適用したタグの子要素（アイテムたちのことです！）が左に寄せられています。
ブロックレベル要素（タグごとに改行される要素）のアイテムたちが横並びになっています。（図2だと縦に並んでました）

3-4. `justify-content:center;`

flexコンテナ内の要素を、水平方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）はjustify-content:flex-start。左寄せになります。（図3 参照）
今回はjustify-content:centerを指定して、中央にします。

body{margin:0px;display:flex;justify-content:center;/* min-height: 100vh; *//* align-items: center; *//* flex-direction: column; */}

図4. justify-content: center の適用

左に寄っていたアイテムたちが、真ん中に集合しました！

3.5. `min-height:100vh;`

flexコンテナの領域の最低の高さを100 vhに設定します。

vhはviewport heightと呼ばれる、viewport（表示領域）の高さに対する割合の単位です。
100vhはviewportに対して100%という意味です。
つまりmin-height:100vh＝「bodyの高さを少なくとも、表示領域と同じにする」になります。

body{margin:0px;display:flex;justify-content:center;min-height:100vh;/* align-items: center; *//* flex-direction: column; */}

図5. min-height: 100vh の適用

黒太枠線(bodyのborder)が画面いっぱいに広がりました。
それにともない、アイテムたちが縦にみょーんとなっています。

3-6. `align-items:center;`

図5でアイテムたちが縦にみょーんとなってしまっているのは、align-itemsのためです。
align-itemsはflexコンテナ内の要素を垂直方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）はalign-items:stretchが指定されている状態です。親要素の高さになります。（図5参照）
今回は、中央揃えにしたいのでalign-items:centerを指定します。

body{margin:0px;display:flex;justify-content:center;min-height:100vh;align-items:center;/* flex-direction: column; */}

図6. align-items: center の適用

3-7. （追記）`flex-direction: column;`

3-3. display: flex;でアイテムが横配置になりました。
これはflex-direction: row;がデフォルトで反映されているからです。

flex-directionはflexコンテナ内のアイテムの向きを指定するプロパティです。
flex-direction: column;とすることで、縦配置のまま画面中心にコンテンツを移動することができます。

4. さいごに

コンテンツを画面の中心に持ってくることができました！

これで最低限の見た目は保証がされるはずです！（私は信じています！）
あとはいいコンテンツを作るだけですね！…

参考リンク

CSS フレックスボックスレイアウト
flexboxをちゃんと理解したい場合はこちら。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
使い方がわかりやすく参考にしています。
CSS には vw, vh, vmin, vmax という単位がある
vhについてはこちら。

↧

初心者によるプログラミング学習ログ 281日目

April 4, 2020, 2:53 pm

≫ Next: 100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

≪ Previous: 【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

100日チャレンジの281日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
281日目は、

おはようございます
281日目　2.0h
・xdデザインカンプからのサイト模写
・メンターさんからの修正やる#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 4, 2020

↧

100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

April 5, 2020, 3:00 am

≫ Next: Sassで出来ること【vol.4】継承

≪ Previous: 初心者によるプログラミング学習ログ 281日目

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

CSSのプロパティ

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ

セレクタ(selector)はCSSを適応させる対象のことです。

プロパティ

プロパティは適応するスタイルの種類のことで、様々な種類があります。

例えばcolorでは色を指定することができます。

値(value)

プロパティの値です。プロパティに対して様々な値が用意されています。

複数のスタイルを指定する

一つのセレクタにスタイルを複数指定したい場合は
1つのスタイルの宣言を;で区切ります。

p {color:red; line-height:15px;}

プロパティの数はものすごく沢山あります。

機能ごとに少しづつ押さえて行きましょう。

色合い(カラー)

color

文字の色を指定するプロパティ

RGB値（16進数）
color: #f00;
color: #ff0000;

RGB値（10進数）
color: rgb(255,0,0);

RGB値（%）
color: rgb(100%,0%,0%);

RGBA値（10進数）
color: rgba(255,0,0,0.5);

RGBA値（%）
color: rgba(100%,0%,0%,0.5);

HSL値
color: hsl(0,255%,128%);

HSLA値
color: hsla(0,255%,128%,0.5);

基本色
/* black、silver、gray、white、maroon、red、purple、fuchsia、
  green、lime、olive、yellow、navy、blue、teal、aqua */
color: red;

拡張色
/* X11カラー140色など */
color: darkred;

透過色
color: transparent;

親要素のカラー値
color: currentColor;

opacity

色の透明度を指定するためのプロパティ
0.0で完全な透明

/* 0.0～1.0 */
opacity: 0.1;
opacity: 0.5;

背景

background
背景に関するプロパティの値をまとめて記述する。

値	意味
background-attachment	背景画像のスクロール方法
background-clip	背景の描画領域
background-color	背景色
background-image	背景画像
background-origin	背景画像の配置基点
background-position	背景画像の表示位置
background-repeat	背景画像の繰り返し方法
background-size	背景画像のサイズ

background-attachment

背景画像のスクロール方法を指定する。
background-image,background-positionと併用する

値	意味
fixed	背景画像を指定した位置に固定
local	背景画像を要素内のコンテンツと一緒にスクロール
scroll	通常通り、背景画像を要素と一緒にスクロール（初期値）

background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;

background-clip

background-imageで指定した背景画像や
background-colorで指定した背景色の描画領域を指定

値	意味
border-box	背景はボーダーボックス内に表示（初期値）
padding-box	背景はパディングボックス内に表示
content-box	背景はコンテンツボックス内に表示

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-color

要素の背景ボックスの色を指定する。
colorと同じ値

background-color: #f00;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgb(100%,0%,0%);
background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);
background-color: hsl(0,255%,128%);
background-color: hsla(0,255%,128%,0.5);
background-color: red;
background-color: darkred;
background-color: transparent;
background-color: currentColor;

background-image

要素の背景に置く画像を指定する。

background-image: url("aaa.gif");

background-origin

background-imageで指定した背景画像に対して配置の基準とする対象のボックスを
padding-box、border-box、content-boxのいずれかで指定する。

値	意味
padding-box	パディングボックスを配置の基準（初期値）
border-box	ボーダーボックスを配置の基準
content-box	コンテンツボックスを配置の基準

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

background-position

background-imageで指定した背景画像の、配置領域内での位置を指定

background-position: left 10px top 15px;
background-position: right 3em bottom 10px;
background-position: 100% 100%;

background-repeat

background-imageで指定した背景画像の繰り返しパターンを指定

値	意味
repeat-x	背景画像を水平方向に繰り返し
repeat-y	背景画像を垂直方向に繰り返し
repeat	背景画像を水平方向と垂直方向に繰り返し（初期値）
space	背景画像は指定方向へ繰り返して配置、スペースで調整
round	背景画像は指定方向へ繰り返して配置、画像の伸縮によって調整
no-repeat	背景画像を繰り返さない

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

background-size

background-imageで指定した背景画像のサイズを指定

値	意味
長さ	「px」や「em」などのサイズで画像の幅と高さを指定
パーセント値	パーセント値で画像の幅と高さを指定
auto	自動で画像の幅と高さを指定する。（初期値）
contain	画像の縦と横の比率を保ったまま、配置領域内にすべて収まる最大のサイズに画像を調整
cover	画像の縦と横の比率を保ったまま、配置領域をすべて覆う最小のサイズに画像を調整

background-size: 100% 100%;
background-size: 15px 15px;
background-size: 50% auto;
background-size: auto 4em;
background-size: auto;
background-size: 3em;

ボーダー

border

ボーダーに関するプロパティの値をまとめて記述するプロパティ

値	意味
border-color	ボーダーの色
border-style	ボーダーの種類
border-width	ボーダーの太さ

border: 2px solid #f00;
border: thin dotted rgb(255,0,0);
border: thick double hsla(0,255%,128%,0.5);

border-bottom

下側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-bottom: 2px solid #f00;
border-bottom: thin dotted rgb(255,0,0);
border-bottom: thick double hsla(0,255%,128%,0.5);

border-bottom-color

下側のボーダーの色を指定するプロパティ
colorと同様

border-bottom-color: #f00;
border-bottom-color: #ff0000;
border-bottom-color: rgb(255,0,0);
border-bottom-color: rgb(100%,0%,0%);
border-bottom-color: rgba(255,0,0,0.5);
border-bottom-color: rgba(100%,0%,0%,0.5);
border-bottom-color: hsl(0,255%,128%);
border-bottom-color: hsla(0,255%,128%,0.5);
border-bottom-color: red;
border-bottom-color: darkred;
border-bottom-color: transparent;
border-bottom-color: currentColor;

border-bottom-left-radius

左下の角丸を指定するプロパティ
数値やパーセントで指定する。

border-bottom-left-radius: 10px;
border-bottom-left-radius: 10em;
border-bottom-left-radius: 10%;
border-bottom-left-radius: 10px 10px;
border-bottom-left-radius: 10em 10em;
border-bottom-left-radius: 10% 10%;

border-bottom-right-radius

右下の角丸を指定するプロパティ
数値やパーセントで指定する。

border-bottom-right-radius: 10px;
border-bottom-right-radius: 10em;
border-bottom-right-radius: 10%;
border-bottom-right-radius: 10px 10px;
border-bottom-right-radius: 10em 10em;
border-bottom-right-radius: 10% 10%;

border-bottom-style

下側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

border-bottom-width

下側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-bottom-width: 2px;
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

border-color

上下左右の罫線の色をまとめて設定するためのもので、値を4個指定した場合
4つの値は、上、右、下、左の罫線の色をそれぞれ順に表す
colorと同等

border-color: #f00;
border-color: #f00 #f00;
border-color: #f00 #f00 #f00;
border-color: #f00 #f00 #f00 #f00;

border-image

ボーダー画像関連プロパティの値をまとめて指定するプロパティ

値	意味
border-image-source	ボーダーに使用する画像を指定
border-image-slice	画像を9つにスライス
border-image-width	ボーダー画像の太さを指定
border-image-outset	ボーダー画像の外側への拡張を指定
border-image-repeat	画像の繰り返し方法を指定

border-image: url("aaa.png") 10 10 / 30px round stretch;

border-image-outset

ボーダーイメージエリアを広げるプロパティ

値	意味
長さ	ボーダーイメージエリアを広げる距離を長さで指定
数値	border-widthの倍数を指定

border-image-outset: 10px;
border-image-outset: 10px 10px;
border-image-outset: 10px 10px 10px;
border-image-outset: 10px 10px 10px 10px;

border-image-repeat

border-image-sliceによって切り分けられた罫線画像の
上下および左右の罫線部分の画像の繰り返しについてキーワードで指定

値	意味
stretch	画像は繰り返されず、領域いっぱいまで拡張（初期値）
repeat	画像は領域いっぱいまで繰り返される
round	画像は領域いっぱいまで繰り返され、位置は画像パターンのサイズで調整
space	画像は領域いっぱいまで繰り返され、位置は余白のスペースによって調整されます。

border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;

border-image-slice

画像の分割位置を指定するプロパティ

値	意味
数値	画像の端からの距離を、「ピクセル数」や「ベクター座標」で指定
パーセント値	画像全体の幅や高さに対する割合で指定
fill	スライス後の画像の中央部分が破棄されない

border-image-slice: 10;
border-image-slice: 10 10;
border-image-slice: 10 10 10;
border-image-slice: 10 10 10 10;

border-image-slice: 10%;
border-image-slice: 10% 10%;
border-image-slice: 10% 10% 10%;
border-image-slice: 10% 10% 10% 10%;

border-image-slice: 10 fill;
border-image-slice: 10% fill;

border-image-source

ボーダーに使用する画像ファイルを指定するプロパティ

値	意味
url	ボーダーに使用する画像ファイルのURLを指定
none	ボーダーに画像を使用しない（初期値）

border-image-source: url("aaa.png");
border-image-source: none;

border-image-width

ボーダー画像の太さを指定するプロパティ

値	意味
パーセント値	「border画像領域」の幅または高さに対する割合距離を指定
数値	対応するborder-widthに対し,倍数で「border画像領域」の境界線からの距離を指定
auto	border-image-sliceと同じ値

border-image-width: 10;
border-image-width: 10px;
border-image-width: 10em;
border-image-width: 10%;

border-image-width: 10px 10px;
border-image-width: 10px 10px 10px;
border-image-width: 10px 10px 10px 10px;

border-image-width: auto;

border-left

左側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-left: 2px solid #f00;
border-left: thin dotted rgb(255,0,0);
border-left: thick double hsla(0,255%,128%,0.5);

border-left-color

左側のボーダーの色を指定するプロパティ
colorと同様

border-left-color: #f00;
border-left-color: #ff0000;
border-left-color: rgb(255,0,0);
border-left-color: rgb(100%,0%,0%);
border-left-color: rgba(255,0,0,0.5);
border-left-color: rgba(100%,0%,0%,0.5);
border-left-color: hsl(0,255%,128%);
border-left-color: hsla(0,255%,128%,0.5);
border-left-color: red;
border-left-color: darkred;
border-left-color: transparent;
border-left-color: currentColor;

border-left-style

左側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

border-left-width

左側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-left-width: 2px;
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

border-radius

4つの角丸をまとめて指定するプロパティ
数値やパーセント値で指定する。

border-radius: 10px;
border-radius: 10em;
border-radius: 10%;
border-radius: 10px 10px;
border-radius: 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border-radius: 10px / 10px;
border-radius: 10px 10px / 10px 10px;
border-radius: 10px 10px 10px / 10px 10px 10px;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

border-right

右側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-right: 2px solid #f00;
border-right: thin dotted rgb(255,0,0);
border-right: thick double hsla(0,255%,128%,0.5);

border-right-color

右側のボーダーの色を指定するプロパティ
colorと同等

border-right-color: #f00;
border-right-color: #ff0000;
border-right-color: rgb(255,0,0);
border-right-color: rgb(100%,0%,0%);
border-right-color: rgba(255,0,0,0.5);
border-right-color: rgba(100%,0%,0%,0.5);
border-right-color: hsl(0,255%,128%);
border-right-color: hsla(0,255%,128%,0.5);
border-right-color: red;
border-right-color: darkred;
border-right-color: transparent;
border-right-color: currentColor;

border-right-style

右側のボーダーの種類を指定するプロパティです

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

border-right-width

右側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-right-width: 2px;
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

border-style

上下左右の罫線の種類をまとめて設定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-style: solid;
border-style: solid solid;
border-style: solid solid solid;
border-style: solid solid solid solid;

border-top

上側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-top: 2px solid #f00;
border-top: thin dotted rgb(255,0,0);
border-top: thick double hsla(0,255%,128%,0.5);

border-top-color

上側のボーダーの色を指定するプロパティ
colorと同等

border-top-color: #f00;
border-top-color: #ff0000;
border-top-color: rgb(255,0,0);
border-top-color: rgb(100%,0%,0%);
border-top-color: rgba(255,0,0,0.5);
border-top-color: rgba(100%,0%,0%,0.5);
border-top-color: hsl(0,255%,128%);
border-top-color: hsla(0,255%,128%,0.5);
border-top-color: red;
border-top-color: darkred;
border-top-color: transparent;
border-top-color: currentColor;

border-top-left-radius

左上の角丸を指定するプロパティ
数値やパーセント値で指定する。

border-top-left-radius: 10px;
border-top-left-radius: 10em;
border-top-left-radius: 10%;
border-top-left-radius: 10px 10px;
border-top-left-radius: 10em 10em;
border-top-left-radius: 10% 10%;

border-top-right-radius

右上の角丸を指定するプロパティ
数値やパーセント値で指定する。

border-top-right-radius: 10px;
border-top-right-radius: 10em;
border-top-right-radius: 10%;
border-top-right-radius: 10px 10px;
border-top-right-radius: 10em 10em;
border-top-right-radius: 10% 10%;

border-top-style

上側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

border-top-width

上側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-top-width: 2px;
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

border-width

上下左右の罫線の太さをまとめて設定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-width: 2px;
border-width: 2px 2px;
border-width: 2px 2px 2px;
border-width: 2px 2px 2px 2px;

box-decoration-break

ボックスが改行する際の表示形式を指定するプロパティ

値	意味
slice	連続ボックスとして表示（初期値）
clone	別のボックスを生成

box-decoration-break: slice;
box-decoration-break: clone;

box-shadow

ボックスに影を付けるプロパティ

値	意味
長さ	影の長さなどを「px」や「em」で指定
色	色の指定を省略するとブラウザの設定色
inset	影をボックスの内部付
none	ボックスに影を付けない（初期値）

box-shadow: 5px 5px;
box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 5px 5px;
box-shadow: 5px 5px 5px 5px #f00;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5) inset;
box-shadow: 5px 5px 5px 5px #f00, 7px 7px 7px 7px #00f;

まとめ

プロパティの一部を紹介しました。
全てを完全に覚える必要はなく
プロパティと値の指定の仕方を覚えておき
適切なプロパティに変更できるように
検索の仕方を押さえておきましょう。

明日もプロパティの続きを行います。

君がエンジニアになるまであと84日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

↧

Sassで出来ること【vol.4】継承

April 5, 2020, 3:12 am

≫ Next: CSS_リストを右寄せにして、左から順番に表示する

≪ Previous: 100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

継承

scssでは一度使ったセレクタを継承して使用することが出来ます。
基本的には同じで少しずつ違うスタイルのモジュールを作りたいときに重宝しています！

スタイル要素の追加と変更を行うscssの例です。

.scss

.hoge{margin-right:15px;margin-bottom:1.5em;background:#fff;}.huga{@extend.hoge;margin-right:30px;float:right;}

cssに変換するとこの様になります。

変換後の.css

.hoge,.huga{margin-right:15px;margin-bottom:1.5em;background:#fff;}/*--以下、追加・変更部分--*/.huga{margin-right:30px;float:right;}

.hogeセレクタ.hugaセレクタでスタイルが共有されています。
また、.hugaで追加・変更された要素はスタイルの上書きがなされています。

ただし、継承を行う際の注意点として
「@ extend .hoge, .huga;」の様に複数一括指定することは出来ません。
「@ extend .hoge」
「@ extend .huga」という様に分けて書くことで複数のスタイルを継承することが出来ます。

リンク

Sassで出来ること【vol.1】Sassとは？
Sassで出来ること【vol.2】入れ子(ネスト)・変数
 Sassで出来ること【vol.3】関数
Sassで出来ること【vol.4】継承

↧

CSS_リストを右寄せにして、左から順番に表示する

April 5, 2020, 4:13 am

≫ Next: コロナウイルスの疾患者人数を可視化するサイトを作成しました

≪ Previous: Sassで出来ること【vol.4】継承

リストを右寄せにして左から順番に表示しようと思ったら、
右寄せにはなるけど右から順番に表示されてしまいました…

例えば、Home About Contact と表示させたいのに、
Contact　About　Home となってしまうのです。。
調べたところ、liだけにfloat: right;としてしまったのがダメだったようです。
以下のようにするとうまくいきました。

HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

CSS
ul {
 float: right;
}
li {
 float: left;
}

☟こちらのサイトを参考にしました。
cssのfloatプロパティについてのメモ

↧

コロナウイルスの疾患者人数を可視化するサイトを作成しました

April 5, 2020, 7:37 am

≫ Next: CSSのみでタイムラインを制作する自分用備忘録

≪ Previous: CSS_リストを右寄せにして、左から順番に表示する

コロナウイルスの疾患人数を可視化できるサイトを作る

疾患者が増えていると断片的にニュースで聞くものの、私自身人数規模がいまいちピンときていませんでした。
適切な危機感を持つには定量的な情報を把握するのが大事だと思い、疾患者人数をグラフ化したサイトを作りたいと思っていました。

疾患者情報を提供するAPIがあると小耳に挟んだので週末で作ることにしました。

仕様要件

世界及び日本の疾患者数の状況が一目で分かる
国ごとのランキングが視覚的に分かる
スマホでスクロールせずに見れる

制約条件

土日だけで完成させる（週を跨いだら多分完成しない。リリースするなら早い方がいい）
qiitaも土日中に書き終える（アウトプットとして残す）

出来上がったもの

https://github.com/growsic/covid-overview

レポジトリURL

コロナウイルスの疾患状況を可視化するサイトを作成しました。
15分おきにデータは更新されます。

サイト作成前は2000人代だった日本の疾患者は3000人を超え、アメリカに至っては30万人を超えグラフが突出した状態です。

コロナの現状を正しく知る一助になれば幸いです。https://t.co/mVICf6Pril pic.twitter.com/cqPXGJBTIA
— しましま Backend Engineer (@growsic) April 5, 2020

使った技術

RapidAPI
GitHub Pages
Vue.js
APEXCHARTS

を使いました。

データ取得：COVID-19のRapidAPI

RapidAPIでは有償/無償で多くのAPIが提供されています。
世界各国の疾患状況をリストで返してくれる無償のAPIがあったのでこちらを使いました。

今回使ったAPI:
https://rapidapi.com/api-sports/api/covid-193/details

サイトの公開: GitHub Pages

RapidAPIを使うことで静的サイトのみの公開で済むため、GitHub Pagesを利用しました。
GitHubでレポジトリを作成し、Settings > GitHub Pages > Sourceでmasterブランチを選択すれば、masterブランチにcommit/mergeするだけで自動的にGitHub Pagesに反映されるのでとても便利です。

JavaScript: Vue.js

ロジックや値の管理用です。復習がてら使いました。

グラフ描画: APEXCHARTS

グラフを描画するJavaScriptのライブラリとして、APEXCHARTSを使いました。
グラフの描画であればChart.jsの方が有名で使おうと思ったのですが、縦方向のグラフ

を描画しようとした時に縦の長さの調節が上手くできず、各Q&Aサイトでも解決仕切れていなそうだったので代わりのライブラリを探しました。

「chartjs alternative」で検索した中で比較的人気が高く、見た目も良かったAPEXCHARTSを使いました。

大抵のグラフ描画系ライブラリは

{
    series: [
      {
        data: []←値（Y軸。今回で言えば人数）
      },
    ],
    xaxis: {
      categories: []←ラベル(X軸。国名や時間など)
    },
}

のような描画オプションの中にあるリストに、表示したい値の情報をpushして行けば簡単にグラフの表示が出来ます。
後は描画オプションをドキュメントにしたがってカスタマイズしていくことで希望通りの見た目に出来ます。

グラフ描画系ライブラリはライブラリの提供するオプション以外での見た目変更がやりにくいため、望み通りの描画が出来ない場合は他のライブラリに乗り換えるのもありです。

困ったこと

アメリカの疾患者が多過ぎてグラフが潰れる(30万人 vs 2000人)

アメリカの30万人規模のグラフと他国を同じスケール上で並べると

2000人以上いる日本がほとんどいないように見えてしまいました。

一部の飛び値に引っ張られて他が小さく埋もれるのは意図と異なるので、人数ごと10国ずつにページングする仕様にしました。

表が思い通りの見え方にならない

先述の通りChart.jsからAPEXCHARTSに変えたところ、使用例が少なく本家ドキュメント以外参考になるサイトがありありませんでした。
ひたすらドキュメントのsearchボックスに描画オプションのキーワードを入れ、ドキュメントと公式サンプルを見比べ試行錯誤しながら解決方法を探しました。
グラフ描画系ライブラリはライブラリが提供する以外の見た目変更が難しいため、根気強くドキュメントから探すのも大切です。

見た目がカッコ良くならない/レスポンシブ対応したい

普段webフロントを触らなく基本的なhtml/cssしか分からないが、せっかくなら見た目も良いものにしたい。
今回で言えばグラフはAPEXCHARTSを使ったためグラフの見た目は問題なく、世界/日本のサマリ情報の表を特になんとかしたいと思っていました。
週末で完成まで持っていきたかったので、html/cssのテンプレートを活用/改良することにしました。

世界/日本のサマリ情報の表はGitHubのプラン別料金表のような表を加工すれば出来そうだと考えたので
「html css price table template」
で調べて出てきた沢山のテンプレートの中からイメージに近いものを見つけ、加工して使いました。

ある程度レスポンシブ対応はされているものの細部は修正が必要だったため、要点を絞って検索して修正して行きました。

最後に

会社のとびっきり優秀なエンジニアの方に、どうやったら優秀なエンジニアになれるか聞いた時に教えてもらった一つが、
「やりたいことを決めたら、現在到達可能そうなものを作りきってみる」
ということでした。

「要素技術をある程度理解したら、出来るような気持ちになってしまう。
でもいざ作り切ろうとしたら見えていなかった難しさが沢山見えてくる。
作りきってみてようやく理解できる」

ということだったので、作りたいもの決めたら必ず作りきることを最近考えるようにしていました。
今回はVue.jsとChart.js組み合わせればさくっと作れるだろうと思っていたものの、いざ着手してみると細かいハマるポイントがいくつかあり、半日で作るはずが1日半以上かかっていました。

何とか見てもらえるクオリティに仕上がったものの、今後も作りきることに真摯に向き合わないとなーと思っています。

↧

CSSのみでタイムラインを制作する自分用備忘録

April 5, 2020, 8:46 am

≫ Next: 初心者によるプログラミング学習ログ 282日目

≪ Previous: コロナウイルスの疾患者人数を可視化するサイトを作成しました

自分用のCSS備忘録です。
本当に自分用なんで解説などは一切ありません。

<div class="timeline RRR">
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru2">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
</div>

@charset "UTF-8";
*,*::before,*::after {box-sizing: border-box}
html{font-size:62.5%;}
body{font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration: none;}

.RRR{
  width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
}

.timeline{
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
}
.timeline__item{
  width: 180px;
  text-align: center;
  font-size:18px;
}
.name{
  font-size:16px;
  width: 80%;
  margin: 0 auto;
}
.maru{
  position: relative;
  margin-bottom: 10px;
}
.m{
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 auto;
  border:1px solid #313131;
}

.maru:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-left: 5%;
  display: inline-block;
  width: 90%;
  height: 1px;
  background-color: #313131;
}

.maru2{
  position: relative;
  margin-bottom: 10px;
}

↧

初心者によるプログラミング学習ログ 282日目

April 5, 2020, 12:52 pm

≫ Next: CSSだけで数値をカウントする

≪ Previous: CSSのみでタイムラインを制作する自分用備忘録

100日チャレンジの282日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
282日目は、

おはようございます
282日目　6h
・xdデザインカンプからのwebサイト模写
・画像をpngではなくsvgに変更#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 5, 2020

↧

CSSだけで数値をカウントする

April 5, 2020, 9:14 pm

≫ Next: 検索機能で検索boxの下に候補を出す方法

≪ Previous: 初心者によるプログラミング学習ログ 282日目

サンプルはこちら。

See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTMLにもCSSにも数値は書いておらず、連番リスト（ol）も使っていません。

変数をカウントする

h2{counter-increment:x;counter-reset:y;}h3{counter-increment:y;}

h2,h3 の見出しに counter-incrementというプロパティを使っています。

このプロパティはCSS内で変数を定義すると同時に、その変数を+1します。
上記の場合は h2 ごとに xが、h3ごとに yが1つ増える宣言をしています。

また h2 には counter-reset: yも宣言しています。
これは指定した変数を0に戻すプロパティです。

h3 ごとに増える yをリセットすることで、大見出し(h2)ごとに小見出し(h3)の番号を1から振り直す形になります。

ちなみに counter-increment: x y;という形で複数の変数を同時にカウントすることもできます。

変数を表示する

h2:before{content:"Part"counter(x)" : ";}h3:before{content:counter(x)"-"counter(y)" : ";}

変数の表示ですが、現在 counter-incrementで作った変数は疑似要素 :beforeか :afterの、 contentでしか表示できません。

疑似要素に content: counter(x)で変数を表示することができますが、サンプルのように前後に文字を入れたり、複数の変数も表示できます。

「X章Y条」のように長い条項が続く文章も番号を意識せず作れますし、ほかにも連番が必要な時にプログラムに頼らず表示することができます。

↧

検索機能で検索boxの下に候補を出す方法

April 5, 2020, 11:40 pm

≫ Next: 100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4

≪ Previous: CSSだけで数値をカウントする

0 はじめに

　今回は以下の写真のように、ユーザーが検索する時の助けになるように、boxの下に候補を出す方法を記述します。
　もっといい方法があるとは思いますが、今の私の理解力と技術ではこれがベストです。

バージョンです

　version ruby 2.5.1p57
          Rails 5.2.4.1

１　実装の流れ

a) controllerで候補に出すデータをインスタンス変数に入れる

b) viewにinputタグ（type:hidden）を記述。その中に１の変数を記述

c) 検索boxに入力されるたびに発火させ処理させる

d) 検索boxに入力された値をもとに正規表現を作成

e) インスタンス変数の値をeachで取り出して正規表現とマッチするか調べる

f) マッチしたものだけ関数を使って要素を作り、検索boxにappendする

２　コード・解説

a) controllerで候補に出すデータをインスタンス変数に入れる

jsサイドにデータを渡すためのコードです。
今回は「new.html.haml」「edit.html.haml」以外に検索機能を実装します。productsコントローラーにbeforeアクションを設定しました。@wordに商品名を入れ、@id_boxにproduct.idを入れます。

products_controller.rb

classProductsController<ApplicationControllerbefore_action:set_product_name,except: [:new,:edit]---省略---defset_product_name@product_for_search=Product.all@wordbox=[]@id_box=[]@product_for_search.eachdo|product|@id_box<<product.id　　　@word_box<<product.nameendendend

b) viewにinputタグ（type:hidden）を記述。その中に１の変数を記述

　jsが発火した時にここから商品名及び、商品idを取得できるようにします。
　一番下の#result-wordの下にliで候補を表示します

index.html.haml

=form_with(url: products_searches_path,local: true,method: :get,class: "search-form")do|form|　.search-group
　　= form.text_field :keyword, placeholder: "商品を検索する", class: "main-header__search-box", id: "_products_searches_keyword"
　　= form.label :keyword, for: "search-btn", class: "search-label" do
　　　= form.submit "検索", class: "search-btn", id: "search-btn", style: "display: none"
　　　= image_tag 'icon-search 1.png',size: "30x25",class: "main-header__search-img"
　　%input{name: "search-word-list", type: "hidden", value: @wordbox, class: 'search_word_list' }　　←この行を入れる
　　%input{name: "search-id-list", type: "hidden", value: @id_box, class: 'search_id_list' }　　　　　←この行を入れる
　%ul#result-word　←この下に候補用の要素を追加する

c) 検索boxに入力されるたびに発火させ処理させる

jsファイル完全版

search.js

$(document).on('turbolinks:load',function(){varsearchWordList=$('.search_word_list').val();functionappendList(word,number){letitem=$(`
    <li class="list result-list">
      <a href = "/products/${number}" class="search-word-list">
        <p>${word}</p>
    `);$("#result-word").append(item);}functioneditElement(element){if(element!=""){letresult="^"+element;returnresult;}else{letresult="$^";returnresult;}}$("#_products_searches_keyword").on("keyup",function(){letinput=$("#_products_searches_keyword").val();if(input==""){$("#result-word").empty();}else{letinputs=input.split("");letnewInputs=inputs.map(editElement);letreg=RegExp(newInputs.join("|"));$.each(JSON.parse(searchWordList),function(i,word){varsearchIdList=$('.search_id_list').val();searchIdList=JSON.parse(searchIdList)if(word.match(reg)){appendList(word,searchIdList[i]);}});};});});

search.jsの詳細コード

search.js

varsearchWordList=$('.search_word_list').val();⬅️①$("#_products_searches_keyword").on("keyup",function(){　⬅️②letinput=$("#_products_searches_keyword").val();if(input==""){$("#result-word").empty();}else{letinputs=input.split("");letnewInputs=inputs.map(editElement);letreg=RegExp(newInputs.join("|"));---省略---});};});

①　ページが読み込まれた時に商品の名前、idを取得する
②　↓入力されるたびに候補が出て欲しいので、keyupを使って発火させる。
　　↓発火すると検索boxに入れられた値を取得する
　　↓何も入力されていなければ候補用の要素を削除する
　　↓入力された検索ワードが複数ある場合はスペースで区切り、配列(inputs)にする
　　↓配列(inputs)をmapで新しい配列にする　d)に飛ぶ
　　↓正規表現用の変数を用意し、先ほど ^ マークを付けた配列を"|"(「または」を意味する)を間に入れて合体させる。

d) 検索boxに入力された値をもとに正規表現を作成

search.js

functioneditElement(element){if(element!=""){letresult="^"+element;returnresult;}else{letresult="$^";returnresult;}}

inputで分けられた配列の中身があるときだけ検索ワードの先頭に ^ マークをつける。「test ␣」のようにスペースが空いている場合は「"^test", "^"」というふうに配列が作成されるので、すべての商品名がヒットしてしまう。「""」の時は ^ マークは付けないようにする。　b)に戻る。

e) インスタンス変数の値をeachで取り出して正規表現とマッチするか調べる

search.js

$.each(JSON.parse(searchWordList),function(i,word){varsearchIdList=$('.search_id_list').val();searchIdList=JSON.parse(searchIdList)if(word.match(reg)){appendList(word,searchIdList[i]);}});

　一行目のJSON.parseはsearchWordListをobjectに変換するためのメソッド
　jsのeachはobjectに対して処理を行うようでこの記述がないとエラーが表示される。（理解仕切れていません）

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ["aa", "test", "選択してくださいテスト", "test-sample", "服"]

商品のidにも同じように記述する
はじめは商品のidを渡さずに、eachのindexを使ってリンクのURLを作成していたが、本番環境でエラーが出たので、書き換えました。

f) e)のeachでマッチしたものだけ、関数を使って要素を作り、検索boxにappendする

search.js

functionappendList(word,number){letitem=$(`
   <li class="list result-list">
    <a href = "/products/${number}" class="search-word-list">
     <p>${word}</p>
  `);$("#result-word").append(item);}

候補をクリックするとその商品のページに移動するためリンクを作成しています。その時にproduct.idが必要なめviewから取得しました。

３　最後に

今回のポイントは
・商品のデータをビューからjsに渡す
・検索ワードを入力している途中でスペースが入った時にすべての商品名がヒットしてしまうので、スペースには ^ マークを付けない
・JSON.parseでobjectに変換する
・検索ワードを正規表現にして該当するものだけヒットするようにする

以上です。
最後までご覧いただきありがとうございました。

↧

100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4

April 6, 2020, 3:00 am

≫ Next: GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

≪ Previous: 検索機能で検索boxの下に候補を出す方法

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

CSSのプロパティの続きです。

ポジション

bottom

要素を配置する際に、下からの距離を指定するためのプロパティ

値	意味
長さ	「5px」「3em」のように、数値に単位を付けて指定
パーセント値	「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す
auto	値が自動的に計算（初期値）

bottom: 10px;
bottom: 10%;
bottom: auto;

clip

ボックスをクリッピングするためのプロパティ

値	意味
auto	クリッピングされません。ボックス全体が表示（初期値）
rect(上, 右, 下, 左)	ボックスの左または上からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定
inset(上, 右, 下, 左)	ボックスの四辺からの距離を「px」「%」などの単位を付けて、上→右→下→左の順にカンマで区切って指定

clip: auto;
clip: rect(30px, 100px, 70px, 25px);
clip: rect(30%, 100%, 70%, 25%);
clip: inset(30px, 0px, 30px, 25px);
clip: inset(30%, 0%, 30%, 25%);

left

要素を配置する際に、左からの距離を指定するためのプロパティ

値	意味
長さ	「5px」「3em」のように、数値に単位を付けて指定
パーセント値	「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す
auto	値が自動的に計算されます。（初期値）

left: 10px;
left: 10%;
left: auto;

position

ボックスの配置を相対的にするか絶対的にするかを指定するプロパティ

値	意味
relative	要素の通常の位置から、top、right、bottom、leftで指定した分だけ相対的に移動
absolute	要素を、top、right、bottom、leftで指定した座標に絶対的に配置
fixed	要素をページ内に絶対的に配置この場合、スクロールしても要素の位置が固定されたまま
static	要素を通常どおり配置し、top、right、bottom、leftを適用なし（初期値）

position: relative;
position: absolute;
position: fixed;
position: static;

right

要素を配置する際に、右からの距離を指定するためのプロパティ

値	意味
長さ	「5px」「3em」のように、数値に単位を付けて指定
パーセント値	「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す
auto	値が自動的に計算されます。（初期値）

right: 10px;
right: 10%;
right: auto;

top

要素を配置する際に、上からの距離を指定するためのプロパティ

値	意味
長さ	「5px」「3em」のように、数値に単位を付けて指定
パーセント値	「100%」のように、数値に「%」の単位を付けて、他に対する割合で示す
auto	値が自動的に計算されます。（初期値）

top: 10px;
top: 10%;
top: auto;

z-index

要素のスタックレベルを指定するプロパティ

値	意味
auto	スタックレベルは「0」（初期値）
整数	スタックレベルを整数で指定「0」を基準として、値が大きいほど上。

z-index: auto;
z-index: 3;
z-index: 2;
z-index: 1;
z-index: 0;
z-index: -1;
z-index: -2;
z-index: -3;

画像

image-resolution

画像の解像度を指定するプロパティ

値	意味
解像度	数値に「dpi」を付けて指定
from-image	画像形式特有の解像度を指定
snap	「dpi」または「from-image」で指定した解像度とデバイスの解像度

image-resolution: 300dpi;
image-resolution: from-image;
image-resolution: 300dpi from-image;
image-resolution: 300dpi snap;
image-resolution: from-image snap;

object-fit

オブジェクトをボックスにフィットさせる方法を指定するプロパティ

値	意味
fill	オブジェクトはアスペクト比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされます。（初期値）
contain	オブジェクトはアスペクト比を保ちながら、全体がコンテンツボックスに収まるようにリサイズ
cover	オブジェクトはアスペクト比を保ちながら、コンテンツボックスを完全に覆うようリサイズ
none	オブジェクトはリサイズしない
scale-down	「none」か「contain」の小さい方を適用

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

object-position

ボックス内のオブジェクトの位置を指定するプロパティ

値	意味
パーセント値	配置領域の幅または高さの相対位置と、オブジェクトの幅または高さの相対位置を合わせる。
長さ	「px」や「em」などのサイズで、水平または垂直方向の位置を指定
top	値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味
right	値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味
bottom	値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味
left	値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味
center	水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50%

object-position: left 10px top 15px;
object-position: right 3em bottom 10px;
object-position: 100% 100%;

マーキー

マーキーはテキストを流れるように動かす方法の指定です。

marquee-direction

マーキーのスクロール方向を指定するプロパティ

値	意味
forward	マーキーの向きが水平の場合は「左から右」、垂直の場合は「上から下」に、コンテンツをスクロール（初期値）
reverse	マーキーの向きが水平の場合は「右から左」、垂直の場合は「下から上」に、コンテンツをスクロール

marquee-direction: forward;
marquee-direction: reverse;

marquee-play-count

マーキーの再生回数を指定するプロパティ

値	意味
数値	マーキーの再生回数を、1以上の整数値で指定
infinite	マーキーを無限に再生し続ける

marquee-play-count: 5;
marquee-play-count: infinite;

marquee-speed

マーキーのスクロール速度を指定するプロパティ

値	意味
slow	遅めにスクロール
normal	普通の速度でスクロール（初期値）
fast	速めにスクロール

marquee-speed: slow;
marquee-speed: normal;
marquee-speed: fast;

marquee-style

マーキーの動き方を指定するプロパティ

値	意味
scroll	コンテンツは、表示領域をスクロール（初期値）
slide	コンテンツは、表示領域内でスライドのように停止
alternate	コンテンツは、表示領域内で往来

marquee-style: scroll;
marquee-style: slide;
marquee-style: alternate;

マルチカラム

break-after

段組み表示するときに、特定の要素の後ろでの改段方法を指定するプロパティ

値	意味
auto	ブラウザの設定に従う（初期値）
column	特定の要素の後ろで、常に改段
avoid-column	特定の要素の後ろで、改段しない

img {
    display: block;
    break-after: column;
}

break-before

段組み表示するときに、特定の要素の手前での改段方法を指定するプロパティ

値	意味
auto	ブラウザの設定に従う（初期値）
column	特定の要素の手前で、常に改段
avoid-column	特定の要素の手前で、改段しない

img {
    display: block;
    break-before: column;
}

break-inside

段組み表示するときに、特定の要素内での改段方法を指定するプロパティ

値	意味
auto	ブラウザの設定に従う（初期値）
avoid-column	特定の要素内で、改段しない

break-inside: auto;
break-inside: avoid-column;

column-count

段組みの段の数を指定するプロパティ

値	意味
auto	段の数は自動で算出（初期値）
整数	段の数を整数値で指定

column-count: auto;
column-count: 2;
column-count: 5;

column-fill

段組み表示の際、各カラムのテキストを均等に分配し、カラムの高さを平均化するプロパティ

値	意味
balance	各カラムのテキストを均等に分配し、カラムの高さを平均化（初期値）
auto	通常どおり、先頭のカラムから連続してテキストを満たす

column-fill: balance;
column-fill: auto;

column-gap

column-gapは、段組みの段と段の間隔を指定するプロパティです

値	意味
normal	ブラウザの設定に従います。通常、1emの間隔が空く（初期値）
長さ	数値に「px」「em」「ex」などの単位をつけて指定

column-gap: normal;
column-gap: 10px;
column-gap: 1.2em;

column-rule

段組みの、段と段の間の境界線の「種類、色、太さ」をまとめて指定するプロパティ

値	意味
column-rule-width	境界線の「太さ」を指定
column-rule-style	境界線の「種類」を指定
column-rule-color	境界線の「色」を指定
transparent	境界線を透明にする

column-rule: 1px solid #000;
column-rule: 1em double black;
column-rule: thin dashed rgb(255,0,0);
column-rule: transparent;

column-rule-color

段組みの、段と段の間の境界線の「色」を指定するプロパティ
colorと同等

column-rule-color: #f00;
column-rule-color: #ff0000;
column-rule-color: rgb(255,0,0);
column-rule-color: rgb(100%,0%,0%);
column-rule-color: rgba(255,0,0,0.5);
column-rule-color: rgba(100%,0%,0%,0.5);
column-rule-color: hsl(0,255%,128%);
column-rule-color: hsla(0,255%,128%,0.5);
column-rule-color: red;
column-rule-color: darkred;
column-rule-color: transparent;
column-rule-color: currentColor;

column-rule-style

段組みの、段と段の間の境界線の「種類」を指定するプロパティ

値	意味
none	境界線を引かない。column-rule-colorやcolumn-rule-widthは無視（初期値）
hidden	境界線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる線
outset	ボックス全体が隆起したようにみえる線

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

column-rule-width

段組みの、段と段の間の境界線の「太さ」を指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

column-rule-width: 1px;
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

column-span

段組み表示の際、特定の要素を複数のカラムにまたがって表示させるプロパティ

値	意味
none	通常どおり、1つのカラムに収める（初期値）
all	特定の要素は、すべてのカラムにまたがって表示

h2 {
    column-span: all;
}

column-width

段組みの段の幅を指定するプロパティ

値	意味
auto	段の幅は自動で算出（初期値）
長さ	数値に「px」「em」「ex」などの単位をつけて指定

column-width: auto;
column-width: 100px;
column-width: 20em;

columns

段組みの段の幅と、段数をまとめて記述するためのプロパティ

値	意味
column-width	段の幅を指定
column-count	段の数を指定

columns: 3 30em;
columns: 4 200px;
columns: 5 auto;
columns: auto 12em;
columns: auto auto;

音声

cue

cue-beforeとcue-afterをまとめて指定するためのショートハンドプロパティ

値	意味
cue-before	要素の前の合図音を指定
cue-after	要素の後の合図音を指定

cue: url("info.mp3");
cue: url("start.mp3") url("end.mp3");
cue: none;

cue-after

要素の後ろの合図音を指定するプロパティ

値	意味
url	音声ファイルの場所を指定
デシベル	数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く
none	合図音を指定しない（初期値）

cue-after: url("end.mp3");
cue-after: url("end.mp3") -3dB;
cue-after: url("end.mp3") 6dB;
cue-after: none;

cue-before

要素の前の合図音を指定するプロパティです

値	意味
url	音声ファイルの場所を指定
デシベル	数値に「dB」をつけて指定します。指定する場合は、半角スペースで区切って「url」の後ろに置く
none	合図音を指定しない（初期値）

cue-before: url("start.mp3");
cue-before: url("start.mp3") -3dB;
cue-before: url("start.mp3") 6dB;
cue-before: none;

pause

pause-beforeとpause-afterをまとめて指定するためのショートハンドプロパティ

値	意味
pause-before	要素の前で音声を一時停止
pause-after	要素の後ろで音声を一時停止

pause: 1200ms;
pause: none;
pause: x-weak;
pause: weak;
pause: medium;
pause: strong;
pause: x-strong;
pause: 1200ms 1500ms;
pause: 1200ms none;
pause: weak strong;

pause-after

要素の後ろで音声を一時停止するプロパティ

値	意味
時間	一時停止の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定
none	一時停止しない、0msと同じ（初期値）
x-weak	かなり弱い区切り
weak	やや弱い区切り
medium	中くらいの強さの区切り
strong	やや強い区切り
x-strong	かなり強い区切り

pause-after: 1200ms;
pause-after: none;
pause-after: x-weak;
pause-after: weak;
pause-after: medium;
pause-after: strong;
pause-after: x-strong;

pause-before

要素の前で音声を一時停止するプロパティ

値	意味
時間	一時停止の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定
none	一時停止しない、0msと同じ（初期値）
x-weak	かなり弱い区切り
weak	やや弱い区切り
medium	中くらいの強さの区切り
strong	やや強い区切り
x-strong	かなり強い区切り

pause-before: 1200ms;
pause-before: none;
pause-before: x-weak;
pause-before: weak;
pause-before: medium;
pause-before: strong;
pause-before: x-strong;

rest

rest-beforeとrest-afterをまとめて指定するためのショートハンドプロパティ

値	意味
rest-before	要素内容を話す前の休符を指定
rest-after	要素内容を話した後の休符を指定

rest: 1200ms;
rest: none;
rest: x-weak;
rest: weak;
rest: medium;
rest: strong;
rest: x-strong;
rest: 1200ms 1500ms;
rest: 1200ms none;
rest: weak strong;

rest-after

要素内容を話した後の休符を指定するプロパティ

値	意味
時間	休符の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定
none	休符を指定しない、0msと同じ。（初期値）
x-weak	かなり弱い区切り
weak	やや弱い区切り
medium	中くらいの強さの区切り
strong	やや強い区切り
x-strong	かなり強い区切り

rest-after: 1200ms;
rest-after: none;
rest-after: x-weak;
rest-after: weak;
rest-after: medium;
rest-after: strong;
rest-after: x-strong;

rest-before

要素内容を話す前の休符を指定するプロパティ

値	意味
時間	休符の時間を指定します。数値に「s」（秒）または「ms」（ミリ秒）を付けて指定
none	休符を指定しない、0msと同じ。（初期値）
x-weak	かなり弱い区切り
weak	やや弱い区切り
medium	中くらいの強さの区切り
strong	やや強い区切り
x-strong	かなり強い区切り

rest-before: 1200ms;
rest-before: none;
rest-before: x-weak;
rest-before: weak;
rest-before: medium;
rest-before: strong;
rest-before: x-strong;

トランスフォーム

backface-visibility

要素の背面の表示/非表示を切り替えるプロパティ

値	意味
visible	背面を表示（初期値）
hidden	要素ボックスを隠す

backface-visibility: visible;
backface-visibility: hidden;

perspective

子要素に対して遠近効果を指定するプロパティ

値	意味
none	遠近効果は適用されない（初期値）
数値	奥行きを示す値を、単位なしのピクセル値で指定数値が0以下の場合、遠近効果は適用されない

perspective: none;
perspective: 300;

perspective-origin

perspectiveでの遠近投影の基点となる位置を指定するプロパティ

値	意味
長さ	要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定
パーセント値	要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定
left	要素ボックスの左端を示す
center	要素ボックスの幅の中心または高さの中心を示す
right	要素ボックスの右端を示す
top	要素ボックスの上端を示す
bottom	要素ボックスの下端を示す

perspective-origin: left;
perspective-origin: left top;
perspective-origin: left 30%;
perspective-origin: right bottom;
perspective-origin: center top;
perspective-origin: 20% 10%;
perspective-origin: 50px 30px;

transform

要素を変形させるプロパティ

2D変形関数
matrix(X軸方向への拡大縮小率, Y軸方向への傾斜角度, X軸方向への傾斜角度, Y軸方向への拡大縮小率, X軸方向への移動距離, Y軸方向への移動距離)
translate(X軸方向への移動距離, Y軸方向への移動距離)
translateX(X軸方向への移動距離)
translateY(Y軸方向への移動距離)
scale(X軸方向への拡大縮小率, Y軸方向への拡大縮小率)
scaleX(X軸方向への拡大縮小率)
scaleY(Y軸方向への拡大縮小率)
rotate(角度)
skewX(X軸方向への傾斜角度)
skewY(Y軸方向への傾斜角度)

3D変形関数
matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
translate3d(X軸方向への移動距離, Y軸方向への移動距離, Z軸方向への移動距離)
translateZ(Z軸方向への移動距離)
scale3d(X軸方向への拡大縮小率, Y軸方向への拡大縮小率, Z軸方向への拡大縮小率)
scaleZ(Z軸方向への拡大縮小率)
rotate3d(X軸の方向ベクトル数値, Y軸の方向ベクトル数値, Z軸の方向ベクトル数値, 回転の角度)
rotateX(角度)
rotateY(角度)
rotateZ(角度)
perspective(ピクセル値)

/* 2D変形 */
transform: translate(100px, 50px) rotate(45deg);
transform: skewX(15deg) skewY(15deg);

/* 3D変形 */
transform: translate3d(100px, 50px, 20px) rotateX(45deg);
transform: perspective(200) rotateY(25deg);

transform-origin

要素を変形させる際の基準点を指定するプロパティ

値	意味
長さ	要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定
パーセント値	要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定
left	要素ボックスの左端を示3個目には指定できない
center	要素ボックスの幅の中心または高さの中心を示3個目には指定できない
right	要素ボックスの右端を示3個目には指定できない
top	要素ボックスの上端を示3個目には指定できない
bottom	要素ボックスの下端を示3個目には指定できない

transform-origin: left;
transform-origin: left top;
transform-origin: left 30%;
transform-origin: left top 20px;
transform-origin: right bottom 10px;
transform-origin: center top 0;
transform-origin: 20% 10% 5px;
transform-origin: 50px 30px 5px;

transform-style

3D変形が指定されている要素内での、子要素の表示方法を指定するプロパティ

値	意味
flat	すべての子要素は、3D変形した親要素の2D平面内へ平面化されて表示（初期値）
preserve-3d	子要素には、自信に指定された3D空間内の配置が適用

transform-style: flat;
transform-style: preserve-3d;

トランジション

transition

遷移関連プロパティをまとめて指定するショートハンドプロパティ

値	意味
transition-property	遷移させるプロパティを指定
transition-duration	変化にかける時間を指定
transition-timing-function	変化中の速度に緩急をつける
transition-delay	遷移の開始を遅らせる

transition: color 10s linear 5s;
transition: background-color 20s ease-in 8s;
transition: color 10s linear 5s, background-color 20s ease-in 8s;

transition-delay

遷移の開始を遅らせるプロパティ

値	意味
時間を示す値	「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」

transition-delay: 5s;
transition-delay: 300ms;
transition-delay: 5s, 10s;
transition-delay: 300ms, 120ms;
transition-delay: 5s, 10s, 15s;
transition-delay: 300ms, 120ms, 200ms;

transition-duration

変化にかける時間を指定するプロパティ

値	意味
時間を示す値	「10s」や「15ms」のように、数値に単位を付けて指定、単位は、秒「s」、ミリ秒「ms」

transition-duration: 5s;
transition-duration: 300ms;
transition-duration: 5s, 10s;
transition-duration: 300ms, 120ms;
transition-duration: 5s, 10s, 15s;
transition-duration: 300ms, 120ms, 200ms;

transition-property

遷移させるプロパティを指定するプロパティ

値	意味
all	遷移可能な全てのプロパティを遷移対象として指定（初期値）
none	遷移させるプロパティを指定しない
プロパティ名	遷移させるプロパティ名を指定カンマで区切って複数のプロパティ名を指定

transition-property: all;
transition-property: none;
transition-property: color;
transition-property: background-color;
transition-property: color, background-color;
transition-property: color, background-color, margin;
transition-property: color, background-color, margin, width;

transition-timing-function

変化中の速度に緩急をつけるプロパティ

値	意味
ease	遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ（初期値）
linear	遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じ
ease-in	始めは緩やかに、終わりにかけて加速し続けるcubic-bezier(0.42, 0, 1.0, 1.0)と同じ
ease-out	始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じ
ease-in-out	始めは緩やかに、途中で加速し、最後また緩やかに終わる
step-start	始めから終了状態に一気に変化し、以後変化しないsteps(1, start)と同じ
step-end	始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。
steps(ステップ数, startかend)	プロパティの時間的変化を、複数の段階に分けて行う。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用される
cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標)	ベジェ曲線を描くためのP1、P2の座標を、0.0～1.0の範囲の4つの数値で指定

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(1, end);
transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);

アニメーション

animation

アニメーション関連プロパティをまとめて指定するショートハンドプロパティ

値	意味
animation-name	適用するアニメーションの名前を指定
animation-duration	アニメーション1回分の再生時間を指定
animation-timing-function	アニメーションの速度に緩急をつける
animation-delay	アニメーションの開始を遅らせる
animation-iteration-count	アニメーションの再生回数を指定
animation-direction	アニメーションを逆方向に再生させる

animation: anime1 10s linear 3s 2 normal;
animation: anime1 10s linear 3s 2 normal, anime2 15s ease-in 4s 5 reverse;

animation-delay

、アニメーションの開始を遅らせるためのプロパティ

値	意味
時間を示す値	「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」

animation-delay: 5s;
animation-delay: 300ms;
animation-delay: 5s, 10s;
animation-delay: 300ms, 120ms;
animation-delay: 5s, 10s, 15s;
animation-delay: 300ms, 120ms, 200ms;

animation-direction

アニメーションを逆方向に再生させるプロパティ

値	意味
normal	アニメーションの繰り返し再生は、すべて通常方向に再生される（初期値）
reverse	アニメーションの繰り返し再生は、すべて逆方向に再生される
alternate	アニメーションの繰り返し再生は、奇数カウントで通常方向に再生され、偶数カウントで逆方向に再生される
alternate-reverse	アニメーションの繰り返し再生は、奇数カウントで逆方向に再生され、偶数カウントで通常方向に再生される

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

animation-duration

アニメーション1回分の再生時間を指定するプロパティ

値	意味
時間を示す値	「10s」や「15ms」のように、数値に単位を付けて指定、単位は秒「s」ミリ秒「ms」

animation-duration: 5s;
animation-duration: 300ms;
animation-duration: 5s, 10s;
animation-duration: 300ms, 120ms;
animation-duration: 5s, 10s, 15s;
animation-duration: 300ms, 120ms, 200ms;

animation-iteration-count

アニメーションの再生回数を指定するプロパティ

値	意味
infinite	アニメーションを無限に繰り返す
数値	再生回数を指定

animation-iteration-count: infinite;
animation-iteration-count: 2;
animation-iteration-count: 2, 5;
animation-iteration-count: 2, 5, 10;

animation-name

適用するアニメーションの名前を指定するプロパティ

値	意味
none	アニメーションは適用されない（初期値）
アニメーション名	@keyframesで設定したアニメーションIDを指定カンマで区切って複数のアニメーションIDを指定可能

animation-name: none;
animation-name: anime1;
animation-name: anime1, anime2;

animation-timing-function

アニメーションの速度に緩急をつけるプロパティ

値	意味
ease	遷移の始めは緩やかに、徐々に加速し、最後にスッと減速cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じです。（初期値）
linear	遷移の始めから終わりまで一定の速度で変化cubic-bezier(0, 0, 1.0, 1.0)と同じです。
ease-in	始めは緩やかに、終わりにかけて加速し続けます。cubic-bezier(0.42, 0, 1.0, 1.0)と同じです。
ease-out	始めから最大速度で、最後は緩やかに終わります。cubic-bezier(0, 0, 0.58, 1.0)と同じです。
ease-in-out	始めは緩やかに、途中で加速し、最後また緩やかに終わります。cubic-bezier(0.42, 0, 0.58, 1.0)と同じです。
step-start	始めから終了状態に一気に変化し、以後変化しません。steps(1, start)と同じです。
step-end	始めは変化せず、最後に終了状態に一気に変化steps(1, end)と同じです。
steps(ステップ数, startかend)	プロパティの時間的変化を、複数の段階に分けて行います。1個目には、ステップ数を0以上の整数で指定2個目には、startかendを指定2個目を省略した場合は、endが適用されます。
cubic-bezier(P1のX座標, P1のY座標, P2のX座標, P2のY座標)	ベジェ曲線を描くためのP1、P2の座標を、0.0～1.0の範囲の4つの数値で指定

animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(1, end);
animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);

フレキシブルボックス

align-items

フレキシブルボックス内でのボックスの揃え方を指定するプロパティ

値	意味
flex-start	ボックスの先頭をフレックスボックスの斜め軸に沿った先頭位置に揃える
flex-end	ボックスの末尾をフレックスボックスの斜め軸に沿った末尾位置に揃える
center	ボックスをフレックスボックスの斜め軸に沿って中央で揃える
baseline	ボックスを基準となるフレックスボックスの斜め軸のベースラインに揃えて配置
stretch	ボックスをフレックスボックスの斜め軸に沿って自動的に揃える（初期値）

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;

flex-direction

フレキシブルボックス内のボックスの配置方法を指定するプロパティ

値	意味
row	各ボックスをコンテンツの書字方向と流れに沿って、インライン要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置（初期値）
row-reverse	rowと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置
column	各ボックスをコンテンツの書字方向と流れに沿って、ブロックレベル要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置
column-reverse	columnと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-flow

flex-directionとflex-wrapの値を、まとめて指定するためのショートハンドプロパティ

値	意味
flex-direction	フレキシブルボックス内のボックスの配置方法を指定
flex-wrap	フレキシブルボックスをマルチラインに

flex-flow: row wrap;
flex-flow: column wrap;
flex-flow: row wrap-reverse;
flex-flow: column wrap-reverse;

flex-wrap

フレキシブルボックスをマルチラインにするプロパティ

値	意味
nowrap	通常どおり、フレキシブルボックスをシングルラインに（初期値）
wrap	フレキシブルボックスをマルチラインにコンテンツの書字方向に沿ってフレキシブルボックスの開始側から末尾側へと斜めにボックスの配置軸が設定
wrap-reverse	wrapと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きの斜めにボックスの配置軸が設定

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

justify-content

フレキシブルボックス内でのボックスの詰め方を指定するプロパティ

値	意味
flex-start	内部のボックスを、フレキシブルボックスの先頭に詰めて配置（初期値）
flex-end	内部のボックスを、フレキシブルボックスの末尾に詰めて配置
center	内部のボックスを、フレキシブルボックスの中央に詰めて配置
space-between	内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾は詰めて配置
space-around	内部のボックスを、フレキシブルボックス全体へ均等に配置先頭と末尾にはスペースが入る

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

order

フレキシブルボックス内のボックスの配置順序を指定するプロパティ

値	意味
整数	ボックスを配置する順番を整数で指定初期値は「0」

order: 1;
order: 2;
order: 3;

まとめ

CSSで指定できることは幅が広く
試しながら覚えるしかないです。

よく使うものは必ず覚えておきましょう。

君がエンジニアになるまであと83日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

↧

GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

April 6, 2020, 11:35 am

≫ Next: 初心者によるプログラミング学習ログ 283日目

≪ Previous: 100日後にエンジニアになるキミ - 17日目 - CSS - CSSの基礎4

User.css

CSSでは元のテキストが消せないので
『Fork is パクる』
で妥協

user.css

@-moz-documentdomain("github.com"){form.btn-with-count[action="/github/choosealicense.com/fork"]button::after{content:" is パクる";}}

元ネタパクリ元

パクリ元に敬意を評して載せます。
謝辞。

・GitHub の「Fork」ボタンを「パクる」に置き換える UserScript - Qiita
https://qiita.com/foooomio/items/27429f0b136d0debe25b
からネタを頂きました。
@foooomioさんに謝辞。

・Toshihide Ii (BitByte) @IiToshihide - Twitter
https://twitter.com/IiToshihide/status/1246487047545556992
を参考にさせて頂きました。
@IiToshihideさんに謝辞。

えっ、丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
学生だからって、何でも許されるわけと
ちゃうやろ・・・
高専生って基本こういうイメージ、怖い・・・https://t.co/YKoOvgGplg
— Toshihide Ii (BitByte) (@IiToshihide) April 4, 2020

↧

初心者によるプログラミング学習ログ 283日目

April 6, 2020, 12:59 pm

≫ Next: CSS_flexbox【SKILLHUB学習まとめ⑥】

≪ Previous: GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

100日チャレンジの283日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
283日目は、

おはようございます
283日目　2h
・xdデザインカンプからのサイト模写
・ヘッダーとフッターのブラウザ幅いっぱい表示#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 6, 2020

↧

CSSのセレクタ

要素セレクタ

全称セレクタ

idセレクタ

classセレクタ

子孫セレクタ

子セレクタ

隣接セレクタ

関接セレクタ

属性セレクタ

link擬似クラス

その他の擬似クラス

まとめ

作者の情報

はじめに

目標

CSSとは

potisonとは

fixed

relative

absolute

要素のど真ん中に要素を置きたい

displayとは

block

inline

inline-block

flex

おわり

Reactぴえんチャレンジって何？

チャレンジ結果

チャレンジのポイント

ソースコード

謝辞

その他

経緯

注意

【目次】今回つまづいたポイント

1.謎の空白

2.表示されない画像

3.お問い合わせフォーム

4.効かないCSS・SCSS

最後に

positionプロパティとは？

positionの値について

relativeとabsoluteの関係性

relativeとabsoluteの関係は、牧場と羊さんです！！！(あくまでも私のイメージ)

補足

最後に

できたもの

あとでつくるリスト

1. 記事の目的

2. コード（コピペ用）

3. CSS の解説

3-1. 解説用html

3-2. margin:0;

3-3. display: flex;

3-4. justify-content:center;

3.5. min-height:100vh;

3-6. align-items:center;

3-7. （追記）flex-direction: column;

4. さいごに

参考リンク

100日チャレンジの281日目

CSSのプロパティ

色合い(カラー)

背景

ボーダー

まとめ

作者の情報

継承

リンク

コロナウイルスの疾患人数を可視化できるサイトを作る

仕様要件

制約条件

出来上がったもの

使った技術

データ取得：COVID-19のRapidAPI

サイトの公開: GitHub Pages

JavaScript: Vue.js

グラフ描画: APEXCHARTS

3-2. `margin:0;`

3-3. `display: flex;`

3-4. `justify-content:center;`

3.5. `min-height:100vh;`

3-6. `align-items:center;`

3-7. （追記）`flex-direction: column;`

１　実装の流れ

２　コード・解説

３　最後に