達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 徹底攻略 AWS認定 クラウドプラクティショナー教科書 第2版［CLF-C02］対応 トレノケート株式会社 高山裕司 超楕円関数への招待 楕円関数の一般化とその応用 松谷 茂樹 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思
続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox - Speee DEVELOPER BLOG
プロジェクト推進室の服部 (@yhatt) です。現在は社内の福利厚生制度である Speee Library を筆頭とした社内システムを中心に担当しています。 今回は、遡ること 2 年前に公開した、今更聞けない Bootstrap のレスポンシブ の続編として、Bootstrap 4 正式対応版 に内容をアップデートしてお届けします。 『Bootstrap 4 を使って、"柔軟な" レスポンシブ Web を構築したい』という方は、是非この記事を読んで、Bootstrap 4 のレイアウトシステムの基本をおさえていただけると幸いです。また、『Bootstrap 3 から 4 に移行したい(移行した)』という方のために、v3 と v4 の違いを交えながら解説していきたいと思います。 前回の記事については、以下をご覧ください。 tech.speee.jp 以前公開していた記事は、Bootstra
Quick Start
Getting StartedQuick StartAjaxAPIClassContextDomEventsModuleOptionsServiceThemingModulesAlertBreadcrumbBreakpointButtonColorDropdownFormGridHelpersLabelLayoutMixinsModifiersNavbarOffcanvasPagerSpaceStickyTableTabsToggleTypographyServicesAppAnimateLangMessageModalModalFormModalElementProgressResponseUtilsAddonsAutocompleteCheckComboboxDatepickerEditableMagicQueryNumberSelectorSliderUploadValidateVi
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回
カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ - Minimal Green
HTML/CSSを書くとき、「あれ、これ何だったっけ？」ってことがありますよね。私はしょっちゅうありますｗ そういうとき、ちらっとチートシート（カンペ）を見て効率よく作業を進められるよう、便利なチートシートをまとめました。 似たような記事は既にたくさんありますが、リンク切れになっていたりするので、自分用に便利なチートシートをまとめ直してみます。 HTML HTMLクィックリファレンス HTML5 タグ★チートシート（PDF版／画像版） CSS スタイルシートリファレンス CSS3プロパティ＆ブラウザ対応一覧 CSS初期値一覧なチートシート CSS Flexboxチートシート CSS3 Media Queriesの書き方 HTML HTMLクィックリファレンス www.htmq.com 老舗ですね。HTML他CSSの早見表、HTML/CSSの基本があります。とりあえず困ったときはココ！ HT
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。 今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。 今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。 ウェブサイト開発を爆速に！人気オススメCSSフレームワーク厳選まとめ【2018年保存版】 Bulma Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。 URL: https://bulma.io/ CDN:
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
Flexbox Patterns
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
CSS着せ替えテンプレート企画
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
SlickMap CSS: A Visual Sitemapping Tool for Web Developers | Astuteo
Slickmap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It's suitable for most web sites – accommodating up to four levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. Features and Benefits Eliminates the need for additional softwarePlan s
DIST.38 「CSSな夜」で発表した内容です。 https://dist.connpass.com/event/266728/ Twitter https://twitter.com/tonkotsuboy_com
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。 しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト（例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの）が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。 にも関わらずf
ブラウザ対応が簡単に！「modernizr.js」の機能と利用方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。 今回はブラウザ対応で便利な「modernizr.js」を紹介します。 modernizr.jsとは modernizr.jsはJavaScriptのライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 それらを利用して、ブラウザごとの処理を記載することが可能となります。ということで、さっそく使ってみましょう。 ダウンロード 下記よりダウンロードが可能です。 Modernizr http://modernizr.com/ modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用
トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。 制作時間の節約にもなるCSSライブラリとツールは、より手軽に利用できるだけでなく、Flexbox や CSS Grid といったまだ完全に理解していないCSSプロパティを習得するのにも最適といえるでしょう。 【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度 コンテンツ目次 1. CSS Flexbox ツール＆ライブラリ 2. CSS Grid ツール＆ライブラリ 3. CSSコンポーネント 4. CSS アニメーションツール＆ライブラリ 5. CSSリファレンス、ガイド＆
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ
注釈： 「CSSでピクセルをいじるのは確かに難しかった！ 今じゃHTMLで非セマンティックなクラス名とかインラインCSSとかを使うのがクールで、JavaScriptでCSSスタイルを書いたりもできるって！」 「『ファミリー・ガイ』の『CSS』GIF（訳注：米アニメ『ファミリー・ガイ』のキャラクターを使った、CSSを扱う厄介さを示唆するGIF画像）をここに挿入」 「ハハッ！」 CSSは不思議なことに、Web開発者が学ぶ中で非常に易しいとも難しいとも考えられている言語です。確かに、CSSは簡単に始められます。特定の要素に適用するスタイルの属性と値を定義して、それから……いえ、差し当たって必要な作業はほぼそれだけです。しかし、比較的大規模なプロジェクト向けに意義のある形でCSSを組むとなると、作業は複雑に入り組んできます。あるページのある要素のスタイルを指定しようとCSSのどの行を変更しただけで
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
レスポンシブ対応！縦に半分割しているWebサイトの作り方
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
Webサイトのヘッダー/フッター用アイデア満載！コピペできるHTML/CSSスニペット48個まとめ
100 Tiny CSS Tools & Apps for Web Designers – Speckyboy
ウェブ開発を爆速に！人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
アクセシビリティを意識した CSS の書き方 - Frasco
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
3つだけ覚える「flexbox」の使い方 - Qiita
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
横に水平線のあるテキスト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
CSS Grid・Flexboxの 最近の進化とミライ
Centering in CSS: A Complete Guide | CSS-Tricks
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
flexboxの旧仕様、改定仕様、現行仕様の一覧 « NAVER Engineers' Blog
超便利！確認しておきたい最新CSSツール、リソースガイド 2017年度
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
知っておくと便利！CSSの小技・テクニックのまとめ -CSS Protips | コリス
恐竜に教える現代のCSS – Part 1 | POSTD
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