日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述！ - 移転→hapilaki.net
ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字（「-」「 」「1」「.」）の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。 見本 まずは見本を見せてよ。 OK。 こんな感じ。 これが4文字の組み合わせでできるの？ この会話例は2文字の組み合わせなんだぜ。 半角ハイフン（-）と半角スペース（ ）だけ。 まぁ、ステキ💕 解説：見本の記述例を図解 上の会話例を入力するときは次のように記述した。（下の記述例はキャプチャー画像） 分かりやすいように、拡大して補足説明を入れるよ。 各行ごとの説明。 改行だけ 半角ハイフン（-）3つで改行 改行だけ 半角ハイフンの後に半角スペース（ ）で改行 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容 4行目と同じ 5行目と同じ 5行目と同じ 特徴：
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s
[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック
メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。 In CSS, set line-height first, padding second 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 何が問題か？ 何が起きているか？ 解決方法はありますか？ 何が問題か？ ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。 このメニューにおける問題に気付かないわけにはいきませんでした。
![[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/83c4f532cae57691e0dfee1fb4e0ee860a4bd504/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016091401.png)
「グラデーション」を1クリックでCSSとして出力できる【Blend】の使い心地がバツグン！
最近背景として大々的にグラデーションを使っているWebサイトを多く目にするようになってきました。以前SeleQtがご紹介した「2016年8月のWebデザイントレンドを振り返ろう！3つの最新トレンドの特徴とは？ 」でも、「グラデーションの復活」がトレンドとの1つに入っています。 さてそんなグラデーション表現なんですが、直観的に色を組み合わせてワンクリックでCSSで吐き出せたら便利だと思いませんか？ そんなことができてしまうのがこの【Blend】です。 使い方は説明するまでもないほどシンプル。 グラデーションに使いたい2色を選んで「Let’s Blend!」ボタンをクリックするだけ！ 色の選び方は直観的に色相から選ぶもよし、カラーコードを入力して色を指定するもよし、です。 そして「Let’s Blend!」ボタンをクリックして、CSSを吐き出した画面がこちらです。 CSSを吐き出すには画面右↑
【ブログカスタマイズ】押した事が感覚的にわかるボタンをヨメレバ・カエレバに取り入れました。コピペするだけ！ - えむしとえむふじんがあらわれた
押した事が感覚的にわかるので、思わずポチりたくなる！！！ かもしれないボタン付きのヨメレバ・カエレバ・トマレバをつくりました。 *2016年10月9日 修正しました。一部余計な文字列や記述の不完全な部分がありましたので、使用されている方はコードの置き換えをお願いします。 10月14日 jtbの色を修正しました。ボタンのサイズ、文字サイズを修正しました。 10月15日 1024pxのメディアクエリを追加。yahooがどうしても崩れてしまうのでボタンが縦並びになる解像度を1024pxに変更しました。 なお、CSSをきちんと勉強した事の無い人間が書くCSSなので、β版のようなものとして御考え下さい。 改造や手直しした物を掲載される時は、言及してもらえると嬉しいです。 はじめに 使えるボタンの種類 PC版 スマホ版 スマホ版2 コピペする場所 CSS スマホでもアイテムが縦並び表示にならないバージ
CSSのクラス名を決めるときに使うリストをつくりました
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitH
スタイルシート（CSS）の基本的な書き方【初心者向け】
CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。 スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関する
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
CSSで組版したCSSの技術書「CSSシークレット」、オライリーとビブリオスタイルが発刊、日本語対応サンプルもウェブで公開 