Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック

2024/07/25 14 users CSS テクニック almost Webサイト 一行

Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に... 続きを読む

2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG

2024/07/10 12 users TAKLOG center text-align 和文 別枠

先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-con... 続きを読む

ast-grep VSCode: 構造検索と置換の強力なツール

2024/03/03 95 users vscode 置換 SSR マッチング 無視

こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で... 続きを読む

CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方

2023/06/14 82 users text-wrap Balance CSS 見出し テキスト

テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントにな... 続きを読む

Goのビルドタグの書き方が// +buildから//go:buildに変わった理由

2023/05/08 8 users BUILD 論理演算 論理式 条件 書き方

ざっくり言うと // +buildは、一般的な&&や||を使う論理式の書き方じゃないので分かりにくかった 複数行書くこともできたので暗黙的な論理演算になり、意図しないビルド条件になることがあった だから、より身近で明確な書き方ができる//go:buildへ置き換えることになった（記述位置の条件とかも見直してる） Go1.17でビ... 続きを読む

このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置

2021/10/05 39 users CSS 配置 テキスト ラジオボタン ベースライン

フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="f... 続きを読む

ndjsonをソートするプログラムを書いた - so what

2021/08/26 10 users coreutils JSON so what SQL 改行

github.com 経緯 qrnを作ってからndjsonとかJSON Linesとか呼ばれているJSONを一行にして改行で並べたフォーマット*1がなかなか合理的で便利なことに気づいた。 たとえば 複数行のデータ（SQLなど）をエスケープして一行にまとめられる jqで加工・フィルタリングしやすい とか。 一方でcoreutilsみたいな基本的なツール... 続きを読む

[GitHub] Multi-line code suggestionsでコード提案機能が便利になりました | Developers.IO

2020/04/16 7 users GitHub GitHubユーザー プルリクエスト ベータ版

以前からベータ版で提供されていた「Multi-line code suggestions（複数行のコード提案機能）」がGAされました。全てのGitHubユーザーがこの機能を利用できます。 GitHubのSuggestion機能 GitHubのSuggestion機能はプルリクエストのレビューでコードの変更を提案する機能です。Multi-line code suggestionsが実装された... 続きを読む

Goで日本語コメントを書く悩み - Qiita

2019/12/15 11 users 関数 シンボル 復習 関数名 形式

この記事はGo2 Advent Calendar 15日目の記事です。 コメントの悩み まずは復習から。 とりあえず関数を例にします。Goでは関数などのシンボルの上に、 関数名[半角スペース]内容... という形式でコメントを書くことで、自動的に関数とコメントを紐付けてドキュメント化してくれます。複数行書くこともできます。 続きを読む

CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 | NxWorld

2019/08/30 42 users NxWorld CSS class 実装 a要素

実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 ※動きはPCで確認してください。 実装にはCSSを下記のように記述し、ここでは.hover-underlineというclassを適用したいa要素に指定する想定になりま... 続きを読む

VS Codeでテキストを矩形選択するには：Visual Studio Code TIPS - ＠IT

2018/05/10 48 users カラム 矩形 フォーマット マウス 特定

VS Codeで、マウス／キーボードを使い、複数行にわたって特定のカラムから別のカラムまでを矩形状に選択する方法を解説する。 連載「Visual Studio Code TIPS」 一定のフォーマットで、プログラムで使用するデータを列挙しているような場合には、それらをまとめて選択できると都合が良いことがある。Visual Studio Code（以下、VS Code）で、複数行にわたって、特定のカ... 続きを読む

【小ネタ】AWS Lambdaで複数行のログを送るときの挙動を調べてみた ｜ Developers.IO

2017/12/25 24 users 挙動 Developers.IO AWS Lambda ロク

