[B! css] richard_rawのブックマーク

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

グラデーションを作成した時に、中央がグレーに濁ってしまうこと︵グレーデッドゾーン︶があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSグラデーションが算出される仕組みおすすめのカラーモードこれらの知識を活用する美しいグラデーションを生成できるツール終わりにはじめにさっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

richard_raw 2022/01/27

ああ、うん。反対色でグラデーションするとそうなりますよね。

リンク

日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG

インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。はじめに前提知識解決案の候補解決案1: 手でspanタグをつける解決案2: サーバーサイドの処理解決案3: クライアントサイドの処理クライアントサイドで文節区切り実装結果と考察さいごにはじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。縦書きはWebエンジニアにとっても珍しい実装ですが、読者にとっても慣れないUI

richard_raw 2021/02/16

“分節区切りでの折り返し” なるほど。

リンク

バイキング - アンサイクロペディア

この項目では、アトラクションについて記述しているばい! ヴァイキングにつ・い・て・は「海賊」を、定額で自由に好きなだけ食べられる食事につ・い・て・は「食べ放題」を、お笑いコンビにつ・い・て・は「バイきんぐ」をCHECK IT OUT!! はい!!! 概要このアトラクションの仕組みは至ってシンプルで上がり下がりを繰り返すだけである。最近では加速が速かったり、一回転したりするものもあるが基本的に巨大なブランコであることに変わりはない。他の特徴はジェットコースターが土台から建設されているのに対して、バイキングは設置型のアトラクションなので持ち運びできる。つまり仮に閉園したとすると、遊園地と一心同体で錆びつき滅びを待つだけか解体されて鉄くずになるかどちらかの最後しか迎えられないジェットコースターと比べると、バイキングはどこかに置かれる可能性がある。歴史遊園地の花形と言われているジェットコース

richard_raw 2021/01/05

読めないよ！/Googleでもこんなんありましたな。

リンク

Windows 98のデザインをウェブサイトに適用できるCSS「98.css」、ウェブ上でOSを再現する猛者も

Microsoftが1998年に発売した﹁Windows98﹂のデザインをウェブサイトで利用できるCSS﹁98.css﹂をエンジニアのJordan Scales氏が開発し、GitHub上で公開しています。 98.css - A design system for building faithful recreations of old UIs https://jdan.github.io/98.css/ 98.cssを使うと、ウェブサイトにWindows98ライクなデザインを適用することができます。ボタンのデザインはこんな感じ。チェックボックスや…… ラジオボタン。ウィンドウの要素もあります。 98.cssを手軽に利用するには、HTMLのlinkタグを用いて98.cssをインポートします。試しに98.cssをインポートしたHTMLを記述してみます。 <!DOCTYPE html>

richard_raw 2020/04/27

そしてモザイクに回帰する……（しません）

リンク

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に

Webで縦書きなどを実現する﹁CSSWriting Modes Level 3﹂、ついにW3Cの﹁勧告﹂に HTMLで構造化された文書に対してスタイルを与える﹁Cascading Style Sheet﹂︵CSS︶は﹁CSS2﹂から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。今回勧告になった﹁CSSWriting Modes Level 3﹂では、従来の横書きの左から右への記述︵英語やヒンディ語など︶、横書きの右から左への記述︵ヘブライ語やアラビア語など︶に加えて、日本語やモンゴル語などで使われるような縦書きなどを指定することができます。また、縦書きでは、右から左への行送り︵中国語、日本語、韓国語など︶と、左から右への行送り︵モンゴル語など︶も指定可能。これらは同一ページ上で混在でき、さらに双方向混在の記述における分離、字形の方向

richard_raw 2019/12/11

“縦書き機能は何年も前からChromeなどに実装され、一般的な表示方法として使われています。今回の「CSS Writing Modes Level 3」の勧告はそれらが一定の成熟に達したことを示しています。”

リンク

総務省｜北海道総合通信局｜2018年新年のご挨拶

