[Excel]相対参照と絶対参照と複合参照

[概要]
数式をコピーした際にコピー先に応じて数式内の参照先をどう変化させるかの設定。固定したい行列の値の前に$をつける。

[操作]
直接入力。またはセル参照をクリックしてをF4を押すことで相対、絶対、複合(行固定、列固定)の順に変化

[例]

相対参照:コピー先に応じて参照先が変化する
      例「B2」

絶対参照:コピー先と関係なく参照先は固定される
      例「$B$2」

複合参照:行・列の片方は固定、片方がコピー先に応じて変化する
      例「B$2」

相対参照  D2に =B2+C2と入力する。 三行目にコピーするとD3に =B3+C3となる

絶対参照  D2に =$B$2+C2 と入力する。 三行目にコピーするとD3に =B2+C3となる

複合参照  D2に =B$2+C2 と入力する。 三行目にコピーするとD3に =B2+C3となる
E列にコピーするとE3に=C2+D3となる B2のBは変化、2は固定。C3はどちらも変化。

[HTML][CSS]display flexを使い画像を配置する。

例:画像4つをdisplay flexを使って折り返すよう配置する。

●HTML
画像全体をdivで囲い、親要素としてclass=”flexImageBox”を設定する。
個々の画像に対して子要素としてclass=”flexImageItem”を設定する。

<div class="flexImageBox"> 
 <img src="../img/01.jpg" class="flexImageItem"> 
 <img src="../img/02.jpg" class="flexImageItem"> 
 <img src="../img/03.jpg" class="flexImageItem"> 
 <img src="../img/04.jpg" class="flexImageItem"> 
</div>

●CSS
○親要素.flexImageBoxに対する設定は主に配置や揃え方
display: flex;    フレックス化する
flex-wrap: wrap;  折り返しをする これを設定しない場合は横一列に並ぶ
を今回は設定

.flexImageBox {
  display: flex;
  flex-wrap: wrap;
}

.flexImageItem {
  padding:  10px;
}

そのほかに、
align-items:  center  縦方向に中央ぞろえ
justify-content:   flex-end;  子要素を右寄せ
justify-content: space-between;   子要素を 等間隔配置 など有り

○子要素.flexImageItemに対する設定、主にそれぞれの幅の調整
padding: 10px; 個々の画像にパディングを設定

そのほかに、
width: 50%;と設定で個々の画像が全体の50%の幅となり、2列ずつの配置となる。

その他のCSS設定は以下も参考に
並び方の順序や揃え方を指定可能になる
https://web-bruno.com/flexbox-css3/
https://www.sejuku.net/blog/56401

[Excel]VLOOKUPで指定した検索条件に合致するデータを指定した範囲から抜き出す

=VLOOKUP(検索値,検索範囲,列番号,検索の型)

(例)=VLOOKUP(P5,シート2!A:B,2,)

検索値「P5」と一致する行を検索範囲「シート2のA列~B列」から探す。その行のうち検索範囲左端のA列から見て「2」番目=B列の値をこのセルに入力する。

[検索値]  検索値に指定した値を検索条件にする。 検索範囲で指定したうちの左端の列を参照する。

[検索範囲] 検索する範囲を指定する。左端を検索値で参照し、左端から何番目を抽出するかを列番号に左から何番目かという数字で指定する。

[列番号]  左端から何番目を抽出するかを検索範囲の左から何番目かという数字で指定する。

[検索の型]TRUEかFALSEが入る、省略可。 省略した場合TRUE 。 TRUEでは[検索値]を超えない最大値を該当のデータとし、FALSEではエラーとする

※検索範囲に検索値が複数ある場合、最初の1つが抽出されるので注意。別のやり方で対応

[HTML][CSS]スマホでのテーブル表示、横スクロールできるようにする。

スマホでテーブルを表示した際に、縦に間延びしたり横にはみ出て見えなくなったりすることを防ぐ。テーブルが画面外にはみ出して横スクロールで見れるようにする。

[HTML]
横スクロールさせたいtableの前後をdivで挟みクラスを指定する(例)<div class=”tableScroll>

<div class="tableScroll">
     <table>
              <tr>
                <th>都道府県名</th>
                <th>2014</th>
                <th>2015</th>
                <th>2016</th>
                <th>2017</th>
                <th>2018</th>
                <th>2019</th>
              </tr>
              <tr>
                <td>東京都</td>
                <td align="right">20</td>
                <td align="right">32</td>
                <td align="right">45</td>
                <td align="right">70</td>
                <td align="right">112</td>
                <td align="right">85</td>
              </tr>
     </table>
</div>

CSSに以下を記述する

.tableScroll{
overflow:auto; /* テーブルをスクロールさせる */
}
.tableScroll{
width:100%;
}
.tableScroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.tableScroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.tableScroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.tableScroll td, .tableScroll th{
white-space: nowrap; /* 文字の折返しを禁止 */
}

[HTML]tdタグにrow span・row colspanで縦・横のセル合体

tdタグにrowspan=”数値” で設定したタグから数値分の縦方向のセルを結合する。

<table border="1">
<tr>
<td rowspan="3">結合した</td>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
</table> 

結合した 結合しない
結合しない
結合しない

tdタグにcolspan=”数値” で設定したタグから数値分の横方向のセルを結合する。

<table border="1">
<tr>
<td colspan="2">結合したセル</td>
</tr>
<tr>
<td>結合しない</td>
<td>結合しない</td>
</tr>
</table> 
結合する
結合しない 結合しない

photoshopで画像の外側の余白をカンバスサイズの変更で削る

画像ファイルの外側にある余白、不要部分を数値指定して削りたい場合。
ctrl + alt + c もしくは alt → i → s でカンバスサイズの変更を立ち上げる。
幅や高さ、基準位置を設定し、余分な画像の外側部分を削る。

幅や高さは絶対値を入れるほかに、相対にチェックを入れて-30pixelといった指定も可能。

ExcelやGoogleスプレッドシートで行、列、セルをショートカットキーで素早く挿入する

Excelの場合

行or列を選択してctrl + shift + [+]で、選択した行の上、列の左に新しい行or列が挿入される。
複数行を選択してショートカットを押せば、選択した分だけまとめて挿入される。

セルを選択して ctrl + shift + [+] で挿入ダイアログが出るので、セルや行列全体を挿入できる。

Googleスプレッドシートの場合

行or列を選択してctrl + shift + alt + [+]で、選択した行の上、列の左に新しい行or列が挿入される。
複数行を選択してショートカットを押せば、選択した分だけまとめて挿入される。

セルを選択して ctrl + shift + alt + [+] で挿入ダイアログが出るので、セルや行列全体を挿入できる。

wordpressでタグをテキストとして表示させる

wordpressでタグをテキストとして表示させたい。

WordPress5.0以上 でGutenberg(グーテンベルク)が標準で導入されている場合は、

ブロック>フォーマット>ソースコードを選択する

例
<table>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

それ以前のバージョンの場合は
・ビジュアルエディタタブから入力する
・ プラグイン「Crayon Syntax Highlighter」 を導入する

Practice is better than precept.