Vivliostyle — 楽しく CSS 組版！CSS Typesetting 最新 Web 標準技術により、電子出版や Web 出版のための 新しい組版システムを作るオープンソース・プロジェクト
ChatGPTの活用方法（CSS編） | techlab / baigie
今やウェブ制作の現場ではChatGPTが欠かせないツールとなってきている。私自身、業務で積極的に使っており、必要不可欠な存在となった。プログラミング全般にわたるサポートはもちろんのこと、CSSコーディングにおいてもChatGPTを大いに役立てている。今回は、CSSコーディング時にChatGPTをどのように使っているかを紹介したい。 CSSコーディング時の課題 テキスト検索だけでは解決策が見つけにくい ウェブ制作を行う上で、CSSのデザイン調整は日常茶飯事かと思う。ただ、CSSにおいては「テキスト検索だけでは解決策が見つけにくい」と感じたことはないだろうか。 たとえば先日、以下のようなデザイン崩れを発見した。セルの縦列の幅を統一する必要があったが、テキストの長さによって横幅にバラつきが生じていた。 これまでは検証ツールを使ってコードを調査していたがこれでは時間がかかるし、やや面倒。また、検索
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
画像に枠線を付けるCSS - スタイルシートTipsふぁくとりー
《2016年4月2日 11:02 公開/更新》 画像に枠線を付けるCSS [イメージ,線] ウェブ上に画像を掲載する際、画像と背景との境界をハッキリさせたい場合などで、画像の周囲に枠線を付加したいと思うことがあります。そのとき、画像にぴったり接するように枠線を付加したい場合もあれば、一定の距離を空けた位置に(画像と枠線との間に空白を挟む形で)枠線を引きたい場合もあるでしょう。そのどちらの場合も、わざわざ画像を加工する必要なく、スタイルシートだけで実現できます。 例えば、下記のような川の写真の周囲に枠線を引きたい場合を例にして説明します。 元の画像： ■画像の周囲に枠線を引く3パターンの方法《目次》 画像の周囲ぴったりに枠線を引く方法 画像の周囲に一定の余白を設けて枠線を引く方法 画像の周囲に、異なる色で二重の枠線を引く方法 画像の周囲ぴったりに枠線を引く方法 画像の周囲ぴったりの位置に枠線
Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days
NHKの紅白歌合戦2018の出場歌手が発表になり、 出場歌手｜第69回NHK紅白歌合戦 この一覧でジャニーズの「Hey! Say! JUMP」の名前だけが画像だということが話題になった。 第69回NHK紅白歌合戦の出場歌手のページhttps://t.co/Z6lbjpIbMY "Hey! Say! JUMP" の文字がどうも選択できない。 HTML ソースを見た時、NHK の 「"Hey! Say! JUMP" を絶対にテキスト選択させまい！」 とする意地を感じた。 何で？ pic.twitter.com/dil9k9LVCA— nipotan (@nipotan) 2018年11月14日 しかも、ただの画像ではなくてこういうSVGが指定されている。 Web技術が使われててすごい。 なんでこういうことをやっているかというと、どうも a の字形にこだわっているためではないかという。 公式的に
FN1707007 | Sass: SCSSの基本的な書き方 | HTML5 : テクニカルノート
SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Sassの書き方の基本を公式サイトの「Sass Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。 Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。まだ環境を整えていない方は、先に「Sass: 使えるようにするには」をお読みください。 01 変数 変数に納めた値は、スタイルシート全体で使い回せます。変数の値を変えると、変数で与えたプロパティの値もすべて書き替わるのです。Sassの変数は$記号を頭につけて定めます。SassをコンパイルしたCSSからは変数は除かれます。変数を参照したプロパティの値は、CSSでは変数値に書き替えられるのです。サイト全体で使うカラーやレイアウトの尺度な
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
リンクのURLを欄外に配置して印刷する
印刷向けCSSの手法のひとつに、擬似要素とattr()関数を使ってリンクテキストの後ろにURLを挿入する、というものがあります。BootstrapやHTML5 Boilerplateなどでも取り入れられているものです。 a[href]::after { content: " (" attr(href) ")"; } 簡単かつ効果的ではありますが、挿入されるURLによってテキストが分断されてしまうので、どうしても本文が読みにくくなりがちです。URLが長い場合はとくに。 そこで、URLをページの欄外に配置し、番号を振ってリンクテキストと結び付ける、という「傍注」形式にすれば、本文が読みやすく、かつURLも必要に応じて参照できて良いのではないかと思います。 これはカウンターとフロートを利用した簡単なCSSで実現が可能です。main要素内のリンクを対象にする場合のコードのうち、必要最低限の部分
新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」
こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。 いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ（これで大体の年齢がバレる）から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。 徐々に有料の
未来のCSSを先取るHoudiniとは？それは魔法である！
こんにちわ、メルカリアッテでFront-end Developerをしている@t32kです。 メルカリではセミナー参加補助制度があり、それを利用して海外カンファレンスに参加してきました。今回は11/30 ~ 12/01、オーストラリア・メルボルンで開催されたCSS/JSConf Australia 2016に行ってきたので、そのレポートを書きたいと思います。 今回はその中でも、CSSConfでのBarak Chamo氏が講演した内容が非常に興味深かったので紹介します。 Hey presto, CSS! 今日はお話する内容は魔法についてです。どのように自分が定義したCSSをブラウザ上で利用可能にするのかという魔法です。 その前に、魔法ではないこれまでのCSSについて振り返ってみましょう。日本には『珍道具』と呼ばれるものがあります。とても素晴らしい技術ですが、ちょっとオーバーエンジニアリングに
3行で服喪する
（2016/10/17 10:14 更新: ベンダープレフィックスの必要性を追記） 先日タイ国王が崩御されたが、これを受けてタイ航空をはじめ、多くのタイ関連Webページがモノクロ化されて喪に服しており話題になっている。タイ国政府観光庁の日本向けサイトもモノクロになっていた。 タイ系企業の服喪・自粛っぷりがスゴイ！軒並みサイトがモノクロ化。タイ航空に至ってはプミポン国王が雲の上で手を振っているし…！30日間の娯楽禁止令も出された模様。愛されているなぁ。 pic.twitter.com/Q0wUXA0A5a — USHISUKE (@USHISUKE) October 14, 2016 テキストのみのサイトならばともかく、画像も多いサイトであれば、アセットをすべてグレースケール化しなければならず、改修は結構な工数がかかる... .....ように思うが、実際はCSS filterを使うことで簡単
はてなブログのaboutページがカスタマイズできるようになったのでガチガチに改造したったwwwwwww - NO TITLE
結果、aboutページがクソ重いwwwwwwwwww 暇だったら一度ご覧ください。 このブログについて - NO TITLE CSSもJSも全部aboutページに記述したので、他のページには影響ないですけどね。 サイドバーを非表示にして1カラムのLP（ランディングページ）風にしてみました。 正直、aboutページ見る人ってそんなに多くないですね。しかし、aboutページを見に来る人ってのは、きっとブログや筆者に強い興味があるということだと思います。 そんな閲覧者のために、何か記述しておくといいかもしれません。 サイドバー消して1カラムにするCSS。テーマによっては、うまくいかないと思うけど。 #container #content { width: 100%; } #content #box2 { display: none; } #content #main { width: 100%;
「ちゃんとCSSするためのスタイルガイド入門」見本出来 - in between days
約3年前に刊行した「スタイルシート スタイルブック」の続編が来週の12/13に刊行されます。 タイトルは「ちゃんとCSSするためのスタイルガイド入門 (スタイルシートスタイルブック (2))」。ちょうど見本が出ました。 オレンジ色がキレイに出て季節的にも暖かくて良かったです。 著者は、前回に引きつづき「C O U L D」の長谷川恭久さんと「cat@log」のcocoさん、に加えて今回は長谷川さんとともに「CSS Nite LP, Disk 1」で講演されるなど最近とみに大活躍中の「2xup」の上ノ郷谷太一さんが、CSSのテンプレート管理やスタイルガイドの実践についてガッツリと執筆されています。 そこに込められたマインドはぜひ上ノ郷谷さんのブログのエントリでお読みいただけます。 ちゃんとCSSするためのスタイルガイド入門 - 2xup.org これで今年のクリスマスはバッチリでしょう。 ち
CSSリファレンス - とほほのWWW入門
CSSリファレンス トップ > CSSリファレンス [ABC順] 概要 CSS入門 リンク サンプル 表記について CSS3関連規約 セレクタ * { ... } E { ... } ns|E { ... } E, F { ... } E.class E#id E F { ... } E > F { ... } E + F { ... } E ~ F { ... } E || F { ... } [attr] [ns|attr] [attr="val"] [attr~="val"] [attr|="val"] [attr^="val"] [attr$="val"] [attr*="val"] :any-link :link :visited :local-link :target :target-within :scope :hover :active :focus :focus-visi
divボックスを横に並べる | スタンダード・デザインラボ
divボックスを作るのは簡単でした。 縦に、ボックスを積み上げていくのも簡単です。ただ順番に前回のボックスを書き加えて行けばいいだけです。 では、サイドバーと本文のブロックのように横に並べるには？ フロート 箱を横に並べるために必要なのが「float」という命令文（プロパティ）です。 「float : left ;」で、左詰めの箱、 「float : right ;」で、右詰めの箱ができます。
margin－スタイルシートリファレンス
マージンは領域間のスペース、パディングは領域内のスペースです。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。 ■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {background-color: #f8dce0; margin: 10px;} p.sample2 {background-color: #f8dce0; margin: 10px; padding: 10px;} p.sample3 {background-color: #f8dce0; margin: 10px 20px;} p.sample4 {background-color: #f8dce0; margin: 10px 20
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「出会えたことに感謝したいCSSベスト3」まとめ
CSSレイアウトを学ぶ
CSSテクニック - acky.info
http://buchineko.website/chrome-devtools-cording/
