MJML - The Responsive Email Framework
Write less, save time and code more efficientlyMJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax. See templates « I love MJML, it has really good solid components and a fantastic documentation » Jason Rodriguez, Product Manager These days, we email everywhere - standing up, sitting down, sleepi
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI
ECSSの概要と考え方のまとめ - Qiita
ECSSというOOCSSとはほとんど反対のアプローチをするCSSの構成案があります。製品によってデザインが大きく異なるWebサイトに向いているのかなと個人的には考えています。あるいは、うまく共通化をすることができれば大規模なWebサイトにも適応可能ではないかなと期待しています。 Enduring CSS 案件で使いたいなと思ったのですが、あまり広く知られているものでもないですし、検索しても該当する記事はまだまだ少なかったりします。 公式サイトを読むのが一番いいのですが、ボリュームがあり、さらに英語であることを考えるとそれも難しい。というわけで、ECSSの概要と考え方を日本語で比較的短い文章でまとめることにしました。 このドキュメントの目的はECSSを詳しく調べたくなったり、実際に使い始めるためのきっかけになることです。 以下の文章の最新版はGitHubにアップしています。 ECSS End
フリーで使えるHTML/CSSテーマ100選
Noupeは3月15日(ドイツ時間)、「Best of 2016: 100 Free HTML/CSS Themes - noupe」において、フリーで利用できるHTML/CSSデータを提供している100のサイトを紹介した。Webサイトの制作を高速化するには、こうした既存のデータをどこまでうまく使い回せるかがカギとなる。多くの素材を知っており、そこから適切な素材を選定できるかどうかがエンジニアリングとしてのスキルの1つとなっている。 紹介されているサイトは次のとおり。 New Age Creative Story Dimension Editorial Forty Genius – Minimal HTML Theme Ultimate Multi-Purpose Bootstrap Site Template GerduKreatip - Agency Portfolio Theme 6
KOSAERU（コサエル）
<div id="modal"> <div class="modal-content"> <div class="copy"> <div class="close_link"><a href="#"><i class="fa fa-times"></i>;&nbsp;CLOSE</a></div> <?php get_search_form(); ?> <div class="modal_menu"><h3>- CATEGORY -</h3><?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?></div> </div> </div> <div class="overlay"></div> </div>
CSSだけで作る超軽量ポップアップモーダルウインドウ（スマホ対応） - Qiita
スペースの限られたスマホサイトなどで注釈や解説を付けたい場合に重宝します LightboxのようなUIを目指しました 背景の半透明グレーのところをクリックするとウインドウが閉じます ポップアップの中の要素が枠の高さを超える場合、縦スクロールが出るので、長い内容でも見せることができます デモ jsbin html <div class="popupModal1"> <input type="radio" name="modalPop" id="pop11" /> <label for="pop11">クリックでポップアップ</label> <input type="radio" name="modalPop" id="pop12" /> <label for="pop12">CLOSE</label> <input type="radio" name="modalPop" id="pop13
【CSS3】jQuery無しで動く［Pure CSS Modal Popup］の実装方法
投稿日：2015年11月15日 更新日：2015年11月15日 CSS, Design 2449文字：約5分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/4368 通常「モーダル・ポップアップ」はjQueryを利用して実装するケースが多いかと思いますが、今回紹介する［Pure CSS Modal Popup］は、その名のとおりスタイルシートの設定だけで実装できる便利なテクニックです。 まずは下記URLよりサンプルをご覧ください。 Pure CSS Modal Popup：実装サンプル HTMLの記述実際にサンプルサイトで使っているHTMLコードです。 <div class="modal"> <input id="modal-trigger" type="checkbox"> <label for="modal-trigger">Launch
モーダルウィンドウを実装してみよう | SONICMOOV LAB
※2015.1.26 誤字脱字、説明を修正いたしました。 最近モーダルウィンドウ（ポップアップウィンドウ？）の実装ばっかりやっているココエです。頭の中が常にモーダルです困りました。 なので、モーダルウィンドウの実装について書いていきたいと思います。 モーダルウィンドウなんてライブラリ使えばいいじゃん？ ごもっともです！！！！！！ ごもっともなのですが、ライブラリを使っていると･･･ 容量がやたら重かったり･･･ PCとスマホ両方の対応がされていなかったり･･･ ライブラリをカスタマイズしなければいけない機能がでてきたけど、使い方はさておき、修正なんて出来ないよ･･･ なんてことが・・・ありませんか？ ・・・あれ？・・ない？（汗 じゃあ、じゃあ･･･ モーダルウィンドウの実装が、自前でできちゃったりすると、ちょっと便利だよね？ なんて思ったことはどうでしょう？ きっと、そんなニーズがあると信
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
JS、CSS、画像ファイルといった静的ファイルにリビジョンを付与してブラウザのキャッシュ問題を回避する - Gulp で作る Web フロントエンド開発環境 #9 | PSYENCE:MEDIA
JS、CSS、画像ファイルといった静的ファイルにリビジョンを付与してブラウザのキャッシュ問題を回避する - Gulp で作る Web フロントエンド開発環境 #9 wakamsha 2016.01.18 130 5185255 【前置き】ブラウザのキャッシュ問題について Web ページ高速化の手法のひとつに『キャッシュサーバーやブラウザキャッシュを活用する』というのがあります。予めキャッシュ済みの静的ファイル ( 画像、CSS、JS など ) をキャッシュサーバーから高速で返したり、Web ブラウザ自身でキャッシュしておいたものを即座に表示・実行するというもので、サーバー負荷の軽減やスピードアップによる快適なユーザー体験の提供といった効果が見込めます。これだけ聞くと良いことずくめのように思えますが、時にはそれが足かせになることもあります。 Web サイトリリース後に CSS や JS に何
MUI - Material Design CSS Framework
The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── email │ ├── mui-email-i
SkyBlue CSS Framework
About This is not Bootstrap killer, I just think Bootstrap is way too bloated. SkyBlue is a minimal framework that is meant to be starting point for my projects. Uses grid system with 12 columns. I made it for my own needs. Feel free to use it and abuse it, in both free and commercial products. SkyBlue is available on bower: bower install skyblue Framework is made in SASS and source is available o
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
CSSで印刷レイアウトをコントロール
<article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h1>３ページ目</h1> </section> </article> 改ページ ここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。 まず、<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。 ついでにprint.cssというスタイルシートを読み込みます。 <link media="print" rel="stylesheet" href="print.css"> <article> <section class="print_page"> <h1>１ページ目</h1> </section> <sectio
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
Fuel UX
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Minimal Pure CSS Responsive Modal Box - modalcss | CSS Script
Primer
CSS拡張メタ言語「Sass」の概要と導入手順