CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック

2024/08/05 22 users 変数 class CSS コンポーネント トークン

CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるよ... 続きを読む

CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます

2023/06/06 121 users block display displayプロパティ CSS

CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを...記事の続きを読む 続きを読む

実行環境依存のコードに対してテストを書く考え方

2022/03/04 149 users テスト コード 考え方 エントリポイント node.js

社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!... 続きを読む

Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT

2018/12/16 720 users MOONGIFT デファクト フィルタリング ソート 高機能

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulator... 続きを読む

Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT

2018/12/15 720 users MOONGIFT デファクト フィルタリング ソート 高機能

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulator... 続きを読む

コンパイラは関数のインライン展開を☓☓段で力尽きる - Qiita

2018/02/22 23 users Qiita コンパイラ puts 関数 num

はじめに 「コンパイラって、関数のインライン展開を何段までやってくれるんでしょうか？これってトリビアになりませんか？」 このトリビアの種、つまりこういうことになります。 「コンパイラに多段呼び出しの関数を食わせてインライン展開させた時、☓☓段で力尽きる」 実際に調べてみた。 ソース 関数の多段呼び出しをするコードを吐くRubyコードを書いた。 num = ARGV [ 0 ]. to_i puts... 続きを読む

Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール | コリス

2017/09/08 94 users コリス クリティカル レンダリング 上部 テクニック

スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介しま... 続きを読む

[CSS]object-fitの賢い使い方: インラインの動画を背景画像のようにブラウザいっぱいに表示するテクニック | コリス

2017/05/31 57 users スクリーン object-fit コリス デスクトップ スマホ

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。 レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示さ ...記事の続きを読む 続きを読む

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 - かちびと.net

2015/01/09 36 users SVG CSS JSライブラリ img SVGファイル

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”... 続きを読む

JetBrains、オンプレミスのレポジトリブラウザ／コードレビューツール「Upsource 1.0」の提供を開始：CodeZine

2014/12/10 21 users CodeZine JetBrains レポジトリ リビジョン

チェコのJetBrainsは、オンプレミスのレポジトリブラウザで、コードレビューツールとしての機能も備えた「Upsource 1.0」の提供を、12月9日（現地時間）に開始した。 「Upsource 1.0」は、VCSレポジトリ全体を閲覧可能で、社内のレポジトリとGitHubのような外部レポジトリを同様に扱える。 コードレビューツールとしては、リビジョンの判別やインラインまたは横に並べての比較、最... 続きを読む

Markdownの参照形式によるリンク - Weblog - Hail2u.net

2014/11/19 32 users Markdown Weblog hail2u.net 格段