新年あけましておめでとうございます。昨年7月に北海道局に着任し半年が経ちました。その間、各地を訪れ、北海道の広さを実感しています。この広大な土地を生かした大規模農業は、北海道の主要産業の一つであり、日本の食糧基地となっていることから、その特徴をさらに生かすため、農業のICT/IoT化を本格化するとともに、農家や農地では未整備地区が多い超高速ブロードバンドの整備とその先の各種無線システムの構築︵ABB‥Agriculture BroadBand︶が重要と考えているところです。また地域課題解決のためのIoTの実装に向け、北海道IoT実装推進フォーラムやIoT入門セミナー等を道内各地で開催しています。さらにICT により暮らしの安心・安全を守るため、防災行政無線／MCA ／コミュニティFM放送による住民への災害情報伝達システムの整備を支援するとともに、青少年のインターネットリテラシー向

richard_raw 2018/01/11

画像かと思ったら縦書きテキストでした。広まったらいいな。

行政
css

リンク

もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。﹁日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。﹂﹁Webで文字詰めだと？無理なんだよあきらめな！﹂なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

richard_raw 2017/11/21

OpenTypeってCSSで文字詰めもリガチャも制御できるんだ……。/凝りすぎ注意。

リンク

【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する

こんにちは、R&D部の青野です。﹁読者視点で見やすくて読みやすいページを作りましょう﹂とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。ということで、読みにくいページを作りました。と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。︵さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。︶ ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の

richard_raw 2017/10/05

暗い！/カーソルが視線追従ならあんまり気にならないかも、と思考実験。

リンク

5000兆円欲しい！.css

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

richard_raw 2017/07/21

元ネタ知らないけど、CSSでここまで作り込めるのか……。

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境‥ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

richard_raw 2016/12/15

文字詰めやリガチャもできるのか！

リンク

女子高生だったときに気が狂ってWin98でサーバーをたてた話 - Catch me If you can

注！この記事を書いている人間はエンジニアではありません！よって技術的な用語の記載は間違っている可能性がありますが、指摘するときは女子高生だと思って優しくしてほしいの.... この記事は2016年アドベントカレンダー﹁自宅サーバの思い出﹂12/3の投稿です。 www.adventar.org seong15といいます。Twitterでは﹁いちごー﹂とか﹁いちご﹂とか﹁ひこざえもん﹂と言われてます。普段は完全リモートワークの会社で営業とか広報とか採用とかやってます。いろんなシーンでエンジニアと話すことが多いんですが、世間話的にこの話をすると彼らに大ウケという結果がでており、思い出としてどこかに残しておきたいな〜というかんじで登録しました。わたしは小学校6年生の時、もののけ姫を友達と見に行った帰りに本屋で初めてアンソロジーというものをみつけてから足掛け13年ほど腐女子でした。今は貴腐人を超え

richard_raw 2016/12/05

若さゆえのブラックテクノロジー（腐女子版）……。

リンク

誰にでも起こりうる…サイトをリアルタイムでミラーリングされて検索上位を奪われたお話［不正コピー、ダメ。ゼッタイ］

こんにちは！みぞれ︵@xxmiz0rexx︶です。たまに見かける﹁記事の内容を丸ごとコピーされた！﹂という嘆き。﹁大変だなぁ…﹂なんて眺めていた私ですが、今回なんと記事の文章どころか、サイトが丸ごと不正コピーされる(URL以外で判別がつかない)というとんでもない被害に遭いましたので、私が行った対処法をまとめておきます。経緯事の始まりは10/21。 Googleの検索結果を見ていたら、わたしの運営するフリー写真素材サイト﹃GIRLY DROP﹄のタイトルの下に見知らぬURLがついてました。﹁むむ…？﹂と思いクリックしてみると、そこにはうちのサイトがありました。﹁？？？？﹂さらに、表示されている写真をクリックして詳細ページを確認してみようと思いました。カチッ思いっきりイケナイ大人のWEBサイトが表示されたんですがこれは( ﾟдﾟ)ポカーントップページ、写真のダウンロードペ

richard_raw 2015/10/27

検索上位に来ちゃうのか……。それは困りますな。

リンク

pixiv小説縦書き機能開発の裏側～横のものを縦にする～ - pixiv inside [archive]

