Movatterモバイル変換

bxmcr id:bxmcr

web制作に関するbxmcrのブックマーク (5)

Web ページの背景を動く星空にした話 (with react-three-fiber)
TL;DR モチベーションウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。スタート時の状況主に愛情のこもった手打ちHTML5 と手打ちCSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやらReact が世間では流行ってるらしいということでReact とTypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった
bxmcr2022/08/16
web
programming
web制作
リンク
jQuery から Vue.js へのステップアップ - Qiita
はじめに最近耳にするVue.js（ビュージェイエス）ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事ってVue.js だとどうやるの？jQuery しか使ってないけどVue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判）もともと「jQuery からVue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery とVue.js の違い jQuery は、セレクタ操作に特化したライブラリでHTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数のUI を連携させるよ
bxmcr2017/10/14
プログラミング
web制作
リンク
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
bxmcr2017/08/12
web制作
chrome
プログラミング
webデザイン
リンク
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
今さら聞けない!?CSSのborder-radiusで様々な角丸に挑戦！要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！無難で王道！正円の円弧を使った角丸border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すれば OK。半径 10px の正円の円弧をベースにした角丸
bxmcr2017/06/08
CSS
web制作
角丸
リンク
より良いCSSを書くための様々なCSS設計まとめ - ポップインサイト
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。そこで、これらの問題を解決するために考えられたのが「CSS設計」です。今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。CSS設計とはCSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。「良いCSS」とは「良いCSS」の定義として、おそら
bxmcr2016/07/09
CSS
web制作
あとで読む
リンク
1