独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】
2017年10月24日 便利ツール 先日行ったCSS Nite in HIROSHIMA Vol.10では初めてのライブコーディングを行いながらの登壇でした。今回はそこでコーディングデモを見せるために利用したツール「Web Maker」を紹介します。 ↑私が10年以上利用している会計ソフト！ Web Makerって何？ Web MakerはHTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張です。こういったコードのプレビュー・保存はずっとCodePenを使っていましたが、Web Makerのいいところはオフラインで使えるところ！CSS Nite in HIROSHIMAの会場ではWifiが利用できなかったのと、仮にインターネット環境があったとしても遅延があると嫌だなぁということで今回はWeb Makerを試してみました。 ちなみにCod
Bootstrap 4 Beta
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six m
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴 PropellerはMaterial Designのデザインやアニメーション、Bootstrapのモバイルファーストで構築されたレスポンシブ対応のフレームワークです。 MITライセンスで、個人でも商用でも無料で利用できます。 25個のUI要素を含むレスポンシブ対応のコンポーネントのライブラリ 開発プロセスをスピードアップするテンプレート UI要素を段階的に使用する詳細なユーザーマニュアル 対応ブ
よこ並びのCSS
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
Modern CSS: architecture, future specs and build flow
at DevFest Tokyo 2016.
デザイナーが書くコードについて思うこと（1） | ツクロア - DESIGN LAB
あらためてなるほどな、と思えるいい記事でした。 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる | freshtrax | btrax スタッフブログ 自分にも重なる部分があると思って経験と雑感込みで書いてみた、毎週水曜更新のデザインラボbyツクロア、今週私のターンではデザイナーがコードを書く意味についてです。 一枚絵では通用しないアプリデザイン 某携帯電話メーカーからAndroidアプリデザインの依頼があったときの話です。 電話着信画面や起動直後の待受ロック解除のデザインを含め、使い心地や操作感から画面構成まで一緒に考えてもらえるデザイナーを探しているということでした。 担当者いわく「静止画だけではアプリデザインの良し悪しが決められないんですよ」という話から始まり、では「実際うごくデザインモックを作りながら一緒に考えましょう」という作業の流れを提案して検証からリリー
CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス
2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
Webデザインにシャドウを取り入れる時のポイントいろいろ
2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
Free Bootstrap Admin Template - AdminLTE.IO
Storybook