独学!Webサイト構築日誌

14日目:朝から空腹MAX。

9:00

朝から空腹感が凄い。最近朝食は紅茶か珈琲のみにしているので、お昼までちょっと我慢ですね。いつもはそんなお腹空かないのに、どうした腹。HARA。HAHAHA

本日の目標は故知覧。
  1. 続・条件ソートのチェックボックス。
  2. ↑出来たら前日分含めてまとめる。
  3. タブキーで移動する順番指定。
  4. サイドバー/フッター整理。Cssも変更。

12:30

1.続・条件ソートのチェックボックス。

やっと出来た...が、私が探せなかっただけで、もっと簡単な記載方法がネット上にあると思う。

2.↑出来たら前日分含めてまとめる。

            
html
<table id="itembox">
<thead>
<tr>
<th><input type="button" value="All" onclick="allClick()"></th>
<th><input type="button" value="商品名" onclick="btnClick(1)"></th>
<th><input type="button" value="在庫数" onclick="btnClick(2)"></th>
<th><input type="button" value="価格" onclick="btnClick(3)"></th>
</tr>
</thead>
<tbody>
<tr name="table-line">
<td><input type="checkbox" name="table-CHbox" onclick="lineClick(0)"></td>
<td>あんず</td>
<td>10</td>
<td>200</td>
</tr>
<tr name="table-line">
<td><input type="checkbox" name="table-CHbox" onclick="lineClick(1)"></td>
<td>なし</td>
<td>7</td>
<td>1500</td>
</tr>
<tr name="table-line">
<td><input type="checkbox" name="table-CHbox" onclick="lineClick(2)"></td>
<td>いちじく</td>
<td>5</td>
<td>90</td>
</tr>
<tr name="table-line">
<td><input type="checkbox" name="table-CHbox" onclick="lineClick(3)"></td>
<td>かき</td>
<td>15</td>
<td>100</td>
</tr>
</tbody>
</table>


js
//商品ソート
const baseBox = document.getElementById('itembox');
let baseRows = baseBox.rows.length;//テーブルの行数
let baseCells = baseBox.rows[0].cells.length;//テーブルの列数
const tableCHbox = document.getElementsByName('table-CHbox');//チェックボックス 0から格納 
let numCHbox = tableCHbox.length;//1からスタート
const tableLINE = document.getElementsByName('table-line');//行全体 0から格納
let baseRowsLast = baseRows-2;
let tempRows = [];//一時避難用配列

function btnClick(btn){
let items=[];
let Xaa = 0;//列 横方向の比較
let countCH = 0;//チェック個数
for (let i=0;i<numCHbox;i++){
if(tableCHbox[i].checked === true) {//チェック個数
    countCH++;
}
}
let nonCH = baseRows-countCH;//チェック済みを除いた数

//テーブルの値全部格納
for(let i=1;i<nonCH;i++){//行 縦方向
items[i]=[];
for(let j=1;j<baseCells;j++){//列 横方向
    items[i][j] = baseBox.rows[i].cells[j].textContent;
}
}

if(btn == 1){//文字列のソート
Xaa = 1;
items.sort(function(a,b){
    if(a[Xaa] < b[Xaa]) return -1;
    if(a[Xaa] > b[Xaa]) return 1;
    return 0;
});
}else{//数字のソート
if(btn == 2){
    Xaa = 2;       
}else if(btn == 3){
    Xaa = 3;
}
items.sort(function(a,b){
    return a[Xaa] - b[Xaa];
});
}

//ソートで並び替えを行うと、空白の配列に要素がズレるので、items[i-1][j];
for(let i=1;i<nonCH;i++){//行 縦方向
for(let j=1;j<baseCells;j++){//列 横方向
    baseBox.rows[i].cells[j].textContent = items[i-1][j];
}
}
}

function allClick(){//全選択・全解除
if(tableCHbox[0].checked===true){
for(let i=0;i<numCHbox;i++){//行 縦方向
    tableCHbox[i].checked = false;//全解除
    tableLINE[i].style.backgroundColor='#ffffff';//色解除
}
}else if(tableCHbox[0].checked===false){
for(let i=0;i<numCHbox;i++){//行 縦方向
    tableCHbox[i].checked = true;//全選択
    tableLINE[i].style.backgroundColor='#cccccc';//色付け
    
}
}
}