はじめましてこんにちは。pixivでアルバイトをしているhakatashiです。さる6月10日、パソコン版pixiv 小説にて縦書き表示機能がリリースされました。この開発のあらかたを担当したので、今回の縦書き機能開発における裏側を紹介いたします。構想縦書き機能開発にあたり、設計段階からその大部分を一任されました。小説機能開発において自分の中に絶えず理念として存在していたのは、ユーザーに最高の読書体験を提供することです。縦書きによって得られる利益を最大化し、快適な閲覧を支援するために、以下のような構想を置きました。縦書き横書きの組版の差異における違和感を可能な限り軽減すること。スクロールとページングを融合した、柔軟で快適な閲覧インターフェイスを提供すること。この2点について詳しく解説します。縦組版まず、ウェブブラウザで縦書き表示を実現するにあたり、どのような手法をとるかという問

richard_raw 2015/06/16

縦中横とか二重引用符とか実装がややこしそうですね（小並感）。そしてスクロールのためにjQueryプラグインまで……！

リンク

日本語Webフォントの革命 - 3846masa's memo

日本語Webフォントに革命がおきた．詳しくは続きを読んでくれ．ちょっと大きく出てみた．実装についての記事はこちらこの記事で言いたいこと動的に日本語フォントのサブセットを作成してくれるOSSを作りました．サンプルページはこちら臨時のサンプルページはこちら追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう．追追記 herokuで運用は再検討したほうがよさそう．﹁こういうこともできます﹂の事例ということでひとつ．︵やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう︶そんなわけで，どうぞご利用ください。︵ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．︶何が革命なんだ革命が起きたというけど，どこが革命なの？僕には革命が起きたようには思えないけどそんなこと言わんといて，泣くわ．

richard_raw 2015/04/08

ダイナミックサブセッティング！/でも日本語Webフォントってあんまりいい印象がない……。

リンク

CSS SANS

CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. Itis an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。ただひとつ、﹁文字自体をデザイン

richard_raw 2015/03/14

こりゃ変態……じゃなくて大変だ。次はSVGでお願いします（え

リンク

タスク自動化ツール「gulp」を使って制作時間を短縮しよう

2014年12月24日 Webサイト制作, 便利ツールみなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、﹁フロントエンドしかいじらないよ！﹂というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違

richard_raw 2014/12/25

"gulp -v"を実行したら"gulp: command not found"って言われる……。もしかして"./node_modules/gulp/bin/gulp.js"が実行ファイルかしら。

リンク

SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！

2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで

richard_raw 2014/10/08

なるほど、こういうことも出来るんですね。（小並感）

リンク

jagrid - Excel方眼紙をWeb上に再現！ MOONGIFT

これは凄いかも知れない…。最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。日本の業務システムと言えばExcel方眼紙がデフォルトです︵断定︶。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方こんにちは、Excel方眼紙！うん、まさにExcel方眼紙です。表はまさにお手の物。セル3つ分、といった指定も簡単にできます︵data-widthで指定︶。従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja

richard_raw 2014/05/12

意外と便利そうで何かに負けた気分です。

リンク

iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT

PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。ボタンのデザイン。確かにスタイルシート調です。記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。さらにタップすると線だけに。こちらはプレイグラウンド。様々な表示例があります。ラベル。テキストエリアの部分は変更できます。こんな感じにダイナミックに文字サイズを変更できます。地図のポインター部分の大きさを変更。本当に数多くのデモがあります。検索ボックス。セクション付きのテーブルビュー。様々なテキストビュー。 Pixateは

richard_raw 2013/07/16

Xcodeを使わずにUIデザイン。無料化したそうです。Titaniumと組み合わせられるのか……。 ●デザイン ●開発 ●css ●clip

リンク

Firefox OS - naoyaのはてなダイアリー

Firefox OS が面白そう、というので少し触ってみました。 Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用のOS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。 Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。 Firefox OS from dynamis

richard_raw 2013/01/25

GAIA UIが気になります。実機欲しいですよねー。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (69)

cssに関するrichard_rawのブックマーク (127)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス