CSS Grid Layout の auto-fit を擬似的に IE11 で実現させるCSS Grid Layout を使いますとウェブの表現力があがりますね。「グリッドレイアウト」などでググってみてください...
IE11 で使えない CSS プロパティ:値(メモ)普段ほとんど IE のことは頭から落ちてしまっていますが、時々 IE ではどんなんかな?と見てびっくりすることがあります。で、IE っていつまでサポートされて...
はてなブログに CSS グリッドレイアウトを導入してみるはてなブログのテーマを display: grid を使って作ってみようと思います。ブラウザの対応状況は Can I use... Support tab...
rgba の16進数表記 #rrggbbaa はダメだって!?通常、ブラウザは Chrome か Firefox を使っていますので、IE はもとより Edge も、チェック時以外はほとんど立ち上げることもあり...
gulp で sass コンパイル環境を構築 + autoprefixer + browser-syncはてなブログのテーマの作り方(それほどでもないけど)を7回ほど書いていまして、前回、display: gr...
はてなブログテーマ開発(番外)グリッドレイアウトを使ってみる記事ページの基本構造がほぼ出来ましたので、トップページに移り、ブログタイトルなど共通部分がこのままでいけるかどうか確認します。トップページのレ...
はてなブログテーマ開発(7)フォントサイズを可変にするフォントサイズの指定っていうのは結構悩ましいですね。絶対値指定の px 、相対値指定の %, em, rem 、最近では vw も使われます。はてなブログテ...
はてなブログテーマ開発(6)Javascript を使って要素を移動するWordpress や Joomla! を使って自分でブログを立ち上げれば、そもそもの基本構造も自由に変えられるのですが、はてなブログなど...
はてなブログテーマ開発(5)ブログタイトル、記事タイトルの装飾はてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の5回目です。基本構造ができましたので、細部の装飾に入るのですが、トップペ...
はてなブログテーマ開発(4)ブログの基本構造を作るはてなブログのサンプルテーマ Boilerplate を使ってのテーマ開発の4回目です。前回で自動リロードの環境も整いましたので、実際に scssファイルに手を...
はてなブログテーマ開発(3)HTTPS環境下でBrowsersyncの自動リロードを実現はてなブログテーマ開発(1)はてなブログテーマ開発(2)今回は、HTTPS環境下の開発でも Hatena-Blo...
はてなブログテーマ開発(2)Hatena-Blog-Theme-Boilerplate を使ってはてなブログテーマ開発(1)はてなが公開しているサンプルテーマ「Hatena-Blog-Theme-Boi...
Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)別ブログ「@半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書...
iPhoneでモーダルの背景のスクロールを止める以前の記事「モーダルの背景のスクロールを止める」上の記事で、メニューなどをモーダルで出す場合に背景のスクロールを止める方法を書いたのですが、やはり、iPh...
モーダルの背景のスクロールを止めるはてなブログのテーマをレスポンシブで作る際に、あれ? なぜ? と、ちょっと手間取った CSS 2題です。どちらもモバイルのメニューなど、モーダルウィンドウに関してです。...
はてなブログ/ブレイクポイント1つのテーマのワイヤーフレーム前記事、「(はてな)ブログのブレイクポイントはひとつでいいのではないかという話」のサンプルワイヤーフレームを作ってみました。...
(はてな)ブログのブレイクポイントはひとつでいいのではないかという話Webサイトをレスポンシブデザインで作る場合、はてなブログで言えば、「レスポンシブデザインのテーマを作成する」場合は、メディアクエリ(Medi...
はてなブログ/スマホなどタッチデバイスの :hover イベント対応映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。...
はてなブログ「一覧形式」の画像を美しく並べるトップページの表示形式を「一覧形式」に変更しますと、archiveページと同様の表示になり、画像は中央から 500px四方にトリミングされたサムネイルが 120px四...
ページトップへ戻るスムーズスクロール(jQueryなし)当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近...