function lineClick(line){//チェック動作
if(tableCHbox[line].checked===true){
/* 入れ替え作業 */
let trueCH=[];
tempRows.innerHTML = tableLINE[line].innerHTML;//退避       
for(let i=line;i<baseRowsLast;i++){
    tableLINE[i].innerHTML = tableLINE[i+1].innerHTML;//ずらす
    if(tableCHbox[i+1].checked === true){//チェックボックス確認
        trueCH[i] = true;
    }
}       
tableLINE[baseRowsLast].innerHTML = tempRows.innerHTML;//戻す

/* 修正作業 */
for(let i=0;i<numCHbox;i++){//チェックボックスのhtml入れ直し
    baseBox.rows[i+1].cells[0].innerHTML = '<input type="checkbox" name="table-CHbox" onclick="lineClick('+ i +')">';
}
for(let i=0;i<numCHbox;i++){//チェック戻し ↑同時にやるとチェック消える
    if(trueCH[i] === true){
        tableCHbox[i].checked = true;
        tableLINE[i].style.backgroundColor='#cccccc';//色付け
    }
}

tableLINE[baseRowsLast].style.backgroundColor='#cccccc';//色付け
tableCHbox[baseRowsLast].checked = true;//最下部にチェック

}else if(tableCHbox[line].checked===false){
/* 入れ替え作業 */
let trueCH=[];
tempRows.innerHTML = tableLINE[line].innerHTML;//退避       
for(let i=line;i--;){//i に入る瞬間に-1が動く
    tableLINE[i+1].innerHTML = tableLINE[i].innerHTML;//ずらす
    if(tableCHbox[i].checked === true){//チェックボックス確認
        trueCH[i+1] = true;
    }
}       
tableLINE[0].innerHTML = tempRows.innerHTML;//戻す

/* 修正作業 */
for(let i=0;i<numCHbox;i++){//チェックボックスのhtml入れ直し
    baseBox.rows[i+1].cells[0].innerHTML = '<input type="checkbox" name="table-CHbox" onclick="lineClick('+ i +')">';
}
for(let i=0;i<numCHbox;i++){//チェック戻し ↑同時にやるとチェック消える
    if(trueCH[i]===true || line<i){
        tableCHbox[i].checked = true;
        tableLINE[i].style.backgroundColor='#cccccc';//色付け
    }else{
        tableCHbox[i].checked = false;
        tableLINE[i].style.backgroundColor='#ffffff';//色解除
    }
}
}
}
                        
                        
            
        

JSのプログラムとしては汚いかもしれないけど、動きとしては理想のものが出来たので満足。

13:00

3.Tabキーで移動する順番指定。

何それ、要るの?という人もいるでしょうが、私自信「Tabキー」で移動しながらフォームの入力や操作を行うことが多いので必須。
というわけで、パソコン操作に慣れている玄人向け(?)の仕様を実装していきます。先日作ったお問い合わせフォームを誤って消してしまったのですが、5日目の日誌にコード残してた。過去の自分を褒めてやりたい。流用しましょ。
tabindexを追加するだけです。1スタートな点だけ注意。参考サイト。

13:30

4.サイドバー/フッター整理。Cssも変更。

昨晩気付いてしまったんです。「サイドバー要らなくね?」と。
まとめサイトや、情報サイトならまだしも、日誌や数個のリンク程度でそれは不要だな、と。

今後、PHP等を使って新着記事/人気記事の掲載が可能になった際には再度検討しましょう。
・サイドバーのリンクをフッターに移動。
・Twitterを文章ではなくアイコンに変更。
・css変更。
の流れでいきますが、サイドバー自体は残しておく予定です。
サイドバーのcssを削除して、フッターのcssを弄りました。重ためだった見た目も、シンプルなものに変更。
            
css
/*フッター*/
footer{
text-align: right;
}
footer ul{
text-align: left;
width: 30%;/*メニューの大きさ*/
margin: 10px auto;
display: inline-block;
}
footer ul a{
text-decoration: none;
}
footer ul li{
list-style: none;
overflow: hidden;
}
            
        

15:30

何だかんだで全記事コピペする機会多いな...

あれだな。先にしっかりとしたフォーマット作っておかないと、今回みたいに何度も張り直すハメになるな。
もしくはPHPとか使えるようになれば簡単に変更できそう。

さて。この後はWebサイト構築関連の書籍を2冊読もうと思っているので、本日の更新は終了。明日からは外観ではなく、内部の設定について少し弄っていきたいと思います。

SEO対策ってやつじゃね!



Before: 13日目

Before: 13日目

After: 14日目

After: 14日目



作成日:2020/12/26 - 更新日:2021/01/26

≪ 13日目≪ 一覧に戻る ≫15日目 ≫

HOME > 日誌一覧 > 14日目:朝から空腹MAX。