htmlのimgタグを使わずに画像を表示させる方法とhtml,slim,css,scssでの記述方法 - Qiita
今日はどうしてimgタグで表示させられる画像をcssで表示させる必要があるのかということから、cssで表示させる方法までをお話しします。 どうしてcssで表示させるの？ htmlでimgタグを使って画像を表示させるにはaltタグで代替テキストを書くことが必須であったりと文字数を食ってしまいます。文字数が多くなると、htmlのデータが大きくなってしまって、それが積み重なると読み込むのに時間がかかってブラウザにページが表示されるのが遅くなってしまいます。 なので、文書としてなくても困らない画像は、cssで表示させるのが良さそうです。全てをcssで表示させない理由としては、代替テキストなどからwebページの内容を理解する人もいるからです。 それでは、本題であるcssでの表示方法をご紹介していきます。 htmlに画像を表示させたい場所をdivを使って記述する 今回の例は、webサイトのメインの画像
フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法 - Qiita
今回は、基本のformをtableタグを使わずに、きっちり整列させる方法です。 コード量が増えるので、わたしはtableタグがあんまり好きじゃないんです(>o<) でもtableタグを使わないと、きちんとinputとlabelが揃わない状態から抜け出せなくてすごく困っていました。なんとか中央寄せで、それぞれの要素の縦のラインが綺麗に揃う方法を見つけたのでご紹介します。 使うタグは「ul,liタグ」！ ulタグとliタグを使えば、form要素を簡単に綺麗に並べることができます。 まずは基本となるhtmlを書いて、フォームを表示させます。 ポイントは「ul,liタグ」を使うことです！ <form> <ul> <li class="name"> <label for="name">Name<label> <input id="name" type="text" name="name" place
gulp-autoprefixerでPromise is not definedのエラーが出る - Qiita
this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined at LazyResult.async (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:152:31) at LazyResult.then (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:75:21) at DestroyableTransform._transform (/Users/xxx/app/node_modules/gulp-autoprefixer/index.js:24:6) at DestroyableTransform.Transform._re
React Tutorial Example (PostCSS) - Qiita
React の Style Sheets は コンポーネントに設定すると効果的です。 また Style Sheets も Hot Module Replacement が利用できるので便利です。 前回 のアプリケーションに PostCSS を追加してみましょう。 Learning Style Sheets の Hot Module Replacement を利用する。 CSS Modules で ローカルスコープ を利用する。 PostCSS で SCSS や Sass の機能を利用する。 Environment node: v4.4.5 npm: v3.9.6 Comment Box Form 完成される Source Code のファイルリストです。 $ tree -a -I node_modules . ├── .babelrc ├── app │ ├── actions │
PostCSSとstylelintの環境構築 - Qiita
と捉えてもらえば良いかと思います。 具体的に何ができるかというと 仕様策定中の次世代CSSの先取り ベンダープレフィックスの自動付与 独自拡張機能の追加 ファイルの結合・圧縮 などが挙げられます。 Sassとの比較 なぜSassからPostCSSへ移行する流れがあるかというと トランスパイル時間が短い 仕様策定中の次世代CSSを先取りできる 独自機能を追加できる などが挙げられます。 上記がメリットとならない場合は無理に導入する必要はないと思います。 例えば、すでにSassを導入していてスムーズに運用できているのであれば移行する必要はあまりなさそうです。 新規プロジェクトの時に導入するか検討すると良いかと思います。 PostCSSを導入する PostCSSはいろんなことができますが、今回は以下を導入する手順をまとめます。 仕様策定中の次世代CSSの先取り ベンダープレフィックスの自動付与
PostCSS Utility Libraryが物凄く使える - Qiita
最近、PostCSSを使い始めていますが、PostCSS Utility Libraryが物凄く使えるので紹介します。 PostCSSを使うなら必ず入れておきたいパッケージです。 PostCSS Utility Libraryとは 公式サイト パッケージサイト 公式によると postcss-utilities is a PostCSS plugin that have the most used mixins, shortcuts and helpers to use as @util rules in yours stylesheets. google翻訳すると 「postcss-utilitiesはあなたのスタイルシートで@utilルールとして使うために最もよく使われるmixins、ショートカット、ヘルパーを持つPostCSSプラグインです。」 って翻訳されました。そういうことです。
PostCSSの基本的なプラグインについて - Qiita
自分のサイトのSCSSをPostCSSに書き換えたので、そのときに調べたことをメモしておく。プラグインパックであるcssnextはなにがどう変換されているか把握できなくなりそうなので使わずに、個別でインストールしていく方針。どんなサイトでも基本的に使うだろうな、というものだけメモしておく。 ここで書いたもので不足を感じたときにReadmeに書かれているものなりPostCSS.partsにあるプラグインを試せばいいとおもう。ただ最後にもすこし触れるけど、なんでも便利そうだからと入れて使うのはやめたほうがいいとおもう。 SCSSからの移行であればprecssがよさそう。ただ自分が使ったときはcssnanoと併用したときに、importしたファイルをうまくminifyできていませんでした。 プラグイン 記法 postcss-import @importしたファイルを展開する。最初によみこまないと
Sublime Text 3 で構文エラーチェックする設定のまとめ - Qiita
Macの場合を例に説明していきます。 事前にPackage Controlをインストールしてプラグインの管理が行えるようにしておきましょう。 cmd + shift + P でCommand Paletteが表示されるので、[Install Package] からプラグインのインストールに進んでください。 基本プラグインをインストール SublimeLinter まず上記のプラグインをPackage Controlからインストールしましょう。 構文エラーを自動的にチェックするためのプラグインです。 エラーのある箇所に印がついて、エラー理由を指摘してくれます。 このプラグインと別にそれぞれの言語に対応したプラグインをインストールしていきます。 SCSSの構文チェック SublimeLinter-contrib-scss-lint 上記プラグインをPackege Controlからインストール
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレなcssを突っ込んでみて挙動を確認して頂ければ幸い。 また、下記のリファレンスが総括的で解りやすい。ご一読あれ。 Sass 3.2 オレオレリファレンス ヤバいを連
SPAじゃなくてもWebpack導入（ファイル監視&自動リロード + レガシーブラウザ対応 + JS最適化 + ES2015(ES6) + SCSS + ESLint） - Qiita
Septeni Originalの大久保です。 世間ではSPAが流行ってるかと思います。 ただHTMLのレンダリングはサーバー側で行うケースは以前多いのではないでしょうか？ 現在自分が携わってる新規プロダクトでモダンなフロントエンドの技術（WebapackやES2015など）を使いつつ、HTMLレンダリングはサーバーに委ねるようなアーキテクチャ（Multi Page Application）の調査を行ったので、そこでの知識を備忘録的にまとめたいと思います。 今回作成したコードはGithubにあげているので、興味あればご参照ください。 Github URL：https://github.com/yoppe/webpack-es2015-base-for-play #やりたいこと バックとフロントのGitリポジトリを分けずに作る。 ⇒ リリース時などにバックとフロントを別々にリリースしたりデプ
WindowsでSass環境を構築 - Qiita
Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。 サーバサイドのことをよく知らない人用。 scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。 インストールするものは3つ。 Ruby Sass Nginx（ApacheでもOK） Ruby をインストール Ruby-1.9 から RubyGems（後述）が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード http://rubyinstaller.org/downloads/ インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。 コマンドプロンプト起動 Window
sass-globbingでSassファイルをお手軽管理 - Qiita
皆さんは、1ヶ月間用コンタクトレンズを2週間用だと勘違いして使ってた経験ありませんか？ぼくは、あります(´Д⊂ヽ さて、今日はSassのファイル構成について考えてみたいと思います。Sassを使えば@importを使ってお手軽にファイルをモジュール管理できますね。ということで、私が作ったCSSフレームワークMapleでも下記のようなファイル構成で管理しています。 t32k/maple ├── css │ ├── maple.css │ └── sass │ ├── maple.scss │ ├── _core.scss │ ├── _modules.scss │ ├── core │ │ ├── _base.scss │ │ ├── _helper.scss │ │ ├── _layout.scss │ │ ├── _reset.scss │ │ └── _settings.scss │ ├
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Autoprefixer RailsでCSSのベンダープレフィックスをsprocketsに任せよう - Qiita
PostCSSで簡単なプラグインを作ってみよう - Qiita
webpack2でpostcssとextract-text-webpack-pluginのビルド周りの変更点 - Qiita
vue.jsでpugとpostcssつかう - Qiita
https://qiita.com/debiru/items/4771e270902de7c5cc6e
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法 - Qiita
gulp で jade と SCSS と CoffeeScript 動かす為のメモ - Qiita
https://qiita.com/debiru/items/28d54b5c1e295d880cd3