#CSS/JS/... etc
AboutUnSpOKen_の制作でやったこと・やってみたかったこと・困ったことなど
(注)●例によって独学です。●アマチュアです。●正しくない・不適切な可能性が大いにあります。
CSS
#SVG画像の下部に空白 (12)
解決svg {vertical-align:bottom;}
#line-heightへ変更 (1)
変更前文字の要素の上下中央揃えにpaddingを使用
●疑似要素でマークを付けたりするときに不便（いちいち親要素にrelative→疑似要素にabsolute,inset:0をやってた）
変更後line-heightで高さ指定する
◎勝手に上下中央に来る
◎pxで指定すれば高さを揃えやすい
●見栄えの微調整ができない
#a:hoverの変更 (2)
変更前class="test1"
変更後class="test2"
他パターン class="test3" class="test4"
●明度上げるのよく見る印象
#スクロール (3)
あきらめた縦スクロールを横スクロールに変換 ＋ 縦スクロール要素と横スクロール要素が混在
●トーシローには制御が厳しかった
#親要素はみだし横並び (4)
やりたかったことwidth: max-contentを使わない + 画像を高さでそろえて横並び
1) 画像に高さを指定する
●画像の親要素に高さを指定すると画像が親要素のwidth:100%に収まるようになってしまう
2) white-space:nowrapする
3) bodyにoverflow:hidden、横並び要素をbody以外で囲う[要検討]
●横並び要素の親要素にoverflow-Y: hiddenのみでなぜか横スクロールできる
●bodyにheight:100vh、横並び要素の親要素にheight:100%で横スクロールバーが見えるようになる（height:100%なしだとスクロールバーが画面外にはみ出る？）
●IE非対応のものをできるだけ使わないというなぞの試み
#clip-pathかsvgか (5)
バグsafariでピンチインアウトするとclip-pathが一瞬無効になる
対策clip-pathをあきらめる
1) svgでクリップするのを考えていたがクリップ対象が単色だったためSVG画像をそのまま使うことにした
使用ツールClip Path Generator - CSS Plant
2)width 100%でもアスペクト比を保ってしまう
→svgタグ内にpreserveAspectRatio="none"を追記する
#見出し横にマークを付ける (6)
Ver.2動く三角に変更 *元ネタはポケモンブラックホワイトの吹き出し右下の三角
Ver.1コントラストを利用して見出しに目が行くようにしてみた。読み飛ばしても読んだ気になれていい感じがする。[ver2に変更のため廃止]
#色を集める (7)
かわいいaliceblue ,#f0f8ff名前もかわいい
かっこいい#446efcIT系のサイトで見かけた
かわいいdeeppink ,#ff1493twitterのいいねの色は#f91880
#border-image使ってみたい (8)
#:activeと戦う (9)
困ったactive > transform: scale(1未満) のとき、activeの瞬間当たり判定(?)が外れると、予想通りのアクションが起こせない(?).
対策2層にする. A:activeではなく, A:active Bにtransform: scaleを指定する
困ったandroid > chrome > line-heightを％で指定+:active で不具合
#メディアクエリ (10)
@media screen and (max-width: ***px) {
/* CSS ルールをここに */
}
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
#position:stickyかfixedか (11)
stickyでないと実現できないことをfixedでやろうとして時間が溶けた。泣きそう（ていうか前にも同じ部分で、fixedじゃなくてstickyでやりゃいいんだ！て気づいてわざわざstickyにしたのに、そこをfixedに書き換えてまた戻すという…！）
fixedはスクロールの挙動とかが独立して浮くイメージ
JavaScript
#グローバルスコープ (1)
困ったonclick="関数"で関数を呼び出せない
解決グローバルスコープにしてやる
■具体的には： 記述をだいたいwindow.addEventListener('DOMContentLoaded'...の中に入れ込んでた*ので出した
*よくわかってない。雰囲気で…
#複数の要素にaddEventListener[onclick編] (2)
複数の要素.addEventListener ←これをforかforEachでやろうと思ってたけど、htmlでタグにonclick指定していくほうが楽な気がした
#複数の要素にaddEventListener[forEach編] (3)
[要素1, 要素2, ...].forEach(function(要素たち) { 要素たち.addEventListener('イベント', function() { 処理 }); });
●クラスで管理したほうが楽そうではあるのですがhtmlにクラス追加するのがめんどくさかったので・・・
#複数の要素にaddeventlister[with 複数の同じ処理] (4)
['イベント1', 'イベント2'].forEach(function(イベントたち) { [要素1, 要素2, ...].forEach(function(要素たち) { 要素たち.addEventListener(イベントたち, function() { 処理 }); }); };);
*動作保証しません。●ループの中にループがあって怖い。何もわからない ●引数ひきすう のことやっと齧れた（今まで全力で逃げてきた）。
#addeventlistenerに変更 (5)
●:hoverの挙動が理想的でないのでaddeventlistenerで管理するようにした（先人のｒｙ）
↑ target=_selfの場合 hoverでもいいんだけど, _blankの場合 開いたタブから戻ってきたときにhoverが解除されないのが気になった
#ajaxでキャッシュ残さない (6)
●URLにクエリパラメータ付加でキャッシュ更新する方法だとうまくいかなかったので以下を追加（先人のおかげである）
//キャッシュさせない
ajax.setRequestHeader('Pragma', 'no-cache');
ajax.setRequestHeader('Cache-Control', 'no-cache');
ajax.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
#連打防止のため一定時間disabledにする (7)
サーバー
#さくらのレンタルサーバー (1)
2023年までメインで使用
困った2次エロをうｐできない（らしい）
#neocities (2)
2024年からメインで使用
備考neocitiesはアダルトＯＫを謳っているサービスではない
●当然ながら日本にいながら日本からアップしてはいけないものはアップできない（無修正など）
●.htaccessの編集ができない[たぶん?]
紹介【自サイトを18禁として設定する】
"Setting" > 当該サイトの "Manage Site Settings" > "18+"
> "My page has 18+ content" にチェック > Update
"18+"のページに記載の通りですが, 設定しておけばneocitiesサイト内の検索から除外されます.
*あくまでneocities内に作用するものであってgoogleなどからは一切除外されません. 当サイトではメタタグで検索除けしています
*18+コンテンツとは何を指すかについては以下の通りです
We don't have an official policy on what defines 18+ content yet, but basically it's just pornography and lewd/sick/gross images.
https://neocities.org/settings/(user ユーザー名)#nsfw より
備忘録
便利google webfonts helper https://gwfh.mranftl.com/fonts
ありがたいCan I use... Support tables for HTML5, CSS3, etc https://caniuse.com
使用中のもの
LOG_TITLE
UPDATE on ** **
(****)●説明文。●spanで囲むの忘れがち。
カテゴリーなどTest
ご注意Test
検閲されましたTest *選択で読めるよ
別タブリンクCSS: a[target="_blank"] {...}
マージンなし,色デフォ
マージンなし,色A
マージンなし,色B
マージンあり,色デフォ
枠なし
コード用 /* class="green" */
出典明記用