はてなブログのコードブロックのcssスタイルを変更する はてなブログのコードブロックのスタイル変更時のメモ。 色などのスタイル変更 言語名の追加 を中心にまとめる。 はてなブログの場合、意外に行数表示はCSSだけではタグ構造上無理でJSが必要になりそう…

引用(blockquote)のCSSスタイルメモ 技術記事くらいにしか登場しないblockquoteタグのスタイルメモ． See the Pen blockquotesStyle by Cartman (@Cartman0) on CodePen. 引用(blockquote)のCSSスタイルメモ 左端にborderがつくタイプ Qiita Markdown github…

はてなブログテーマ作成のメモ はてな公式のBoilerPlateテーマを例にした作成方法を見たところ， npmをバリバリ使った開発者向けに作られていたのでメモ． 環境 Windows10 Atom 1.34.0 npm 6.4.1 はてなブログテーマ作成のメモ 環境 はてなブログのHTML構成 …

IEでtableのborderが表示されないバグ 「表示されない」と書いたが、厳密には、「border-collapse:collapseを指定したtableの中に、borderとpositon:relativeを指定した子要素(th, td) に背景色をつけると、boderの一部が背景色で上書きされる」というバグと…

link要素でpreloadを使って非同期にファイルを読み込む link要素でpreloadを使って非同期にファイルを読み込むメモ． link要素でpreloadを使って非同期にファイルを読み込む preloadとは 現在の対応状況 resource hint 使用例 読み込み後，即時実行(Async Lo…

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

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

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

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

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

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

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

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

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

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

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

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

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

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（彩度…

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

CSS3 flex(box) メモ CSS3 のflex(box) を使ってみたのでメモ。 flexを使うことで，floatで悩んでいた水平方向の揃え，垂直方向の揃え，wrap後の揃え方などを調整でき，フレキシブルなレイアウトが可能になる． CSS3 flex(box) メモ サンプル（codepen） 対…

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

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

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

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

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

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

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