指定の子要素に対してスタイルを適用 nth-child - CSS
nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。
偶数番目の要素だけとか!!
nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。 多数の項目がある表で、交互に背景色を設定し見やすくしたい時などに役立ちます。
擬似クラスを覚えよう!CSSのnth-childの使い方 | TechAcademyマガジン
書き方
セレクタ:nth-child(値) {...}
指定できる値の種類は以下の通り
値 | 説明 |
---|---|
2n かeven |
偶数番目の要素 |
2n+1 かodd |
奇数番目の要素 |
a |
a番目の要素 |
n+b |
b番目以降の要素(bを含む) |
-n+b |
b番目以前の要素(bを含む) |
an |
aの倍数の要素 |
※ a
とb
は整数
偶数 番目に適用
2n
かeven
を指定する
.content:nth-child(2n) {...} .content:nth-child(even) {...}
偶数番目の背景色を水色に変える
See the Pen 偶数番目にスタイルを適用 by tamago (@tamago324) on CodePen.
奇数 番目に適用
2n+1
かodd
を指定する
.content:nth-child(2n+1) {...} .content:nth-child(odd) {...}
奇数番目の背景色を水色に変える
See the Pen 奇数番目にスタイルを適用 by tamago (@tamago324) on CodePen.
n番目の要素に適用
n番目だけに適用したい場合、その「数値」を指定する
.content:nth-child(数値) {...}
3番目だけ背景色を水色に変える
.content:nth-child(3) {...}
See the Pen 3番目だけにスタイルを適用 by tamago (@tamago324) on CodePen.
nを指定すると???
n
を指定すると、全てという意味になる
たまたま、n
だけ記述したら全てに適用されて発見した
.content:nth-child(n) {...}
n番目以降の要素に適用
n+数値
とすることで、指定した数値以降の要素にスタイルが適用される
.content:nth-child(n+数値) {...}
3番目以降の要素の背景色を水色に変える
.content:nth-child(n+3) {...}
See the Pen n番目以降の要素にスタイルを適用する by tamago (@tamago324) on CodePen.
n番目以前の要素に適用
-n+数値
とすることで、指定した数値以前の要素にスタイルが適用される
.content:nth-child(-n+数値) {...}
3番目以前の要素の背景色を水色に変える
.content:nth-child(-n+3) {...}
See the Pen QrGMPy by tamago (@tamago324) on CodePen.
応用?
:nth-child()
をつな出て書くことで範囲指定することができる
.content:nth-child(値):nth-child(値) {...}
3番目から5番目まで背景色を水色に変える
.content:nth-child(n+3):nth-child(-n+5) {...}
See the Pen 3から5番目までスタイルを適用 by tamago (@tamago324) on CodePen.
参考文献
線形グラデーション linear-gradient関数 - CSS
グラデーションの表示をするにはlinear-gradient
関数を使う。
cssアニメーションでグラデーションをしようとしていたときに見つけたこのサイトで知った
このlinear-gradient
は線形グラデーションと呼ばれるらしい。他には円形グラデーション(radial-gradient
)、反復線形グラデーション(repeating-linear-gradient
)、反復円形グラデーション(repeating-linear-gradient
)がある。
この関数の戻り値はimage
となっているため、imageを値として扱うプロパティにしか使えない。
cssに関数ってあるんだね...てっきりプロパティかと思ってた。たしかに、値のところに記述されてたからプロパティではないか...
liner-gradient(角度?, 開始色, 終了色)
例)背景をグラデーションにしてみる
body { background-image: linear-gradient(-90deg, #E9C886, #86E9B8); }
See the Pen グラデーション!!! by tamago (@tamago324) on CodePen.
え、こんな簡単にグラデーションできちゃうの...すご...
こんなのあるんだー程度に覚えておこう!!
参考文献
ADOでExcelファイルを読み込んだ時に文字列がNullになってしまうときの対処法 - VBA
結論
Extended Properties
にIMEX=1
を追加する!
解説
Excelファイルを読み込むとき、1行目がヘッダーで2行目以降がデータである場合、そのままデータベースとして読み込むことができるため、すごい便利。
でも、仕様バグでしっかりとデータが存在するにもかかわらず、Nullとして読み込まれてしまうことがあるらしい。
これは、Excelの上位8行を読み込んでその列の一番多い型でデータを読み込むようになっているため、おこってしまうらしい。例えば、数値が5行、文字列が3行であれば、その列は数値型として読み込まれる。
対処法
まず、すべての列を文字列として読み込むようにする。もし、数値として使いたい場合は読み込んだ後に必要に応じて変換をする。
すべて文字列で読み込むにはRecordSet生成時に指定する"Extended Properties"
パラメータのIMEX
に1
を指定する。こうすることでインポートモードとなり、すべて文字列で読み込んでくれる。
※指定した列がすべて数値の場合には数値型として読み込んでしまうため注意が必要。一つでも文字列があれば文字列型として読み込んでくれる。
必ず文字列として読み込む工夫としては、Excelの1行目にすべて文字列を入力しておくことで、必ず文字列として読み込むようになる。
参考文献
ADOを使って、CSVファイルを読み込む - VBA
ADOを使い、CSVファイルにアクセスすることで、CSVファイルをDBのテーブルとして扱うことができるようになる。
ADOでの接続は以下の手順で行う
- プロパイダを指定する
- アクセスするファイルの格納フォルダの指定
- そのほかの設定をする
- 接続開始
- SQLの実行
- ヘッダーの表示
- 取得データの表示
サンプルコード
Sub OpenDataBase() On Error GoTo PROC_ERR Dim cn As New ADODB.Connection Dim Rs As New ADODB.Recordset Dim sEXTENDED As String Dim sSrcDir As String ' 接続先フォルダ Dim sSql As String ' SQL Dim oWs As Worksheet Dim lCnt As Long ' ヘッダー表示のループ変数 sSrcDir = "C:\Temp\ADO_TEST\" ' プロパイダの設定 cn.Provider = "Microsoft.ACE.OLEDB.12.0" ' Office 2007 以降 ' 読み込むファイルの格納フォルダのパス cn.Properties("Data Source") = sSrcDir ' その他のプロパティの設定 sEXTENDED = "text" sEXTENDED = sEXTENDED & ";FMT=Delimited" sEXTENDED = sEXTENDED & ";HDR=Yes" cn.Properties("Extended Properties").Value = sEXTENDED ' 接続開始 cn.Open sSql = "SELECT * FROM [CSVTEST.csv]" ' SQL実行 Rs.Open sSql, cn If Rs.EOF Then ' 結果が1行もない場合終わり GoTo PROC_EXIT End If Set oWs = ThisWorkbook.Sheets("Sheet1") ' ヘッダーの表示 For lCnt = 1 To Rs.Fields.Count oWs.Cells(1, lCnt).Value = "'" & Rs.Fields(lCnt - 1).Name Next ' 結果をそのまま表示 oWs.Cells(2, 1).CopyFromRecordset Rs Rs.Close cn.Close PROC_EXIT: On Error Resume Next ' 後処理 Set Rs = Nothing Set cn = Nothing Exit Sub PROC_ERR: MsgBox "ADO接続(CSV/TEXT)エラー:" & Err.Description & "(" & Err.Number & ")" & vbCrLf & sSrcDir, vbCritical GoTo PROC_EXIT End Sub続きを読む
1つだけ右寄せでそれ以外は左寄せ flex - CSS
flexでタイトルの通りのことをしたい
こんな感じ
右寄せしたい要素にmargin-left; auto;
とする!!!
左のmarginが自動になって、右寄せになる感じ!
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child f-right"></div> </div>
.parent { display: flex; background-color: rgba(200, 200, 200, 0.8); } .child { background-color: rgba(255, 0, 0, 0.8); width: 150px; height: 50px; margin: 5px; } .f-right { margin-left: auto; /* これ!!! */ }
See the Pen 一つだけ右寄せ、それ以外は左寄せ by tamago (@tamago324) on CodePen.
参考文献
文字列の数字同士を比較する時は、数値に変換してから - JavaScript
テキストエディタ(っぽいもの)を作ってて、バグってたから調べてみた結果、
文字列の数字同士を比較と危ないということがわかった
なので、数値として扱いたいときには必ず数値に変換してから比較すること!!
文字列同士の場合、以下のように、数値同士であればtrue
のものもfalse
になってしまう
> "9" < "10" < false
数値に変換すれば、思ったように動作する
> Number("9") < Number("10"); < true
失敗から学ぶことができてよかった!