サーモン大好き横山です。 仕事はすでに納めてますが、最近ブログが書けておらず「これはいかん」ということで小ネタを一本ご紹介します。 ログが分割されてしまう AWS Lambda（Python3.6）でサクッと書いた時に「JSONを確認したいな」という欲求のあまりに雑に以下のようなコードを書くことはありませんか？ import json def lambda_handler(event, conte... 続きを読む

Pythonメモ : あまり知られていない（かもしれない）テクニック その1 - もた日記

2017/08/17 108 users PYTHONメモ テクニック た日記 変数 forループ

2017 - 08 - 17 Pythonメモ : あまり知られていない（かもしれない）テクニック その1 Python valueswapping.py : 変数の値を交換 controlwhitespaces.py : 空白の操作 concatenatestrings.py : 長い文字列を複数行に分けて書く forelse.py : forループのelse文 whileelse.py : w... 続きを読む

pandocでプログラムが記述された納品用PDFを作ってみる - smellman's Broken Diary

2017/05/22 36 users Markdown Pandoc シェル デフォルト PDF

2017 - 05 - 23 pandocでプログラムが記述された納品用PDFを作ってみる 仕事で一人プロジェクト(開発/ コンサルティング )の時には Markdown とpandocでお客さん向けのPDFを作っていたんですが、デフォルトのテンプレートだとプログラムやシェルの動作などを記載したときにPDFではtext wrapが動かなくて特にシェルなんかは複数行に改行したり工夫していました。ただ... 続きを読む

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

2015/10/07 1048 users CSS 見栄え NxWorld 手間 タイトルデザイン

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになって... 続きを読む

CSSで括弧を表現したサンプル | NxWorld

2015/03/08 345 users NxWorld 括弧 備忘録 CSS テキスト

正直微妙なので恐らく使うことないだろうっていうのもあるんですが、ちょっと使う機会があって実装できるのか試してみたので備忘録として残しておこうと思います。「」（鉤括弧）や［］（角括弧）など、括弧をCSSで表現してみたサンプルで、普通に使うのであればただのテキストを使えば良いですが、複数行をひとつの括弧で括るようなデザインにしたい時に使えます。 ※以下で紹介する方法はブラウザによっては表示確認ができな... 続きを読む

DockerでMySQLを動かす(気を付けるべきところとかいろいろ) - Qiita

2015/02/13 54 users Qiita Docker Dockerfile MySQL

引き続きMySQLについて。DockerでMySQLを動かす場合は、いろいろと工夫が必要です。結構その辺躓いたので、メモ。 MySQLを使う際の注意点 DockerでMySQLを使う場合、注意すべきことは Dockerfileでは、複数行にまたがってサービスやプロセスの状態が保持されない(毎回サービスプロセスがすべて終了した扱いになる) MySQLはapt-getでインストールしただけではインスト... 続きを読む

一行ずつ表示されるメッセージが作れる『Storytime.us』 | 100SHIKI

2014/11/29 26 users 一行 100SHIKI http 雰囲気 作成ボタン

ちょっといいかも、と思ったのでご紹介。 Storytime.usでは、一行ずつ表示されるメッセージを作ることができる。 使い方は簡単で、複数行のメッセージを入力して作成ボタンを押すだけだ。 まぁ、それだけだが一行ずつ表示させることによりなんとも言えない雰囲気が醸し出される。 イベントなんかで使ってもいいかもですな。 Storytime.us http://www.storytimeus.com/ ... 続きを読む

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | NET BIZ DIV. TECH BLOG

2014/10/06 266 users 末尾 分量 アプリケーション レイアウト フロントエンド

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ wakamsha2014年10月6日 0 フロントエンド ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、... 続きを読む

チェックリストや計算機能などを追加した高機能メモ管理ソフト「CatMemoNote」v2.0 - 窓の杜

2014/05/15 18 users 置換 ソート 縦書き対応 テキスト 正規表現

ニュース チェックリストや計算機能などを追加した高機能メモ管理ソフト「CatMemoNote」v2.0 Unicodeに対応、正規表現を使った置換や選択した複数行のソートも可能に （2014/5/15 16:26） 「CatMemoNote」v2.0 縦書き対応でクリップボード内のテキストを自動保存する機能などを備えた高機能メモ管理ソフト「CatMemoNote」の最新版v2.0が、14日に公開さ... 続きを読む

VimのRubyインタフェース入門 -- ぺけみさお

2014/05/13 46 users vim インタフェース ぺけみさお rubyコマンド エントリ

VimのRubyインタフェース入門 はじめに +rubyでビルドされたVimはRubyインタフェースを備えている。 このインタフェースを使えばVimをRubyを使って制御することができる。 このエントリではVimのRubyインタフェースの使い方を簡単に説明する。 Rubyの実行 Vimスクリプト中でrubyコマンドを使って以下のようにする。 ruby puts "Hello, Ruby!" 複数行... 続きを読む

LINEにWebページの情報を送るにはSylfeedのSendToが便利かも！ - @hebyumetan

2014/05/06 10 users iPhone hebyumetan Sylfeed 友だち

iPhone, Sylfeed @hebyumetanです。 LINEの友だちにトークで送信するTextwellのアクション - @hebyumetan 先日、LINEの友だちにトークで送信するTextwellのアクションを紹介させていただきました。LINEアプリでのタップ数が多くて、手間がかかるんですけど、結構使っております。 ▲ このように、複数行を入力すると、最初の方が見えなくなっちゃうしー... 続きを読む

MySQLで複数行を一括でUPDATEする - Qiita [キータ]

2013/09/11 45 users テープ キータ join iOS Rails

FrogApps 技術ブログ始めました！ RailsやiOS、HTML5の情報を発信中!! → http://qiita.com/teams/frogapps データベースを運用していると、一気にデータを投入したり、更新する必要が出てきます。 MySQLではINSERT文では複数行同時に更新できますが、UPDATEでは用意されていません。 そこで、UPDATEとJOINを組み合わせて、既存のテーブ... 続きを読む

[Я]WordPress Popular Posts応用編：複数行のカテゴリ別人気記事一覧を作る方法 ： りくまろぐ

2013/01/17 47 users くまろぐ 方法 steps Rikuma 文末

今回は文末に表示している人気記事一覧の作り方です steps, Bradford University by Tim Green aka atoach 実は最近もコッソリとカスタマイズやってます。りく（@Rikuma_）です。 WordPressのプラグイン「WordPress Popular Posts」で集計されたデータを利用し、カテゴリ別の人気記事一覧を表示させる方法のエントリー3回目。 1... 続きを読む

リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」:phpspot開発日誌

2012/09/13 104 users jQueryプラグイン phpspot開発日誌 ブラ リスト

リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラ... 続きを読む