はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

CSS

gistにuploadしたcssファイルを読み込む

gistにuploadしたcssファイルを読み込む gistにアップロードしたcssファイルを読み込むためのメモ. rawgit.com というwebサービスを使うことで解決できるようです. rawgit.com gistにuploadしたcssファイルを読み込む 環境 gistにuploadしたcssファイルを…

CSS のみで縞模様、水玉模様を作る

CSS のみで縞模様、水玉模様を作る CSSのみで、縦縞・横縞、水玉模様を作れることがわかったのでメモ。 参考にしたリンクはこちらです。 honttoni.blog74.fc2.com CSS のみで縞模様、水玉模様を作る サンプル 縞模様のサンプル 水玉のサンプル 縦縞・横縞・…

CSS設計を学んで、拡張性と保守性に強いCSSを書こう[メモ]

CSS の色指定は、HSL を使っていこう

CSS の色指定は、HSL を使っていこう 色の勉強をしていると、 色の3属性として 色相 (Hue)・彩度 (Saturation)・明度 (Lightness)が出てくる。 しかし、RGBで色を指定しまう(指定する機会が多い)と、 この3属性を活かすことができない。。 hsl(); を使えば…

CSS のガイドラインまとめ[メモ]

CSS のガイドラインまとめ[メモ] CSS の各ガイドラインをまとめておきます。最強のガイドラインを作りたい方は参考にどうぞ。 ※ OOCSS, SMACSS, BEM などのCSS設計とは、また違ったガイドラインの話になると思います。 CSS のガイドラインまとめ[メモ] Googl…

Animate.css を使ってみる

Animate.css をってみる Animate.css を使ってみたのでメモ。 Animate.css は、JavaScript を使わず、CSS のみでアニメーション効果を付けることができます。 animate.css 公式 Animate.css をってみる サンプル Animate.css CDN 使い方 参考リンク サンプル…

Compass でスプライト画像を作ってみる

Compass でスプライト画像を作ってみる Compass では、画像から自動でスプライト画像を作ってくれる。 実際に試してみたのでメモ。 Compass でスプライト画像を作ってみる スプライト画像生成(自動クラス割り当て) Sass スプライト画像 CSS マジックセレク…

Compassメモ(Colorヘルパー関数、ImageDimensionヘルパー関数)

