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

CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門

CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は﹃CSSによる本作り﹄の解説書を紹介します。原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。表紙に﹁未知の表現力！﹂とあるように、CSSでこんなこともできるのかと驚きの連続でした。本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。

style_blue 2023/07/14

CSS組版かー興味あるけどすごい大変そうだけど面白そうだけどすごい大変そう。あんまりページ数ないものとか、冊子の共同制作とかにはいいのかな。

css
design

リンク

次世代のCSSグラデーションツールが美しすぎる！すべての新しい色空間を完全にサポート -CSS HD Gradients

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏︵@ar

style_blue 2023/05/11

いつか使うときのためにぶくま。

リンク

いざという時に使える13のHTML&CSS Tips集 | BUILD Journal

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するいざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。CS

style_blue 2023/04/14

テキストの円形回り込みかー使い所によっては効果的なのかなーどーかなー、写真を縦表示/横表示で切り替えられるのは便利かも。ポインタが乗ってる画像以外暗くするのも使えそうかも。

リンク

こいつ、動くぞ！商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ

style_blue 2021/11/10

面白そうなので今度試してみよう。

リンク

CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト︵アイコンも︶を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃えるインタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？あなたは仲間です、多くの人が経験していると思います。この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは

style_blue 2020/08/24

そのうち必要になりそうなのでぶくま。

リンク

CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数﹁min()﹂﹁max()﹂﹁clamp()﹂の使い方を紹介します。最大幅や最小幅を計算式で定義できる﹁min()﹂﹁max()﹂、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる﹁clamp()﹂、これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの比較関数の

style_blue 2020/05/28

サイズに合わせて動的なボーダー枠やギャップ幅が使えるの便利かも。最近メーカーのサイトで小画面表示向けの設定がPCで見るとあらゆる要素が大きくなる時があるんだけどこれで解決していただきたい。

リンク

ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita

ある日のやめ太郎一家娘（3歳）「パパ、レンダリング最適化されたCSS書いてる？」ワイ「なんやレンダリングって」娘「ブラウザがWebサイトを描画することだよ」ワイ「ああ、そのレンダリングか」ワイ「よう知っとるわ」よめ太郎「（CSS関係で他にどんなレンダリングがあんねん）」よめ太郎「（また知ったかぶりしとるわ）」ワイ「ワイはいつも描画速度を意識してCSSセレクタを書いてるで？」ワイ「例えばWebサイトのヘッダ部分にある、サイト名のところにスタイルをあてる場合で・・・」ワイ「↑こんな風にセレクタを書いてやるんや」ワイ「そしたらブラウザ君は」ブラウザ君「このページの中で、header要素は・・・お、この1つだけやな」ブラウザ君「ほんで、その中のdiv要素は・・・この1つだけやな」ブラウザ君「ほんで、更にその中のa要素は・・・この1個だけやな！」ブラウザ君「特定しやすい

style_blue 2020/03/21

前から人が作ったCSSをあれこれいぢりながら何でこーゆー命名してるんだろうかと思うクラスやCSSの書き方があったんだけどBEMってやり方があるのね。なるほど勉強になった。あとこのシリーズ面白い。 ●css

リンク

すぐに使えるSCSS入門 | DevelopersIO

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。 Sass/Compass知ってるいるしがっつり使ってるよという方どれぐらいいますか？本日のお題目そんな方にはちょっと物足りないかもしれませんが、今回は大きく分けてこの5つについて紹介します。SCSS/Compassを利用するための環境 Sass・SCSS 設定ファイル Compass SCSS/Compassの応用1，Sass/SCSSって？ 1.1，Sassとは簡単に言うと、 CSS3になってさらに覚えることの増えた CSSコーディングの手間を省くいてCSSを楽しくするツール。 Sass makes CSS fun again. SassはCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。 1.2，SassとSCSSって？ちなみにSassには2つの構文があり

style_blue 2020/03/21

いつかSCSSに入門した時様にぶくま。

リンク

CSSで見出し固定＋レスポンシブ対応の表を作成

2022年4月27日 CSS, HTML, Webサイト制作料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！見出しの行を固定する表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車

