この記事の対象 ～00年代初頭にホームページ作っていて、現在放置中……という人、あるいはそういう人から依頼されて昔のフォルダを受け取った人が対象になります。 スキル的にはjQuery(Bootstrap)なら何とか勢～（バックにも関心がある）SPA初心者勢を想定しています。 手順 1.本当に自前でやる必要があるか考える Webサービスが氾濫する現在、現在サイトにある機能を本当に自前で提供する必要があるか考えましょう。 日記 まぁ最有力はブログへの移行ですね。黒歴史を消す人も多いですが、逆に過去の日記みたいなもんで、残しておきたいと思う人もいるかと思います。ていうかホームページは放置してて日記にあたる部分だけ流石にブログに移行してる人も多いかと思いますね。 何らかの理由でブログに移行できない、不適切だと思う場合はスクレイピングして文章データをmdやらjsonに纏めて、今流行りのGatsbyあたりに手を出すのも良いのではないでしょうか。 イラスト これは現行のシェアとしてもシステム的にもpixivへ丸投げするのが一番妥当かと思います。 画像ギャラリー系のライブラリを入れて自前のサイトで見せることもできますが、pixivと二重管理になって放置する可能性が高いかと。 小説 これは難しい。投稿サイトは昔から山ほどありますが、なろうを始め色がついてたりするので……。（2～3年で閉鎖しないという意味で）安定してて、ジャンル問わずで一強みたいなのがあればいいんですが。 あと00年代初頭って「Web小説ならではリッチ表現を目指そう」的な流れもあって、小説本文中に挿絵画像ぶちこんだり、JSやフォントタグ弄りやってたりする小説もそこそこあるので、そこらへん守る必要がある（ギミックが前提）があったり、その系譜を現代の技術で更に進化させたいという気骨の方は自前も全然アリだと思います。 掲示板 これも難しい。 SNSの直接交流やハッシュタグ交流で代替できちゃってそうで完全には出来てないので、「アカウントを持たなくても書ける、個人管理のフォーラム」のニーズは確かにあるんですよ。 ただ当時でいうところのCGI（死語）がPerl/PHP＋ただのログファイルで出来てたのに対し、現在はバックエンド系言語(Ruby/PHP等) + フレームワーク + DBが普通かつ、今時の設計だとバックエンドはAPIのみとなって、表示面はフロントエンドでやる必要があると敷居上がりまくってるんですよね。真っ向からやるにはバックエンドの勉強をガッツリしないときついかと。 OSSのフォーラムアプリも調べましたが、需要がニッチ化したのと、今だとバックエンドAPI+フロントエンドのセット提供になり、なおかつ密結合にならざるを得ないので、今一つ開発が盛り上がってない印象を受けました。現行問題なく動いてるのならそのまま＋SNS交流で逃げてもいいのではという感触はありますね。 ゲーム系チャットアプリのイメージが強いですが、discordとかで丸投げできないかなーというのは考えたりしますが、使ったことがないので（ry チャット 掲示板と同じくdiscordに丸投げできないかな～（ry 2. WebスクレイピングしてHTMLから実データを取り出して整形する 昔はHTMLファイルの中に装飾データ（fontタグ）や実データを含めて全てが詰まっていたので、解析してオブジェクトの形に纏める（＝スクレイピング）のは必須ですね。DOMを、tableタグを、ひたすら掘り続けるのだ……⛏ ゲーム攻略サイトとかデータ系サイトはここの工数を覚悟しといた方がいいです。抽出もさることながら、使い勝手が悪いとか色々データ整形したくなると思うので、延々とデータ整形することになります（体験談） ところでスクレイピングといえばPython （というかBeautifulSoup）がオススメとされていますが、「Webフロントエンド系の技術は仕方ないにせよ、Pythonまで手出すのはキツイ……」と思う方も多いかと思います。 そういう方は、そもそも自分のサイトであることを活かし、 ローカルの開発サーバー（手っ取り早いのはVSCodeの拡張機能のLiveServerとか）を用意 自サイトにJSのスクレイピングプログラムを仕込んでデータオブジェクトを作る 以下のJSでJSONファイルを生成してダウンロードさせる export const downloadJsonFile = (data: unknown, baseName: string): void => { const blob = new Blob([JSON.stringify(data)], { "type": "application/json" }) const fileName = `${baseName}.json` const url = URL.createObjectURL(blob) //aタグを生成し、クリックしたことにしてDLさせるというアプローチを取る //かなり無理くり感あるが現状これがベストプラクティスな模様。 const aTag = window.document.createElement("a") document.body.appendChild(aTag) aTag.download = fileName aTag.href = url aTag.click() aTag.remove() URL.revokeObjectURL(url) //生成したURLが保持されてしまうので解放する } こういう感じで対処しましょう。ちなみに自分はJSでファイルを生成→DLさせられるのを知らなくて、途中までconsole.logに吐き出し→エディタにコピペでせっせとJSONファイルを作ってました? 参考:JavaScriptでファイルダウンロード処理を実現する - Qiita 3.旧サイトとの連携を気にしつつ好きな技術で作り直す わざわざ作り直したいと思うぐらいですし、サイトの規模としてはそこそこ大きいですよね？となると、旧サイトと繋がりを意識しつつ徐々に入れ替えていく形を取る方が良いかと思います。 技術面に関してはお好きな技術で……としか言いようがありませんが、最近のトレンドから言うと大規模→React/小規模→Vue or Svelteという形になるのかなと思います。 また元が静的なウェブサイトという特性からリフォーム後も静的な特性が強いかと思われるので、SSGとの親和性が高いのかな～とも感じます。
index.vue <template> <div> <p> <a href="#" class="Art__viewer">Test <span><img src="~@/assets/images/Main/****.jpg" alt=""></span> </a> </p> </div> </template> <style> .Art__viewer:hover { position: relative; text-decoration: none; } .Art__viewer span { display: none; position: absolute; top: -200px; left: 150px; } .Art__viewer:hover span { border: none; display: block; width: 210px; } </style> 参考： https://www.cmons.me/entry/2015/08/21/005115
htmlで丸付き数字を入力すると文字化けした「？」になるのを防ぐ方法です。 対応するコードを入力すれば、丸付き数字を表示させることができます。 表示→コード （白大） ①→ ① ⑪→ ⑪ ②→ ② ⑫→ ⑫ ③→ ③ ⑬→ ⑬ ④→ ④ ⑭→ ⑭ ⑤→ ⑤ ⑮→ ⑮ ⑥→ ⑥ ⑯→ ⑯ ⑦→ ⑦ ⑰→ ⑰ ⑧→ ⑧ ⑱→ ⑱ ⑨→ ⑨ ⑲→ ⑲ ⑩→ ⑩ ⑳→ ⑳ （黒大 白小 黒小） ❶→ ❶➀→ ➀➊→ ➊ ❷→ ❷➁→ ➁➋→ ➋ ❸→ ❸➂→ ➂➌→ ➌ ❹→ ❹➃→ ➃➍→ ➍ ❺→ ❺➄→ ➄➎→ ➎ ❻→ ❻➅→ ➅➏→ ➏ ❼→ ❼➆→ ➆➐→ ➐ ❽→ ❽➇→ ➇➑→ ➑ ❾→ ❾➈→ ➈➒→ ➒ ❿→ ❿➉→ ➉➓→ ➓
理解しておく利点 親要素と子要素の比率の関係を変更したくない場合に実装が簡潔になる em 「現在指定されているフォントサイズ」に対して相対的な大きさを指定 子要素のフォントサイズを指定しない場合 親要素のサイズが適用される。 例えば 親要素がfont-size: 40px;のとき、 中の子要素は、font-size: 40px;の大きさに。 子要素のフォントサイズを2emなどにした場合 親要素の二倍のサイズが適用される。 例えば 親要素がfont-size: 40px;のとき、 中の子要素は、font-size: 80px;の大きさに。 メリット フォントサイズ（親要素）を変更すると、中の画像（子要素）も同じ比率で拡大縮小される rem 「htmlで指定さているフォントサイズ」に対して相対的な大きさを指定 htmlタグはデフォルトサイズがfont-size: 16px;それに対して2倍や0.5倍 #デフォルトのフォントサイズを10pxに html { font-size: 62.5%; } #デフォルトのフォントサイズと同じ大きさにする img { width: 1rem; } メリット プロジェクト全体でhtmlのフォントサイズを指定してそれを基準にできる
概要 「あのプロパティは、こういう用途の時に使うはず..」となった時の忘備録として概要的な一覧を作成。 プロパティ一覧 汎用的、FlexBox、メディアクエリ...等ざっくりと分類ごとに一覧化しています。 随時、更新します。 汎用的 プロパティ 概要 備考 margin 要素の周りに追加の領域を作成 inline要素には、上下のmarginが効かない ※家はそのままで土地だけ広げるみたいな padding 要素の内部に追加の領域を作成 ※家の中(部屋の広さ)を広げるみたいな text-align 水平方向(横方向)の位置を調整 block要素に有効 vertical-align 垂直方向(縦方向)の位置を調整 inline,inline-block要素に有効 text-decoration 文字の装飾を指定 box-shadow 要素のフレームの周囲にシャドウ効果を追加 border-bottom 下ボーダーのスタイル・太さ・色を指定 初期値はnone cursor マウスポインターが要素の上にいるときに表示されるマウスカーソルを指定 初期値はauto border-radius 要素の角を丸める設定 border-bottom-left-radius 要素の左下の角を丸める設定 border-bottom-right-radius 要素の右下の角を丸める設定 white-space 要素内のホワイトスペースをどのように扱うかを設定 line-height 行ボックスの高さを指定 主にテキストの行間を設定するために使用する font-weight フォントの太さを指定 font-family に依存する opacity 要素の不透明度を設定 当該要素の内容を含む全体に影響する 【0(透明※見えない) < 0.5(半透明) < 1(はっきり)】 transition 要素の 2 つの状態の変化を定義 擬似クラスや、JavaScriptを使用した動的な設定で用いることが多い min-width 要素の最小幅を設定 指定したサイズ以下にはならない！ってこと max-width 要素の最大幅を設定 指定したサイズ以上にはならない！ってこと position 要素の配置に関する設定 ・top、bottom、left、rightプロパティで位置を調整 ・親要素は「relative」子要素は「absolute」を指定 counter-reset カウンター名を指定するとカウンターとして使用できる(連番などに使用) 初期値はnone counter-increment カウンタを増加（or減少）させる 初期値は+1 flexbox プロパティ 概要 備考 flex-direction 並ぶ方向を指定 row(横※初期値),column(縦) justify-content 子アイテム間や周囲への間隔を配置する方法を指定 align-items flexアイテムの縦方向位置を指定 order 子要素の順番を入れ替え 0から始まる(「0=1番目」「1を指定=2番目」ということ) メディアクエリ プロパティ 概要 備考 min-width 指定した値以上の時に適用させる ※モバイルファーストはこちら ブレイクポイントとして使用した場合 max-width 指定した値以下の時に適用させる ※PCファーストはこちら ブレイクポイントとして使用した場合
