Angular Materialのflexboxを使ったLayoutを解説してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 最近は実案件でAngularJSを使う機会が増えてきました。 そこで導入しているのがAngular Materialという、Googleが提供するAngularJS用のUIコンポーネントです。 Angular MaterialのLayoutコンポーネントはflexboxを使用したものになっています。 Angularと書きましたが、AngularJSらしいことは今回出てきません……。 どのようにLayoutにflexboxが使用されているのか、詳しく解説していきたいと思います。 今回のDEMOはこちらからご覧になれます。 flexboxについて まず、Angular MaterialのLayoutコンポーネントを使用する前に、簡単にflexboxのレイアウトについて解説したいと思います。 flexboxレイアウトは、以下のように親要素のflexコンテナと子要素のfle
stylelintを使い始めたので設定例など (2016年9月更新) - yuw27b’s blog
※2016年9月13日更新：stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。 stylelintって？ 名前のとおりCSSのlintツールです。 設定したルールから外れた書き方をすると警告してくれます。 CSSを書くにあたって、インデントにタブを使うのかスペースを使うのか、スペースなら何文字分にするのか、「{」の前にスペースを空けるかどうか、といった「書き方」を統一する目的で使います。バリデーション（CSSの標準仕様に準拠しているかどうかの判定）は行いません。 公式サイト：http://stylelint.io/ 日本語情報だとこちらが分かりやすかったです：CSSのLintをstylelintにする - Qiita stylelintの特徴 ルールのカスタマイズができる ルールセットの使い分けも簡単 CSSのlintツール自体は他
React で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利 - BattleProgrammerShibata
React 公式ドキュメントからもリンクされていました。 github.com すてきなドヤ顔。 Usage はかなりシンプルなのでそれ読めばすぐ使えるよ！ …では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。 // 例示なので説明に不要部分は削除してます import ClassNames from 'classnames'; export default class ModalWindow extends React.Component { render() { const classNameModalWindow = ClassNames({ 'md-modal-window': true, 'l-flex ': true, 'is-opacity-zero': this.state.isOpacity
【保存版】クオリティアップ！gulp.jsで文法チェック！ - 学校では教えてくれないWeb制作の現場
2015-05-28 【保存版】クオリティアップ！gulp.jsで文法チェック！ Web制作の現場 前回の記事に引き続き、gulp.jsです。 今回は、制作のクオリティチェックに欠かせない、文法チェックのお話。 いままで、HTML-lintや、W3Cのサービスにコピペして、 確認して、間違いがあると修正して、また確認、、、 なんて面倒くさいことをしておりましたが！ このgulp.jsを使えばイチコロです。 簡単ですので、ぜひご活用くださいませ。 前回ご紹介した内容（gulpfile.js）に、下記を追加するだけでOKです。 HTML文法チェック まずは、プラグインをインストール。 $ npm install --save-dev gulp-htmlhint そして、gulpfile.jsに下記を追記します。 /////////////////////////////////////////
3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
【CSS】スマートフォンサイトでよく使われてる3本ラインのメニューアイコンをCSSだけで作ってみる | バシャログ。
7年後もかわらずおっさんですけど ishida です。 iPhone5s、iPhone5c 発表されましたねぇ〜。 自分は、iPhone4 なのでこの機会に買い替えをする予定ですが、 嫁さんに許可をもらわないと。。。 さてさて、スマートフォンサイトで最近は、googleさんなどスライドメニューUIが増えてきましたね。 スライドメニューのアイコンには、 横に3本のラインが入ったヤツがよく使われてます。 今回は、スライドメニューのアイコンをCSSで作ってみるです。 完成版 以下がサンプルになります。 アイコンだけおくと寂しいけど。。 ポイント 正方形のブロックと、ボーダー2つを組み合わせです。 a要素に背景色と position: relative; を設定、 ボーダー2つは、:before、:after擬似要素で表現し postion: absolute; で位置を調整しています。 以上、C
スマホ表示のときテーブルに横スクロールバーを表示するCSS
方法1のやり方で、横にはみだしていたテーブルもなめらかにスクロールして見られるようになりました。 でもちょっと問題なのは、スクロールしているときしかスクロールバーが表示されないところ。これだと、スクロールできるかどうかがパッと見でわからないというデメリットがあります。 スマホでも常にスクロールバーが見えている状態にするため、以下のCSSでスクロールバーの表示をカスタマイズしてみました。 詳しい説明は以下のページにおまかせするとして、::-webkit-scrollbar を使ってスクロールバーの見た目を設定すると、スマホでも常にスクロールバーを表示しておくことができます。 【参考】WebKitを使ってスクロールバーをカスタマイズ | CSSPRO 実際にグレーの濃淡でシンプルなデザインのスクロールバー用CSSを作ってみました。 .scroll-box { overflow-x: auto;
【Compass】Sassでレスポンシブ対応！簡単で便利な記述法！ | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.04.08 こんにちわ！ 山尾です！ 今日は前回に引き続きSassのご紹介をしたいと思います！ 前回は環境構築とざくっとした概要を説明させていただいたので今回はSassで出来る便利な記述法を紹介します！ 目次 Compass メディアクエリ ファイルの統合 Compassを使う Compassを使う一番の利点としてはベンダープレフィックスを簡単に書ける事ですね。 他にもCSSスプライトを自動で生成してくれるみたいです。 Compassインストールしインポートさせれば .test{ @include box-shadow( 0 0 10px #ccc); @include border-radius(4px, 4px); @include inline-block; } コンパイル後↓ .test { -webkit-box-shadow: 0 0 10px #cccccc; -m
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
【CSS】table-cellを使って要素を均等に配置する方法 - ディレイマニア
目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 ←今回はこれ 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 要素を均等に配置したい場合に使うと便利 まず、table-cellの基本的な書き方はこちらの記事をご覧ください。⇒【CSS】table-cell
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
【CSS】float指定がある要素の親要素に高さをもたせる方法。
divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。 親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、 floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。 具体的には下記の通り。 <div class="container"> .container:after { content: " "; display: block; visibility: hidden; height: 0; clear: both; } contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで 親要素の高さも子要素に応じて変動してくれるようになる。
【CSS】vertical-alignが効かない時はこれを試す | unitopi - ユニトピ -
こんにちは。 CSSって簡単なようで深いですよね。 今回は、vertical-alignがうまく効かないときのTipsです。 vertical-alignって？ よくtext-alignは見ますよね。テキストを左、右、中央揃えどこにするか指定するCSSプロパティの一つです。 vertical-alignは縦位置の指定です。 vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 引用：vertical-align－スタイルシートリファレンス divで要素を真ん中にしたいけど効かないよ！ 実はvertical-alignはブロック要素では適用できません。 インライン要素とテーブルセルだけなんです。 なのでtableとかでは凄く簡単に中央に来てくれます。 もちろんdivなどでできないわけではありません。displayプロパティで明示
angular.js ng-repeatの組み込み変数 | Webエンジニアブログ
ng-repeatのビルトイン変数を利用してtableの背景色を一行おきに設定 AngularJSのng-repeatディレクティブで利用できる変数 ng-repeatの組み込み(ビルトイン)変数は利用頻度が高いプロパティ。 AngularJSの公式サイトでは以下のURL(英語)で使い方を確認できる。 https://docs.angularjs.org/api/ng/directive/ngRepeat 本記事では、 $index $middle $even $odd を利用してtableタブ内における繰り返し処理で、ng-repeatの組み込み変数を使ったサンプルを紹介する。 サンプルコード headタグ内では、foundation(cssフレームワーク)とangularjs本体を読み込み、サンプルとなるModelデータを定義している。 <html ng-app="webEnginee
ChromeのDeveloper ToolsでSassのデバッグ - Qiita
ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。 CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。 環境 OSX 10.9.5 Google Chrome 42 Sass 3.4.13 Compass 1.0.3 sourcemapの生成 Sassのコンパイル時にsourcemapを生成させる。 config.rbにsourcemap = trueを追加するだけ。 sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。 環境設定によって振り分けて、以下のように編集する。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
The Blog | Welcome to Adobe Blog
tableのヘッダーの固定方法を比較検討してみた - ねこじゃらしの日常
「nth-child」と「nth-of-type」の使い方と違い
Sass(SCSS)のmixin, extendなどまとめ - Qiita
