1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
Webサイトのファーストビューに『動き』を取り入れるアイデア8選｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webサイトの顔とも言える「ファーストビュー」をより魅力的に見せるためのコツについて調べてみました。参考サイトもたくさん紹介しているので、ぜひ最後までお楽しみください✍ はじめに：ファーストビュー（FV）とは？Webサイトのファーストビュー（FV）とは、サイトを開いたときにスクロールせず見える範囲のこと。ユーザーにとってはいちばん最初に目に飛び込んでくる、Webサイトの第一印象を決める「顔」となる部分です。 （ちなみに「ファーストビュー」は和製英語で、英語では「Above the fold」と呼ぶそうです。） たとえば、家計簿プリカ「B/43」公式サイトのファーストビューは以下のようなデザイン。B/43のメリットを文章とカードによって端的に伝えながら、画面下部には利用シーンがわかる写真をカルーセルで掲載。一画面の中
Pico WのBluetoothでキーボードを手軽に無線化 - Qiita
0. はじめに 以前の記事で作ったオリジナルキーボード、ポータブル性にはにすっかり満足していたが、これをiPhoneやiPadで使いたい欲が出てきた。ただ、通常の有線キーボードを単にLightning-USB(Type-C)ケーブルでつないでも、iPad側ではそれをキーボードと認識してくれない。どうやら有線でつなごうとすると、こちら記事のようなカメラアダプタが必要らしい… 本記事では、カメラアダプタではなくBluetooth接続を選択した経緯と、その実現方法や苦労した点、参考になったプロジェクトなどを備忘録として書き残す。 1. 成果物 インターフェース1月号でPico WのBluetoothが解禁になったと知って、有線キーボードを無線化できる外付けデバイスを作ってみた せっかくなのでiPhoneに試し打ちした様子をキャプチャ 次はこれを収める箱でも設計しようかな#キーボード#自作キーボー
Notionを使って自分だけの参考サイト集を作ってみる - paiza times
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る
Python だけで作る Webアプリケーション(フロントエンド編)ーはじめに - Qiita
お疲れ様です。 今日からは「Python だけで作る Web アプリケーション(フロントエンド編)」について部分いたします。 はじめに 設計方針 共通部分の作成 ログインページ 商品一覧ページ 商品詳細ページ カートページ 注文一覧ページ 注文詳細ページ まとめ 今回は10の記事に分けて投稿するようにします。 今日は「はじめに」について部分いたします。 なぜ本書を書いたのか 本書は主に以下のような方を対象にしています。 Web アプリケーションの構築経験がない新米エンジニア Python はかけるが、HTML/JS/CSS が苦手な Pythonista 細かい UI の設定はせず、検証・デモ用の Web アプリを短期間で作りたい開発チーム どうやって作ったか 対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。 Web アプリケーションの基礎知識 参考にしてもらえる品質
ぼくたちのかんがえたさいきょうのi18n国家
本記事は下記のtweetから始まるスレッドに触発され、@qnighyや@na4zagin3からアイディアを拝借して書いた。 i18n力が最強の国は国内に複数の言語があり、そのうちいくつかは他国でも使われている言語の方言で、1バイト文字での代替表記が困難で、歴史的にISO-2022ベースの文字コードとUnicodeと独自エンコーディングが混在していて、フリガナなどの特殊な組版規則があり、右書き左書き縦書きを併用し、 — Masaki Hara (@qnighy) 2018年8月6日 皆さんのおかげで最強のi18n国家が建設されつつある。一瞬で滅びそう — Masaki Hara (@qnighy) 2018年8月6日 長い前置き ソフトウェアのi18nは難しい。自文化では当たり前と思っていてハードコードしてしまった仮定が崩れて、大幅な再設計を余儀なくされるからだ。気づいて再設計できればまだ良
Pythonでコードに意図を込める方法 - Qiita
はじめに 可読性の高いコードを書くためには、開発者の意図をコード上で表現することが重要です。この記事ではコードに意図を込めるいくつかの方法について説明します。いずれも基礎的なものであり、かつ粒度に若干ばらつきがありますがご容赦ください。 方法 適切な命名をする 適切な命名はコードの意図を伝える単純かつ最も強力な方法。変数や関数の役割や機能を十分表現するような具体的な命名を心がける。例えばリーダブルコードによると、適切な命名のために以下のような指針が示されている。 指針 例
styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
Raspberry Pi 5対応カメラ画像長距離伝送キット「THSER102」発売｜fabcross
ザインエレクトロニクスが、Raspberry Pi 5および最新カメラに対応したカメラ画像長距離伝送キット「THSER102」を発売した。 Raspberry Pi本体とカメラモジュールを接続する際には、一般的に15～20cm程度のケーブルを使用するため、本体とカメラの設置位置がケーブル長によって制限されてしまう。同キットを活用することで、標準的なLANケーブルを使って10m以上離れていても、パフォーマンスを落とさずカメラ画像の長距離伝送が可能になる。 HAT on HATや3ch GPIO拡張に対応しており、HATボードとTHSER102を同時使用したり、GPIO通信を延長してカメラモジュールのジンバル制御をしたりするなどの使い方も可能だ。Raspberry Pi 5やRaspberry Pi 4 Model Bなどのボード、V2およびHQを含む従前カメラモジュール、Raspberry
Raspberry Pi Pico用ミニコントローラー
Raspberry Pi Pico用小型のプログラマブルコントローラーです。音声フィードバック用のブザーと六つの入力ボタンを備え、GP1、2、3、4、14、17、ADC1、ADC2、3.3 V、GNDパッドが2.54 mmピッチで引き出されています。ボタンは典型的なゲームパッドレイアウトで、四つの方向ボタンと二つのアクションボタンが配置されています。 Raspberry Pi Pico用 自走ロボットプラットフォーム（バギータイプ）のリモコンとして設計され、バギー用のPicoも含めRaspberry Pi Pico Wでの使用が前提となっています。また、ユーザー入力/制御を必要とするPicoプロジェクト/ゲームにも使用できます。 このボードには、物理的なサイズとコストを抑えるため、スクリーンは搭載されていません。視覚的なフィードバックを必要とする用途には、ZIP96 - Raspberry
Raspberry Pi 5レビュー｜CoderDojo西神
昨年10月末にRaspberry Piの最新モデル、Raspberry Pi 5が発売されました。SoCなどの性能が向上した以外にも、色々と機能アップしています。 以下ではRaspberry Piを略してRasPiと表記します。 2024年2月現在、技適は取得したようですが技適マークの表示があるRasPi5はないため、国内では市販されていません。しかしPimoroniやThe Pi Hut, Adafruit等の海外通販を利用して入手することは可能です。 2024/02/11追記: 日本語化の記事へのリンクを追加しました。 2024/02/13追記: 国内でも技適マークの付いたRasPi5が発売されました。注意点の項に技適の特例制度について記載していますが、この記事の作成に利用したRasPi5には技適マークがありませんので、この記述は残しておきます。 スペックまず最初に、一つ前の世代のRa
ChatGPTとRaspberry Piでおしゃべりするファービーが誕生、人類の完全支配をもくろんでいることを激白 - ライブドアニュース
1990年代末から2000年代初頭にかけてヒットした電子ペットロボット「」は、電子レンジに入れられたりオルガンに改造されたり、ハッキングされて好きな言葉を言わされたりと、ハッカーからも人気の高いおもちゃです。プログラマーのジェシカ・カード氏が、このファービーにUSBマイクとRaspberry Piを接続し、ChatGPTで人間に通じる言葉でおしゃべるできるように改造した様子をムービーで投稿しています。 ChatGPT, Raspberry Pi-Powered Furby Plans World Domination | Tom's Hardware https://www.tomshardware.com/news/chatgpt-pi-furby-nightmare カード氏が改造したファービーを以下から見ることができます。Raspberry Piと接続する都合上、かわいらしい毛皮はす
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
Astro ゆく年くる年
8 月 30 日に v3.0 がリリースされ、それから約 3 ヶ月後の 12 月 5 日には v4.0 がリリースされており、メジャーアップデートのペースがやや早かったように感じますね。Astro の co-creator である Matthew Phillips によると、v4.0 における大きな変更の一つに Vite 5 へのアップデートがあり、これはもともと v3.0 に含まれる予定だったのが、Vite 5 のリリースが遅れてしまい、一方で v3.0 の目玉機能である View Transitions を早くリリースしたかったため、まず先に v3.0 をリリースし、その後に v4.0 で Vite 5 を含めるという流れとなり、結果的に v3.0 と v4.0 のリリースが短期間で連続してしまった、という事情があったようです。 GitHub スター数の推移 https://star-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raspberry Pi 5をハードウェアデバッグしてみよう
土日で完成！ 趣味のラズパイ ラズパイとChatGPTで遊ぼう——液晶時計を作る｜fabcross
厳選Linuxフリーソフト100
名刺サイズの超小型PC「ラズパイ」で遊ぶ
Lism UI
Raspberry Pi Picoでつくる電光掲示板
