PROGRAMMING
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
javascript
- 自作カレンダーをES6で使えるようになったクラスで置き替えてみる
- JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- 前月・翌月の日付を埋め込んだカレンダーを作る
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- ページャーを作る(簡易版)
- jQuery:Tableで親・子・兄弟要素を取得
- ページャーを作る
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- 祝休日対応のカレンダーを作る
- jQuery:モーダルウィンドウを作ってみる
PHP
Java
- IntelliJ と Gradle で JavaFX アプリケーション(非モジュール版)を作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
SQL
フォルダ構成をCSSで見やすくする
プログラミングのページを作っていると、たまにフォルダ構成を掲載する必要がでてきます。
コードなどはPrismで見やすくできますが、フォルダの構成をきれいに見やすくする方法が思いつきません。
そんな時にCSSを使って組織図を表現しているサイトを偶然見つけました。一部を利用させていただいて作ってみました。
CSSにより出来上がったフォルダ構成図
- 第1階層
- 第2階層
- 第3階層
- 第3階層
- 第3階層
- 第3階層
- 第3階層
- 第3階層
- 第3階層
- 第2階層
- 第3階層
- 第4階層
- 第4階層
- 第4階層
- 第3階層
- 第3階層
- 第2階層
- 第2階層
フォルダ構成のHTML
階層を見やすくするためにulと子要素のliを揃えました。
フォルダはfd、ファイルはflとクラス名を付けてそれぞれの画像を表示させています。
<ul class="tree">
<li class="fd">第1階層
<ul>
<li class="fd">第2階層
<ul>
<li class="fd">第3階層
<ul>
<li class="fl">第3階層</li>
<li class="fl">第3階層</li>
<li class="fl">第3階層</li>
</ul>
</li>
<li class="fl">第3階層</li>
<li class="fl">第3階層</li>
</ul>
</li>
<li class="fd">第2階層
<ul>
<li class="fd">第3階層
<ul>
<li class="fl">第4階層</li>
<li class="fl">第4階層</li>
<li class="fl">第4階層</li>
</ul>
</li>
<li class="fl">第3階層</li>
</ul>
</li>
<li class="fl">第2階層</li>
</ul>
</li>
</ul>
フォルダ構成のCSS
線、フォルダ名、ファイル名の位置など、好みの問題以外は、基本的に各階層ごとのセレクタを記載する必要はありません。
/* フォルダの画像 */
.fd {
background-image: url(../image/folder.png);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 1.4em 0.1em;
}
/* ファイルの画像 */
.fl {
background-image: url(../image/file.png);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: 1.4em 0.2em;
}
/* 第1階層(ルート) */
.tree {
line-height: 1.8; /* 各行の幅 */
padding:0;
margin-left: 40px;
}
/* 第2階層以降の各階層の位置 */
.tree ul {
position:relative;
margin:0;
margin-left: 0.3em;
padding:0;
}
/* すべてのフォルダ名・ファイル名の位置 */
.tree li {
list-style-type:none;
position: relative;
padding-left: 3em;
}
/* すべての縦線 */
.tree ul::before {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
border-left: 1px solid #333;
}
/* すべての横線 */
.tree ul li::before {
content:"";
position: absolute;
top:0.7em;
left:0;
width: 1em;
border-top: 1px solid #333;
}
/* 各階層liの最初の文字と画像の位置 */
.tree ul li:first-child {
padding: 0.3em 0 0 3em;
background-position: 1.4em 0.4em;
}
/* 各階層liの最初の横線の上下位置 */
.tree ul li:first-child::before {
top: 1em;
}
/* 各階層liの最後の縦線を └ に */
.tree ul li:last-child::before {
height:100%;
background-color: #FFF;
}
これでフォルダ構成が見やすくなりました。是非試して見てください。
- 参考にさせていただいたサイト
- CSSで目次をつくる:階層深くても簡単ツリー