PROGRAMMING
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
javascript
- ページャーを作る(簡易版)
- ページャーを作る 4/4
(クロスブラウザ対策)
(ページャー表示用メソッド)
(ページャーの使い方) - ページャーを作る 3/4
(イベント登録) - ページャーを作る 2/4
(スタイルの設定) - ページャーを作る 1/4
(ページャー用関数を準備)
(各要素を生成) - 自作カレンダーを作る 6/6
(11.~14.各種メソッド)
(15.簡単な使い方) - 自作カレンダーを作る 5/6
(09.祝休日の判定)
(10.閏年の判定) - 自作カレンダーを作る 4/6
(08.イベントの設定) - 自作カレンダーを作る 3/6
(07.スタイルの設定) - 自作カレンダーを作る 2/6
(05.カレンダーのマスのみ作成)
(06.各マスへ年月・日付を埋め込み) - 自作カレンダーを作る 1/6
(01.カレンダーの基を準備)
(02.各月の日数や年月日の区切り文字)
(03.前月・次月指定時の処理)
(04.前月・次月部分の年月を算出) - JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- jQuery:Tableで親・子・兄弟要素を取得
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- jQuery:モーダルウィンドウを作ってみる
PHP
Java
- IntelliJ.Gradle.JavaFX(6) プラグイン org.beryx.jlink を使ってみる
- IntelliJ.Gradle.JavaFX(5) NSISでインストーラーを作る
- IntelliJ.Gradle.JavaFX(4) exewrapで実行可能jarをexe化する
- IntelliJ.Gradle.JavaFX(3) Jlink でカスタム JRE を作る
- IntelliJ.Gradle.JavaFX(2) すべての依存対象を含んだ Fatjar を作る
- IntelliJ.Gradle.JavaFX(1) アプリケーションを作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
シンタックスハイライトPrismのカスタマイズ
Prismは軽いし、見た目も何か格好いい。
その格好いいPrismだが、更に格好良くするためにtoolbarをどうにかしたいと考えた。
色々調べた結果を記録しておく。
Chrome DevToolsでPrismのHTML構造を探る
Prismを利用しているサイトを開き、F12キーをクリックしてChrome DevToolsを開く。
Chrome DevToolsのElementsタブを見ていくと、PrismのHTML構造が分かった。
HTML構造は次の通りだった。
<div class="code-toolbar"><!-- Prismのコンテナー -->
<pre class="line-numbers language-java"><!-- コード表示部 -->
<code class="language-java">
<!-- コードのいろいろ -->
</code>
</pre>
<div class="toolbar"><!-- ツールバー -->
<div class="toolbar-item">
<span>Java</span><!-- 言語名表示部 -->
</div>
<div class="toolbar-item">
<button type="button">Copy</button><!-- コピーボタン -->
</div>
</div>
</div>
prism.cssを修正しカスタマイズする
prism.cssの修正すべき要素が分かったので、自分なりの好みで修正したのが次のcss。
prism.cssの修正した部分のみ(このサイトで使用中)
/* Code blocks */
pre[class*="language-"] {
width: 90%;
padding: 1em;
/* margin: .5em 0; */
margin-left: 40px;
overflow: auto;
}
/*prism全体の位置的設定*/
div.code-toolbar {
position: relative;
margin-top: 26px;
}
/* ツールバーの幅や位置、背景色 */
div.code-toolbar > .toolbar {
position: absolute;
top: -26px;
left: 40px;
width: 90%;
background: #616060;
}
/*
div.code-toolbar:hover > .toolbar {
opacity: 1;
} */
/* div.code-toolbar:focus-within > .toolbar {
opacity: 1;
} */
/* 言語表示部(追加) */
div.code-toolbar > .toolbar .toolbar-item span {
margin-left: 10px;
color: #fff;
}
/* Copy ボタン */
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: #e2777a;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
position: absolute;
right: 10px;
top: 5px;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button {
/* div.code-toolbar > .toolbar span { */
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
/* div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
} */
参考になるかどうかですが、是非試して見てください。 javascriptでツールバーに新たにボタンを作る方法も 本家 にあるようですが、必要性を感じないので試してみませんでした。