CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
Pixel 4 シリーズの登場に併せてリリースされた Google 純正の録音アプリ「レコーダー」は音声を文字に起こす素晴らしい機能を搭載しており、今後、人々のライフスタイルを大きく変える可能性を秘めている思いますのでアプリを紹介します。 録音アプリやボイスレコーダーアプリは既に様々なものが Google Play ストアで配信されているので「レコーダー」は特段珍しいアプリではありませんが、録音データの活用の幅が広がるという意味において「レコーダー」は注目のアプリだと言えます。 注目のアプリと言っても基本的な機能や使い方は他の録音アプリ・ボイスレコーダーアプリと大体同じです。録音開始ボタンを押して録音を開始し、終了ボタンを押して停止します。「保存」を押せばデータとしてスマホに保存されます。 アプリの特徴が録音データの再生画面です。再生ボタンの上にあるタブでモードを選択できるようになっており
テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-clampプロパティの仕様 text-overflowでこれを実現できますか？ 実装の注意点 line-clampプロパティのサポートブラウザ リソース line-clampプロパティとは CSSのline-clampプロパティは、テキストを指定した行数で省略します。 2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があ
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
インターネットで海外のサイトを閲覧する際、内容がすべて英語で書かれているとどうしても解読に時間がかかります。Google翻訳など便利なツールも登場していますが、自動翻訳の精度はまだ高くなく、内容を正確に理解するには英和辞書が手放せないという人も多いはず。youwhtさんが無料で公開している「英語コピ郎君」は、クリップボードにコピーするだけで英単語の意味を調べることができるデスクトップ英語辞書ツールで、PCのモニターと電子辞書をわざわざ見比べる必要がなくなります。 英語コピ郎君の詳細情報 : Vector ソフトを探す！ https://www.vector.co.jp/soft/winnt/edu/se519844.html 高速なデスクトップ英語辞書ツールを作った物語（英語コピ郎君） - Qiita https://qiita.com/youwht/items/7f5686a30eed1
経歴や年表を一目でわかるように図示したタイムラインを、テキストを編集するだけで簡単に作成できるのが「Cascade Timeline Maker」です。静的なHTMLで出力されるので、出力したタイムラインは自分で自由に使うことができます。 Cascade Timeline Maker https://cascade.page/ Cascade Timeline Makerにアクセスするとこんな感じ。最初からサンプルのタイムラインが表示されています。 左下のテキストボックスに「開始月/開始日/開始年-終了月/開始日/終了年:内容」という形式で入力を行うと、即時にタイムラインが出力されます。月日は抜いてもOKです。 以下の画像は、年だけで指定した場合、年月で指定した場合、年月日で指定した場合、そしてわざと開始年と終了年を入れ替えてエラーになるように指定した場合を表示させたもの。年月指定にすると
お肉屋さんで肉を買うというライフハック｜田中 伶
「肉は肉屋で買うのが、いいよ」 …と、13文字で書けることを、長々と語りたいのが私です。 今年「財布を小さくしたら毎日が変わった」というnoteを更新してみたり、日々の暮らしの中での小さなライフハックをいろいろと研究している私。 そんな私が新たに見つけたライフハックが「肉を肉屋で買う」ということだ。お家の近くに贔屓の商店街や個人商店がある人からすれば「？」と思うことかもしれないけれど、何を隠そう、これまでの長い人生の中で、お肉屋さんでお肉を買うという経験が一度もなかった。私だけじゃないと信じたい。あと料理はそれなりにすることも言い訳しておきたい。 ただ、スーパーに行けばパックのお肉が売っていて便利だし、自分が何を作りたくて、そのためにはどれぐらいの分量のお肉が必要かというのはパックの大きさで目で見てざっくり判断するのが常識だった。それ以上のことは特に必要としていなかった。 「ハンバーグを家
前回: Qiita APIで記事からYoutube動画を集めてみた 🎬 、Qiita APIを使って、Qiita記事を取得してYoutube動画のURLを抽出することができました。 今回は、特定APIに関連したQiita記事を取得して、API毎に分類、タグを集計してドーナツグラフ化することでAPIの特徴を表してみました。 最新のAPI一覧はこちら API一覧 | DOGAKIITAA! ～ APIごとにQiita記事を分類 ～ Google系 Cloud Vision API https://cloud.google.com/vision/docs/quickstart 📝 機械学習を使用して画像を解析します。画像ラベリング、顔やランドマークの検出、光学式文字認識（OCR）、不適切なコンテンツへのタグ付けなどができます。 Cloud Vision APIの凄さを伝えるべくRasPi b
コツコツと開発を続けてきた、テキストエディター向けの色テーマ「Iceberg」。開発6年目にして、とうとうGitHubのスター数が1,000を越えました！めでたい🎉🎉🎉
書くことがなくなった - phaの日記 リンク先の文章がアップロードされた時、半目でそっと、逃げるように全文を読んだ。読んではいけないものを読んだ気分になった。 それから丸一日が経ち、寝る前に再び「書くことがなくなった」というタイトルを思い出していたら、おなかが痛くなってきた。心に引っかかっていることがある時の、そういう腹痛だとすぐにわかった。やっぱり他人事ではなかったのだ。他人事ではないから逃げるように読み、ブックマークすることもツイッターで言及することもなかった。が、腹痛をとおしてこれが自分の問題だとハッキリ認識した。たぶん、私と同じぐらいの年齢の、だんだんオンライン上で文章を書かなくなっていった人たちも他人事ではないだろう。 phaさんが言う「書くことがなくなった」の内実はどういうものだろう？ あくまでオンラインの、無料の、すべての人に公開された領域に書くことがなくなったのか。それと
Markdownをはやく効率よく書くために 前提として、マークダウンを編集するエディタはVSCodeを使います。 Markdownファイルを使って記事を管理している場合、マークダウンを効率良く書けるかどうかは生産性に直結します。 VSCodeの拡張機能と基本設定（スニペット）を使ってマークダウンを速やかに編集する方法について書いていきます。 よく使う機能にフォーカスしてその操作をイメージできる一般的なショートカットキーを使う（覚える）のがポイントです。 拡張機能があるならそれを使う Markdown All in One ショートカットや便利なコマンドが有効になる拡張機能です。たくさんの機能がありますが、利用頻度が高いものだけ使います。 太字にするショートカット テキストを選択した状態で、Macなら ⌘ + B 、Windowsなら Ctrl + B で太字になります。多くのエディタで採用
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
画像・PDF・TXT・メールなどの中身を読み取って検索できるようにするオープンソースのドキュメント整理ツール「Teedy」レビュー
Teedyはさまざまな種類のファイルの中身を読み取って検索できる状態にしてくれるドキュメント整理ツールです。受信したメールを自動で取り込む設定もできるとのことなので、実際にセルフホストして使い勝手を確かめてみました。 sismics/docs: Lightweight document management system packed with all the features you can expect from big expensive solutions https://github.com/sismics/docs TeedyのインストールにDockerを利用するので、下記のリンクから自分の環境に合った方法でDockerをインストールします。 Install Docker Engine | Docker Documentation https://docs.docker.com
Visual Studioでペアプロ環境を実現する「Live Share」が、テキストチャットとボイスチャット機能を統合へ
マイクロソフトは、Viual Studioファミリーでリモートでもペアプログラミング環境を実現する「Live Share」の新機能として、テキストチャットとボイスチャットをプレビュー公開することを明らかにしました。 Live ShareはVisual StudioやVisual Studio CodeなどのVisual Studioファミリー製品間をネットワークで接続し、ペアプログラミング環境を実現する機能です。インターネット経由でも機能するため、物理的に離れた場所であってもリモートでペアプログラミングを行うことができます。 今回発表されたのは、このLive Shareにテキストチャットとボイスチャットを統合する、というものです。現在のLive Shareは1つのソースコードを2人で同時に編集することはできても、プログラマ同士の会話は別に電話やチャットツールなどを用いなければ行えませんでし
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。
画像生成AI「Stable Diffusion」「Adobe Firefly」「Midjourney」の特徴が一発で分かる「同じテキスト」から生成した画像たち
無料で使える「Stable Diffusion」やAdobeが提供する「Adobe Firefly」など手軽に使える画像生成AIが続々と登場しています。画像生成AIは基本的に「生成したい画像を説明するテキスト(プロンプト)を入力する」という形式で使用可能ですが、AIの種類やモデルデータが変化すると生成結果もまったく別物に変化します。テクノロジー関連ライターのMuhammad Usman氏は「Adobe Firefly」「DALL・E2」「OpenJourney」「Stable Diffusion」「Midjourney」といった主要な画像生成AIに同じプロンプトを入力した際の生成結果をまとめています。 Comparing Adobe Firefly, DALL・E2, OpenJourney, Stable Diffusion, and Midjourney https://blog.us
UXライティングとは | UXライティングガイド
UXライティングとは何か UXライティングとは、ユーザーがデジタルサービスを操作する際に必要となるテキストを書く技術です。例えば、登録時のスタートガイド、利用の流れコンテンツ、タイトル、ボタン、画面上の説明文、エラーメッセージ、通知などの言葉がUXライティングの手法に則って書かれます。サービスの中にある言葉に対して「意味が通じればいい」という思想で書くのではなく、「ユーザーがサービスを通じて体験する一連の経験を設計する」という思想で書くのがUXライティングです。 UXライティングに求められる技術とは UXライティングには、分かりやすく書く技術と、人間らしく書く技術が必要です。この二つの技術が同居することによって、ユーザーの体験を支援することができます。 分かりやすく書く技術 UXライティングの手法に則ってテキストを書く際に求められるのは、「ユーザーの気持ちに沿った文章を書く」という抽象的な
最近のデバイス・モダンブラウザの仕様に対応した、モダンCSSリセットを紹介します。スタイル宣言はたったの9個ですが、個々のCSSについて詳しく解説されているので、記事はけっこう長いです。 なぜそうしたのか、なぜそれを使用しないのか、最近の実装にあわせたCSSの役立つテクニックもたくさん解説されています。 My Custom CSS Reset by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 他のいろいろなCSSリセットについては、下記をご覧ください。 モダンブラウザに適したCSSリセットのまとめ はじめに CSSリセット 1. ボックスサイズのモデル 2. デフォルトのマージンを削除 3. 高さは%ベースを使用 4. アクセシブルなline-heightを追加 5. テキストのレンダリングを改
Mac 初期設定 対象読者 知り合いのエンジニアさん向け Mac初めて買った人 Web系エンジニア向け 環境 macOS Catalina 10.15.3 MacBook Pro (13-inch) 前置き 導入ツールについては良く使うものに厳選してます。 CLI ツールや GUI ツールは必要になってから入れた方がいいかも。 zshの設定、tmuxの設定、vimの設定は別記事にする予定です。 古いですがzsh設定の記事です。 https://qiita.com/ucan-lab/items/1794940a64882021dcb1 設定ファイルのインストール自動化は別記事にします。 私とまったく同じ設定にしたい人はいないと思うので今回は個別インストール記事にしてます。 (一通り書き殴っただけなので、追記するかも) 最初にやること ソフトウェア・アップデート (appleマーク) > こ
結局みんなキャッキャウフフしたかっただけなのか - phaの日記 読んだ。そう言われればそうかもしれないし、それはあとからくっついてきたおまけのようなものだと言えばそんな気もする。 ブログを熱心に書いていたときのモチベーション、いま思い返すと「誰かに読まれる」ということは間違いないんだけど、その「誰か」は他でもない自分自身だったのではないかと思う。 自分が考えたり経験したことを言葉にして外に出し、冷静に読み返すことで得られたものがたくさんある。それは自分の視点だったり思考の癖だったり、要するに「自分を他人として眺められる方法」で、個人的に人生を生き抜く術として有効だった。その方法を身につけることでたくさん救われたし、同じ視点をもつ人と意見を交換するのは、とても楽しかった。 まとまった文章を書くのって難しくないか？ 一方で、この増田に書かれている内容も、よくわかる。 素人同士が長文で意見ぶつ
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
23日、2日間のうち１日だけですが、ROCK IN JAPANが去ったひたちなか市で新たに立ち上がった新フェス「LuckyFM Green Festival」に行ってまいりました。 事前からいろいろ確認したりしていましたので、ある程度時系列で。 ＜事前＞ ROCK IN JAPANが、それまでのひたちなかでの開催ではなく、千葉市の蘇我スポーツ公園で開催されることが発表されたのが2022年1月5日の正午。しかしその数時間後には具体的な内容等の発表はなかったものの、国営ひたちなか海浜公園で今夏新フェスを開催します、という声明が。 具体的な日程とフェス名、第1弾ラインナップが発表されたのは4月28日。 開催まで3か月を切った中での告知開始というのは新しいフェスとしては致命的なほど遅く、かつ発表された7/23-24という日程は、浜松市の渚園でFUNDAY PARK FESTIVAL、大阪市舞洲でO
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
急いで転職・独立する前に。自由を求めてフリーランスになった私が、自分と向き合い会社員としてふたたび組織で働くまでの話｜文・はせおやさい - ミーツキャリアbyマイナビ転職
＜プロフィール＞ はせおやさい 会社員兼ブロガー。仕事はWeb業界のベンチャーをうろうろしています。『サイボウズ式』にて連載中。一般女性が仕事／家庭／個人のバランスを取るべく試行錯誤している生き様をブログ「インターネットの備忘録」に綴っています。 「MEETS CAREER」では多様な選択肢の中で自分らしい生き方を選んだ方々の言葉を集め、「はじめの一歩」を踏み出すきっかけをお届けしています。今回のテーマは「組織で働く魅力とは」。 一つの会社に勤め上げるという価値観が過去のものとなり、「転職」や「独立」や「副業」が選択肢として以前より身近になってきているように感じます。そのため現状でモヤモヤすることがあったりつまずいたりしたときに、急いでほかに目を向けようとする人も多そうです。ですがその前に、今の会社でできることをしっかり整理しないと後悔することになるかもしれません。 はせおやさいさんは、大
好きなモノを本気で推す最適ツールはブログである。戦略としての“推し”ブログ術（寄稿：ゲーマー日日新聞／ジニ）【書籍プレゼントあり】 - 週刊はてなブログ
【書籍のプレゼント情報あります！】 『ゲーマー日日新聞』でゲームの文化的価値を発信するジニ（id:arcadia11）さんに「推す」ツールとしてのブログ術をブログへの溢れ出る愛とともに寄稿いただきました。記事末にはプレゼント情報もあります！ この記事は、はてな×KADOKAWAで取り組む「ブログ書籍化プロジェクト」で出版される書籍のプロモーション記事です。 インターネットは戦場と化している。自分が作り出した「正しさ」や「美しさ」を世界中の人間に伝えるべく、企業、行政、シンクタンクなどあらゆる人材とリソースが、インターネットにおける「情報」というミサイルを射出している戦場の如き徹底した砲撃、爆撃、掃射によって、インターネットには視覚的、聴覚的爆音が轟く。 しかし、情報に溢れるインターネットだからこそ、自分の言葉を伝えたいという意志を持つ人が今増えつつある。言葉という武器を抱えて戦場に飛び込み
書くことがなくなった - phaの日記
気づいたらインターネットで書くことが特にないな、という状態になっていた。ツイッターとか何をつぶやいたらいいかわからない。 もともとツイッターとかで熱心につぶやいていたのは、ネットにいるたくさんのよく知らない人たちに曖昧にちやほやされたい、という自己顕示欲があったからだったのだろう。 年をとったせいか、知らん人に別にそんなにちやほやされたくないなー、という気分になってきた。興味のある人には直接連絡を取って話せばいいし、人間関係をむやみに広げたいという気持ちもなくなってきた。 昔はネット上で流行ってる話題に乗っかっていっちょかみしたり、仲良くなりたい人にエアリプしたりなんかもしてたけど、もう全くそんなことする気がしない。 そうすると、つぶやくことを何も思いつかなくなってしまった。もともと、つぶやく必要があることなんて特に何もなかったのだろう。 なんかいろいろできあがってしまったんだな。これから
Otterは会議やインタビュー、講義を始めとしてさまざまな場面での英語での会話をリアルタイムにテキスト化する、AIを活用したサービスです。
ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンにテキストを配置する時、上下のスペースを揃える 終わりに はじめに デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。 しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか？ そもそ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き こんな方法があったのか、思わず納得なCSSテクニックをご紹介 この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。 新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。 普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。 コンテンツ目次 1. ついにCSSコンテナクエリ利用可能に 2. グリッドに名前をつけてレイアウトを視覚化する方法 3. 長いテキストを短く省略する方法 4. transformプロパティが独立してより使いやすく 5. くるりと回転するアニメーション文字の作り方 6. :hasプロパティでAppleのO
はじめに こんにちは, ホクソエムサポーターのKAZYです｡ 先日猫カフェデビューをして, 猫アレルギーであることがわかりました🐈｡ 次はフクロウカフェに挑戦してみようかなと思っています🦉｡ ところで皆様, 有価証券報告書は読んでますか？ 私は読んでいません｡ 読めません｡ 眺めていると眠くなります💤｡ 私は眠くなるんですが, 有価証券報告書ってテキストマイニングするのに向いているんです｡企業の事業や財務情報が詳細に書かれています｡ XBRL形式で構造化されています｡ 数千社分のテキストが手に入ります｡ おまけに無料です｡ どうです？興味湧いてきませんか？ 本記事ではPythonを使って有価証券報告書をテキストマイニングする方法を紹介します｡ 有価証券報告書をダウンロードするところからご紹介するのでご安心を｡ こんな方が見たら役に立つかも 企業分析をプログラミングでやりたいが何してい
RoughNotation
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google純正の「レコーダー」は録音した音声を文字に自動変換してくれる | juggly.cn
line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
英単語の意味を「Ctrl＋C」だけで爆速で調べられる英語辞書ツール「英語コピ郎君」レビュー
タイムラインをテキスト編集だけで簡単に作りHTMLで出力できる「Cascade Timeline Maker」
WEB開発に役に立つAPI一覧+API毎に関連するQiita記事を分類 ！ - Qiita
自作カラースキームがGitHubで1,000スターを越えるまでの6年間の軌跡 - ここぽんのーと
もし書くことがなくなったら、俺らは一体なんなんだ - シロクマの屑籠
Markdown（マークダウン）をVSCodeの拡張機能とスニペットで効率良く書く - Qiita
アクセシビリティ | SmartHR Design System
Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
https://twitter.com/shuzonarita/status/1572947933712220161
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト
モダンCSSリセットを徹底解説、最近のデバイス・モダンブラウザの仕様に対応
Mac を買ったら必ずやっておきたい初期設定 - Qiita
自分の書くものに飽きている - インターネットの備忘録
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
ひたちなかの新フェスに行ったこと - WASTE OF POPS 80s-90s
Googleフォントをサブセット化してページの読み込みをスムーズに
DALL·E 2 を早くも破る！超リアル画像生成モデル Imagen を解説
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
「Visual Studio Code」に日本語テキストの校正機能を追加する拡張機能「テキスト校正くん」／「Visual Studio Code」でドキュメントもブログも書いてしまう人に是非お勧め【レビュー】
Otter｜Otterは英語音声の文字起こしアプリです
CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
有価証券報告テキストマイニング入門 - 株式会社ホクソエムのブログ