個人的な検証・実験の為に作成したWebページのサンプルや成果などを公開しています。
Bootstrap4を利用して、レスポンシブデザインでポートフィリオを作成しました。
転職や自己紹介の為に利用しようと考えています。
シンプルと見やすさを考えましたが、画像なども含めると長くなってしまったので、
上部のナビゲーションバーのメニューで、目次が分かるようにして、
下部のナビゲーションバーは、何処まで読み進めたか進捗が分かるようになっています。
PCとモバイルの両方で、メニューの拡張性、操作性・視認性の良さを重視して作成したページです。
機能数が多いの業務アプリや、ブログ、Github.ioのマニュアルページなど 様々な用途に広く使えるように考えて作成しました。
今後、自らのブログやマニュアルページに活用予定であり、気づいた点は改良を加えていく予定です。
開発中のオンラインのマークダウンエディタのUIに利用するために、開発中・・・
開発中のオンラインのマークダウンエディタのメインUIに利用する為に、改造しました。
EditorとViewerを共存したり、EditorとViewerを同期、フルスクリーン・ダークモード対応を行なったサンプルです。
その他、役立ちそうなオプション機能を網羅しました。
Reveal.jsのプレゼンテーションを、リアルタイムで編集できるようにしたエディタです。
編集、表示、フローティングモードに切り替えることが出来ます。
StoryBookの機能確認の為に作ったサンプルです。
npm run build-storybook # create storybook-static
num run storybook # run server暗号化して文字列を送りたい時の為に作成しました。
Chorme、Safariで動作確認済み。
既存のUIフレームワークを利用せずに、レスポンシブデザインとマテリアルっぽいデザインを学ぶ為に作成したページです。
WebComponetsを利用している為、Chormeのみ正しく表示できます。
Bootstrap4を利用したサンプルページで、Bootstrap4の使い勝手や挙動を学ぶ為に作成しました。
CSSのみのチャット風の吹き出しと、Bootstrap4を利用したサンプルページで、親しみやすい紹介ページの為に作成しました。
Chorme、Safariで動作確認済み。
Vue.jsとBootstrap4、marked.jsを利用したサンプルページで、Markdown編集環境が無い時の為に作成しました。
Chorme、Safariで動作確認済み。
CSSのみで、７パターンの左右上下中央揃えを行うサンプルページで、状況に適した中央揃えを行う為に作成しました。
Chorme、Safariで動作確認済み。
Vue.jsとBootstrap4を利用したレスポンシブなストップウォッチで、ストップウォッチが無い時の為に作成しました。
背景色のグラデーションが時間経過ともに変化します。
Chorme、Safariで動作確認済み。
IMEのイベント発生を各端末でテストできる様に作成しました。
Safariで動作確認済み。
-
VSCodeの「View In Browser」プラグイン
- HTMLファイルを右クリック -> 「View In Browser」
- 設定に
"view-in-browser.customBrowser": "chrome"を追加し、ブラウザの指定が可能
-
VSCodeのDebgger for Chromeプラグイン
- Chromeのみ
-
Brackets