読者です 読者をやめる 読者になる 読者になる

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

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

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

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

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

CSS設計を学んで、拡張性と保守性に強いCSSを書こう[メモ] schoo 授業「CSS設計を学んで、拡張性と保守性に強いCSSを書こう!基礎〜実践導入」のメモです。 schoo.jp OOCSS, BEM, SMACSSの概要をまとめておきます。 目次 CSS設計とは CSS設計の三大メソッド …

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

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

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

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

Animate.css を使ってみる

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

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

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

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

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

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

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

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 の基本操作2(条件分岐、繰り返し、リスト)

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

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

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

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

Sass のインストールとコンパイル(Windows) 今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。 目次 Sass とは Ruby のインストール Sass のインストール 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 を試してみました。 目次 サンプル 対応ブラウザ 使用できる効果 grayscale(グレースケール) sepia(セピア) saturate(彩度) hue-rotate(色相回転) invert(階調反転) opacit…

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

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

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

CSS3 のflex(box) を使ってみる CSS3 のflex(box) を使って見たのでメモ。 目次 サンプル 対応ブラウザ flex-direction flex-wrap flex-grow order justify-content 参考リンク サンプル codepen.io

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

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

CSS3 の em と rem の違い

CSS

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

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

CSS3 で\(^o^)/オワタ AA のアニメーション \(^o^)/オワタ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。 目次 コード 参考リンク コード codepen.io 以下ちょっとした解説。

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

CSS3 で作るパックマン + アニメーション CSS3 のみでパックマンとアニメーション(口の動き+並行移動)ができたのでメモ。 目次 コード コード こいつの良いところは、 :before,:after を駆使したおかげで div タグ 1つで済んでいます。 codepen.io

CSS3 で作る Windows8 ロゴマーク

CSS

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

CSS3 で作る三角形と矢印

CSS

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

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

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

CSS セレクタの種類

CSS

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

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

CSS

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

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

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] 目次 引用元 押し潰しと伸縮(Squash and Stretch) 予備動作(Anticipation) 演出(Staging) 逐次描きと原画による設計(Straight-Ahead Action and Pose-to-Pose) 継続…