Compassメモ(Colorヘルパー関数、ImageDimensionヘルパー関数) Compass で使える、色関係を計算してくれるColorヘルパー関数と、 画像サイズを計算してくれるImageDimensionヘルパー関数についてまとめておく。 Compassメモ(Colorヘルパー関数、ImageDime…

Compass(Reset CSS、compassモジュール、CSS3モジュール)

Compassメモ(Reset CSS、compassモジュール、CSS3モジュール) Compass では、Reset CSSやベンダープリフィックスを補完してくれるような便利なmixin が使える。 Compassメモ(Reset CSS、compassモジュール、CSS3モジュール) Reset CSS compassモジュール…

Compass インストール・プロジェクト設定・コンパイル

Compass インストール・プロジェクト設定・コンパイル Compass のインストール、新規プロジェクトの作成、プロジェクトの設定、コンパイルについてのメモです。 Compass インストール・プロジェクト設定・コンパイル Compass とは インストール環境 インスト…

Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content)

Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content) Sass の醍醐味であるファイル分割(@import)、関数(@function)、継承(@extend)、@mixin、@include、@content についてまとめておきます。 Sass 応用(ファ…

Sass の基本操作2(条件分岐、繰り返し、リスト)

Sass の基本操作2(条件分岐、繰り返し、リスト) Sassでは、一般的プログラミング言語にあるような 条件分岐、繰り返し、リストを扱うことができます。 Sass の基本操作2(条件分岐、繰り返し、リスト) @if(条件分岐) Sass CSS @for(繰り返し) Sass CS…

Sassの基本操作(コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数)

Sassの基本操作(コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数) Sass の基本操作である、コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数についてのメモです。 Sassの基本操作(コメント文、ネスト、親セレク…

Sass のインストールとコンパイル(Windows)

Sass のインストールとコンパイル(Windows) 今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。 Sass のインストールとコンパイル(Windows) Sass とは Ruby のインストール Sass のインストー…

CSS3 のみでMaterial Designライクなripple effect を試してみた

CSS3 のみでMaterial Designライクなripple effect を試してみた 先日、Material Design Lite がリリースされました。 Material Design の中にripple effect という、ボタンをクリックすると波紋が拡がる効果があります。 こちら http://www.getmdl.io/compo…

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる CSS3 のfilter を試してみました。 CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる サンプル 対応ブラウザ 使用できる効果 grayscale(グレースケール) sepia(セピア) saturate(彩度…

CSS3 で球(sphere) と転がっているようなアニメーション

CSS3 で球(sphere) と転がっているようなアニメーション CSS3のみ で球(3次元)を作ってみました。 CSS3 で球(sphere) と転がっているようなアニメーション 球 + アニメーション 参考リンク 球 + アニメーション codepen.io

CSS3 のflex(box) を使ってみる

CSS3 のflex(box) を使ってみる CSS3 のflex(box) を使って見たのでメモ。 CSS3 のflex(box) を使ってみる サンプル 対応ブラウザ 配置方向 flex-direction 折り返し flex-warp 伸びる倍率 flex-grow 順番 order 水平方向の揃え方 justify-content 参考リン…

CSS3 のみでキューブ(立方体)を作る!

CSS3 のみでキューブ(立方体)を作る! CSS3 のみでキューブを作ってみました。 CSS3 のみでキューブ(立方体)を作る! キューブ アニメーション付きキューブ 参考リンク キューブ 6面をつくって、それぞれをtranslate で上、下、左、右、手前、奥に配置てし…

CSS3 の em と rem の違い

CSS

CSS3 の em と rem の違い em と rem の違いについてメモしておきます。 CSS3 の em と rem の違い em と rem の違い em とは rem とは 参考リンク

CSS3 で\(^o^)/オワタ AA のアニメーション

CSS3 で\(^o^)/オワタ AA のアニメーション \(^o^)/オワタ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。 CSS3 で\(^o^)/オワタ AA のアニメーション コード ちょっとした解説 手のアニメーション 口…

CSS3 で作るパックマン + アニメーション

CSS3 で作るパックマン + アニメーション CSS3 のみでパックマンとアニメーション(口の動き+並行移動)ができたのでメモ。 CSS3 で作るパックマン + アニメーション コード パックマンの形の作り方 口の動き 並行移動 コード こいつの良いところは、 :before…

CSS3 で作る Windows8 ロゴマーク

CSS

CSS3 で作る Windows8 ロゴマーク CSS3 のみで Windows8 のロゴを作ってみました。 CSS3 で作る Windows8 ロゴマーク コード コード 工夫した点は、 div でボックスを一つを作ってから、 box-shadow で 同じ大きさのボックスを 3つ追加し、それぞれ配置して…

CSS3 で作る三角形と矢印

CSS

CSS3 で作る三角形と矢印 CSS のみで三角形と矢印の作り方がわかったのでメモ。 CSS3 で作る三角形と矢印 三角形と矢印 参考リンク

CSS3 のみで円周上を周回運動(circular motion)するアニメーション

CSS3 のみで円周上を周回運動(circular motion)するアニメーション 円の大きさを決めたら、コンテンツの大きさが半径で決まり、 円周上の位置などが% 指定で相対的に決まるようなものを作ってみました。 CSS3 のみで円周上を周回運動(circular motion)するア…

CSS セレクタの種類

CSS

CSS セレクタの種類 忘れやすい、混乱しやすいのでセレクタ指定をメモ。 CSS セレクタの種類 複数のセレクタ a, b 子孫セレクタ a b 小セレクタ a > b 隣接セレクタ a + b class セレクタ, id セレクタ ab 例 参考リンク

UI を意識した下矢印付きのボタン

CSS

UI を意識した下矢印付きのボタン ボタンの padding の設定をどうすればいいか迷っていたが、エンジニアのためのUIデザイン // Speaker Deck が参考になるのでメモ。 UI を意識した下矢印付きのボタン 引用元 UI を意識したボタン 引用元 speakerdeck.com

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ]

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] 引用元 押し潰しと伸縮(Squash and Stretch) 予備動作(Anticipation) 演出(Staging) …