NokonoKotlin City

NokonoKotlin City 公式
〜おこていゆの街を築こう〜

得意分野学習記事一覧更新頻度 : 多アカウント github アカウント AtCoder

リクルート

結婚相手募集

おこていゆさんは独身なので、結婚相手をゆる募しています。

報酬 : 無し
勤務時間 : 週 7 日 24 時間
休日 : 要相談

部屋のゴミ捨て手伝い募集

不燃ゴミをまとめて捨てたいので、手伝ってください。

報酬 : 要相談
勤務時間 : 最大 2 時間ほど
必須スキル : 無し

記事のレビュワー募集

不燃ゴミをまとめて捨てたいので、手伝ってください。

報酬 : 要相談
期間 : 不定期
必須スキル : 無し

開発メモ

css の variable は、css 内のみで使う。javascript などからもアクセスされる変数に使わない。
アニメーションの状態の記述も、css で完結させる。
要素などのネーミングは外部で記述する javascript 内での実装に準拠する。(ex. Algo の HTML の要素は、article.js で共通化している)
記事、本文などにおけるテキストの開閉は details タグを使う

重要

C++ ソースコードのライセンス

自分用情報

共通の記述フォーマット (common.css)

common.css にはこのサイト全体に適用するフォーマットが記述されている。(common.css はスマホ用とPC用の二種類ある)

common.css では <body> タグに関しては記述しない( 各ページのcssで、それぞれに応じた<body> を書いてください)。body について記述していないので、ページ内でのフォントサイズなどは、各ページのcssの記述に従う

common.css には、短い文章単体に適用する場合や、シンプルなフォーマットを指定するときに記述する。

<underbar> : 文字の下に線を引く (改行なし) 。
<pre> : コードなどの簡易用プレビュー。本文中で使う (改行あり)。
<code> : コードなどの簡易用プレビュー。改行しない場合に使う。
<CommentOut>: 緑色で色付け (改行なし)。
<Gray> : 文字を灰色にする。<Orange> や <LightBlue> など (改行なし)、他の色も存在する。
<h_big> , <h_middle> , <h_small> : 文字サイズフォーマット (改行なし) 。スマホ版とPC版でサイズが違う
<fontsizeX> : 文字フォントサイズが X px である (改行なし) 。 ... PCもスマホも同様

クラスも用意してある。

<img class = "StandardImageStyle"> : 画像貼り付け用のスタイル
<div class = "UnderLine_C" > : 文字色が C で、色が C の下線付き
<div class = "borderX" > : 横に線を入れて、仕切りとする
<div class = "Box" > : 枠線付きのボックス(中に文章を書いたりする様)
<div class = "SmallBox" > : 枠線付きの小さいボックス
<div class = "largeBox" > : 枠線付きの大きいボックス
<div class = "InnerContainer" > : 枠線はないが、Boxのように左右上下に余白がある
<div class = "SampleCodeClass" > : このサイトでフォーマットしたソースコードをこのクラスで囲って箇条書きのスコープに入れるといい感じの見た目になる。

自分用情報

サイト情報/構成

当サイトでは、ソースコードをこのサイトでhtmlに変換していますが、その時の背景の style を以下で統一します。

<code>

変換したコードの html

</div>

</code>

メニューバーの構成

スライドを作成する場合

</div>

<br>

</div>

そのページ内のスクリプトに以下を記述します。

//slide

function select_next(e){

var PageList = document.getElementsByClassName(e.target.name);

var counter = document.getElementById(e.target.name);//ページ番号を管理するためだけのdiv

var index_now = parseInt(counter.innerText);

const size = PageList.length;

if(index_now==size-1)return;

//close current page

PageList[index_now].style.display = "none";

index_now++;

//display next page

PageList[index_now].style.display = "block";

counter.innerText = index_now;//カウンターを更新

}

function select_back(e){

var PageList = document.getElementsByClassName(e.target.name);

var counter = document.getElementById(e.target.name);//ページ番号を管理するためだけのdiv

var index_now = parseInt(counter.innerText);

const size = PageList.length;

if(index_now==0)return;

//close current page

PageList[index_now].style.display = "none";

index_now--;

//display next page

PageList[index_now].style.display = "block";

counter.innerText = index_now;//カウンターを更新

}

</script>

メニューバーの構成

スライドを作成する場合

Copyright (c) ©️ 2024 NokonoKotlin All Rights Reserved

Contact : https://twitter.com/nokonokotlin