Clik here to view.
n件ずつ表示する「もっと見る」ボタンのシンプル実装
私はなぜか「もっと見る」ボタンを実装することがやたらと多いので、いろいろなやり方を試す中で「これが一番シンプル！」と発見した方法を書いておきます。要件今回は以下のような要件の「もっと見る」ボタンを実装します。一覧があり、最初は6件表示されている「もっと見る」ボタンをクリックすると6件ずつ表示されるもっと見るものがなくなったら、「もっと見る」ボタンは消えるデータのロードは最初に全件行う。「もっと見る」...
View Articleブラウザー上でも4桁のtabを入力したい
TEXTAREAでTabキーを入力したいブラウザー上ではTabキーを打つとフォーカスが次の入力欄に移ります。当たり前ですよね。なので仕方なくコピペでTabを入力したりします。それとTab幅は4桁にしてほしい（Qiitaの投稿欄も…）。色分け表示のテキストエディターは各種ありますが、もっと軽いもので良いんです。tabbedText.html<textarea></textarea&g...
View ArticleClik here to view.
まずはこれだけ！ テキストエディタの拡張機能の導入！（VScode）
まずはこれだけ！ テキストエディタの拡張機能の導入！「テキストエディタ導入できたけどいきなりコード書いていいの？」もちろん書いていいです！でもその前に少しだけテキストエディタをカスタマイズして使いやすくしましょう！...
View ArticleCSSでドット絵マリオを作るシリーズまとめ（随時更新）
画像を一切使わずいドット絵だけでマリオを作れるのか？そしてそれを動かせるのか？を試しているシリーズのまとめです（随時更新中！）imgタグに色を付けるliタグの中にimgタグを無数に入れて、:nth-childで「○行目の○番目のimg」といった指定で色を付ける。※参考：CSSだけでドット絵マリオを描けるのかCSS変数でルイージを作る色をCSS変数に置き換えることでルイージを簡単に作る。※参考：CSS...
View Articleスタイルシートが反映されなかった原因と対処法
昨日アップしたファイルに反映されない昨日、HTMLとCSSを使って作成した自己紹介ページに、翌日修正を加えて、再度アップしました。（サーバーはロリポップを使っています。）すると、スタイルシートで指定した部分が全く反映されていないことが分かり、そこから修正できるまでに結構な時間を要しました。原因はブラウザのキャシュ結論は、ブラウザとして使用していたグーグルクロームのキャッシュでした。対処方法更新したい...
View ArticleClik here to view.
[Vue.js] v-bind:style で background-image がバインドできなかったら
よくあるのは値( url()）の指定方法がちょっと特殊だというもの。Vue.jsでbackground-imageを指定する - Qiitaしかしそれでも上手く行かなかった。原因URLに ( )が含まれていた。 See the Pen Vue style binding test 1 by ふくい 👨💻 (@var_fukui) on CodePen. もっと詳しくURLには...
View ArticleClik here to view.
FLIP手法によるスムーズなアニメーションとVanillaとReactでの実現
FLIP手法って何？60fpsでスムーズなアニメーションを達成することは簡単ではない。ピュアなCSSでできることも多いが、DOMの変更とJavascriptがかかわるアニメーションは、メインスレッドが忙しいと、その影響を受けるので遅延することがある。たとえば、setIntervalを使った、positionを変える「移動」のアニメーションは、設定したインターバルの値にもかかわらず、他に処理しないとい...
View Articleコンポーネント中心のCSS設計
はじめにコンポーネントの考え方の自由度を高くして、いろいろなスケールのプロジェクトに合わせることができるCSS設計を考えた。OOCSSやSMACSSのようなオブジェクト指向ではなく、ECSSの考えをベースにした。コンポーネントは抽象化を避け、管理しやすさを重視する。COMPONENTS／ELEMENTS／VARIANTで構成する。ファイル管理で文脈がわかるようにする。COMPONENTS全てのUIパ...
View ArticleClik here to view.
HTMLレンダリングエンジン
目次ブラウザとは(ブラウザコンポーネント)ブラウザとサーバーの通信HTMLレンダリングエンジンJavaScriptエンジン日本ブラウザシェア率(2016~)ブラウザとはウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA)...
View ArticleHTML/CSSの書き方(ちょっとhaml)
html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。都度更新しておりますのでご了承ください。いつも参考にさせていただいているサイト⭐️色の見本http://www.netyasun.com/home/color.html⭐️Font-familyメーカーhttps://saruwakakun.com/font-family基本<!DOCTYPE...
View ArticleClik here to view.
年末まで毎日webサイトを作り続ける大学生 〜10日目 Css Grid Layout, Flex Box, Google Font,...
はじめに初めまして。年末まで毎日webサイトを作っている者です。今日もMDNの初心者ページを見て勉強していたんですが、そういえばレイアウト全然やってないなということでGrid Layout, Flex Boxを使ってみました。作ったものはGrid Layoutの枠に入ると名言がランダムで表示されるというものです。...
View ArticleClik here to view.
アスペクト維持 x トリミング x 横幅:レスポンシブ x 最大幅:元画像サイズ で画像表示
画像のアスペクト比を維持しながら、指定の比率でトリミングしたい。表示サイズはレスポンシブ。ただし最大幅は元画像の横幅での表示の例です。css.img-fluid-trim{display:inline-block;}.img-fluid-trim>div{height:0;width:auto;overflow:hidden;}.img-fluid-trim-1x1>div{paddin...
View ArticleHTML+CSSでシュッと出てくる折りたたみメニュー
作りました。 See the Pen クリックでシュッと出るメニュー by むいにゃん 🧗 (@mui_nyan) on CodePen. ソース<details><summary>絞り込み</summary><div>シュッと出てくるコンテンツ...
View Article【駆け出しWEBエンジニアのためのメモ】WEBアプリ作成の作業フロー_基礎（Rails）
背景最近、10年のブランクをへてプログラムを猛勉強中で、特に未経験のWEBプログラミング（Rails）に挑戦しております！TECH::EXPERTにて基礎は学びましたが、どこか「あと少し」な感じで全体像が掴めずにいました。全体像を把握するためにも、WEBアプリ作成の大まかな作業フローをメモさせていただきました。※フォーム、ログインなど、他の機能は別途記事を作成いたします。...
View ArticleClik here to view.
毎日ブログ2日間
今現在書き始めた、時刻が23:50分早めに書き終えるようにします。昨日のTo Do List で実践できたことは①Progate中級道場 これは3回目ということもあり、2時間弱で終えれました。containrはいじらない方が良くて、幅とmargin:0 auto;だけにしといた方がよさそう。それに、container p とか hはしない方がよい。後半でもcontainer...
View ArticleClik here to view.
今最も人気のあるCSSフロントエンドライブラリトップ10
こちらの記事は、Indrek Lasn氏により2019年 8月に公開された『 Here’s a List of the Top CSS Front-End Libraries...
View Article