Markdownでリンクを作成する方法には2種類ある。インラインで記述する方法が最もよく使われており、必ずHTMLに変換するということならばこれだけで十分とも言える。もう一つの参照形式で記述する方法はほとんど使われていないが、Markdown文書をテキストとして読む場合に、ともすれば長くなりがちなURLが本文に挟まらないので格段に読みやすさが向上する。 This is [an example re... 続きを読む

Shure SE112m+ イヤホン発表。予想実売6480円、iOSインラインリモコン付きエントリーモデル - Engadget Japanese

2014/10/10 33 users Engadget Japanese イヤホン発表 新製品

Shure SE112m+ イヤホン発表。予想実売6480円、iOSインラインリモコン付きエントリーモデル BY Munenori Taniguchi 2014年10月10日 11時53分 0 ヘッドホンメーカーのShureが、SE シリーズの新製品 SE112m+ を発表しました。6月に発売したばかりの SE112 に、インラインのリモコンマイクを追加したエントリーモデルです。 Shure とい... 続きを読む

横にはみ出すナビゲーション - Weblog - Hail2u.net

2014/09/11 36 users Weblog hail2u.net ナビゲーション ナビゲー

今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲー... 続きを読む

プロアマ問わず使える10個の最新無料CSSツール / ウェブデザインライブラリー

2014/08/08 243 users ウェブデザインライブラリー ウェブデザイン class 成果

ここでは、最近リリースされた、無料のCSSツールを10個集めてみました。 プロでも使えるものもありますし、ウェブデザインには詳しくないけど、ネットビジネスを運営している人、成果を増やしたい人に役立つツールもあります。 ここで紹介するツールを使って、仕事を楽にできるようになるといいですね。 ExtractCSS HTMLからidやclassを抜き出したり、インラインで定義したスタイルを抜き出してきま... 続きを読む

[JS]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext | コリス

2014/05/27 46 users モーフィング jQuery コリス スクリプト アニメーション

複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい！ Morphext Morphext -GitHub Morphextのデモ Morphextの使い方 Morphextのデモ デモではテキスト内のインラインで、複数のテキストがモーフィングで次々に変更されて表示します。 デモ Mor... 続きを読む

ウェブサービスの body 要素に出力されている id と class まとめ · Issue #56 · shikakun/tips · GitHub

2014/03/05 40 users GitHub shikakun Issue HTML Tips

スタイルシートを書くとき、こういうページにだけ適用したいということがある。HTML 中にインラインで書くのは論外として、HTML の body 要素にそのページの役割を示す id なり class なりが割り振られていれば便利そうだな〜と思って他の有名どころのサイトのソースを見たら body 要素にきちんと書かれていることが多かった。 というわけで、ログイン状態でそれぞれのサービスのトップページ（... 続きを読む

[WordPress]アイキャッチのURLを取得してCSSで背景画像に設定する方法*prasm

2014/01/16 48 users prasm background アイキャッチ div CSS

こんな感じ、別にspanでなくてもdivでもなんでも、インラインで指定します。 アイキャッチをbackgroundで指定できるとどういいのか？ こればっかりは好みとしか言いようがありません。別にバックグラウンドで指定しなくても、普通に呼んでpositionで好きに配置することも出来ますしね。 prasmでの使い方 主にモバイルテーマで使っています。 ヘッダー部分のアイキャッチだけが固定でブログタイ... 続きを読む

レスポンシブ対応のHTMLメール用のシンプルなテンプレート（テキスト形式にも対応） | コリス

2014/01/13 79 users コリス 罫線 CSS 天地 見出し

Responsive HTML Email Templateの使い方 使い方は簡単です。 「email.html」を使って、HTMLメールを作成します。 作成が完了したら、CSSをインラインにします。 これで、完了です。 CSSをインラインにする時は、下記のツールが便利です。 HTMLメール用のコードの完成 コードの下には、テキスト形式のメールでの表示も確認できます。 見出しの天地に罫線が自動で入... 続きを読む

やる夫が(インライン)アセンブラを使って競技プログラミングに挑戦するようです - Negative/Positive Thinking

2013/12/08 104 users プログラミング ネタ 名無し Negative アセンブラ

プログラミングこの記事はCompetitive Programming Advent Calendar Div2013の9日目の記事です。 今年も、競技プログラミングでほとんど役に立たないネタをお送りします。 1：名無しのターゲットさん：2013/12/9(月) 00:25:07 ID:jetbead !　|　　　!l |! !　 　| !　　　 |　!　l　　 　|　　!　l　 |!　|　　　!... 続きを読む

iOSの標準Mailアプリにツールバーを追加しているLinkedIn Introはどうやって実現しているのか – @masuidrive blog

2013/10/24 158 users iOS メールアプリ iPhone LinkedIn 沢山

Posted 2013/10/24 filed under iPhone, Javascript. LinkedInが本日、iOSの標準MailアプリでLinkedInのプロフィールを見ることのできる「LinkedIn Intro」というサービスをリリースしました。 このサービスを導入すると、メールの中で送信者の情報をインラインで見ることができます。 iOSにはメールアプリが沢山ありますが、このサ... 続きを読む

Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」:phpspot開発日誌

2013/04/08 27 users lightbox jQueryプラグイン オーバーレイ 画像

Superbox, the lightbox, reimagined Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 オーバーレイではなく、その場でインラインに画像が拡大されるGoogle画像検索はなかなか使いやすいですが、それを実現するためのjQueryプラグイン。 LightBoxが出たのが2005年ですが、あれからもう８年も経つんですね。あれから色... 続きを読む

Gmailで返信のときに署名をつけずに返信する方法：定型返信文を活用 : ライフハッカー［日本版］

2013/04/03 119 users Gmail 署名 ライフハッカー コミュニケーション 返信

Gmail , Google , Webツール , コミュニケーション , 仕事がはかどる , 仕事術 , 最新テック Gmailで返信のときに署名をつけずに返信する方法：定型返信文を活用 2013.04.03 15:00 インラインでメールをやりとりする際、署名を付けて返信していると、どんどんメール下部に署名が追加されてしまいます。設定次第で署名の位置を変えることはできますが、それにしてもメール... 続きを読む

【Twitter VS Instagram】どっちで写真をアップする？両者のフィルター比較してみた。（昼刊） - たのしいiPhone！ AppBank

2012/12/13 12 users Instagram Twitter AppBank 昼刊 両者

【Twitter VS Instagram】どっちで写真をアップする？両者のフィルター比較してみた。（昼刊） カテゴリ: ニュース | ライター: mamiruton Twitter VS Instagramフィルター比較してみた。 Instagramで投稿した写真がTwitter（公式サイトおよび公式アプリ）でインライン表示されなくなったと話題になりました。そしてそれと同時にTwitter公式ア... 続きを読む

たった１つのdivで表現されるアイコンデータベース「One div」:phpspot開発日誌

2012/12/13 25 users div CSS phpspot開発日誌 データベース HTML

One div - The single element HTML/CSS icon database たった１つのdivで表現されるアイコンデータベース「One div」 マークアップ上は<div></div>なのですが、次のようにCSSを使ってアイコンっぽくみせているアイコンのデータベース。 CSSが長くなるため、扱いやすいとはいえませんが、応用することで便利に使えそう。 軽量でインラインで記... 続きを読む

その場でデータを編集。BootstrapやjQuery UIに対応した「X-editable」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログオープンソース・ソフトウェア

2012/12/03 68 users MOONGIFT Bootstrap jQuery UI

表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えま... 続きを読む