style_blue 2019/11/01

そのうち使えそうな気がするのでメモ。

リンク

【第3弾】少しのコードで実装可能な15のCSS小技集

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミング CSSで計算式を書くテキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

style_blue 2019/05/17

ほほーこれは使えそう。スクロールスナップするコンテンツ作ってみたい。しましまのライン今度試してみよ。円形回り込みも何かでやってみたいかも。 ●webdesign ●CSS

リンク

段組みを使って縦書きの文章をレスポンシブ対応させる方法

2018年7月26日 CSS, Webサイト制作 CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。今回はたった一行でそんな問題を解決する方法を紹介します。 ↑私が10年以上利用している会計ソフト！縦書きの設定縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSでwriting-mode: vertical-rl; を記述します。この﹁vertical﹂が縦、﹁rl﹂が右から左︵Right to Left︶という意味です。また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl︵上から下、右から左＝Top to Botto

style_blue 2018/07/13

ほほー縦書き。IEはもう無かったことでいいよね。

リンク

超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度

ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース

style_blue 2018/06/08

Bootstrapの拡張版があるのか。あとで試してみよ。

リンク

WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox

WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。 CSS & JavaScript Toolbox CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxのインストール CSS & JavaScript Toolboxの使い方 CSS & JavaScript Toolboxの特徴 CSS & JavaScript Toolboxの特徴 HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。記事ページ、

style_blue 2018/04/18

HTMLも埋め込めるならスポット的に使えそうかも。あとで試してみよ。

リンク

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

style_blue 2018/04/10

あら便利。

リンク

WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ

Paste and Indent JavaScript & CSS CDN Suggestions scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。 Brackets Extension: CDN Suggestions CDN Finder jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。 CDN Finder Autoprefixer 名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。 Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。機能を有効にするには、﹁編集﹂メニューから﹁Auto prefix on save﹂にチェックをしておく必要があり

style_blue 2018/04/01

あとでためす。

リンク

上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA

CSSでブロック要素を上下中央揃え︵天地左右の中央に配置︶する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-it ems: center; } デモを別ウインドウで再生するソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11︵以下、IE 11︶でもベンダープレフィッ

style_blue 2018/03/29

そのうち必要になった時用にぶくま。

リンク

これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

style_blue 2018/03/26

何か迷った時はこれを見たらいいのかもしれない。

リンク

CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets

結果ページどのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。リンクを記述するHTMLは、要素を特定できるようにidを与えます。

style_blue 2018/01/19

ふむ、JS使わないのか。

リンク

CSS組版に対応したオンラインエディタViolaとviola-savepdfのご紹介 - はるさめスープ

先日，印刷・出版のためのオンラインエディタ﹁Viola﹂をリリースしました． viola.pub 使い方 ViolaはAdobe製エディタBracketsをベースにしたオンラインエディタです1．プレビューワにVivliostyle.jsを組み込むことで，最新のCSS組版技術を使ったレイアウトが実現できます．右側領域はプレビューになっており，上部のスイッチでモバイルプレビュー，デスクトッププレビュー，印刷プレビューに切り替えることができます．印刷プレビューは反映に若干タイムラグが生じるので，執筆時はデスクトッププレビューがおすすめです． HTMLを直接書くのは正直だるい作業ですが，Violaに備わるMarkdown トランスパイラがある程度この作業を緩和してくれます．Markdownファイルを作成すると，自動でHTMLファイルが作成され，Markdownファイルの内容が反映されます．基本的な

style_blue 2018/01/16

本当にシンプルなペラもの出すならこれでもいいのかもしれない。きれい。

リンク

CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴンレイアウトを簡単に実装できるスタイルシート

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴンレイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。六角形のアイテムの高さ・幅、列・行は自由に設定。セル、列、行のモジュラー形式。背景画像を自動入力する機能をサポート。サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+

style_blue 2017/12/13

へぇ、面白い。面白いだけだけど。

リンク

はてなブックマーク

タグ

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

cssに関するstyle_blueのブックマーク (111)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス