治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita
はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのスタイルを書くことができるようになりました。 今日に至るまで、過去の自分が書いたCSSへの後悔の念で眠れない日々や、原因のよくわからない表示崩れの悪夢にうなされる夜もありました。1 これからCSSを学ぶ人、CSSにはあまり詳しくないけどたまに書くよという人にそんな思いをして欲しくない。できたらCSSのことを好きになって欲しい。 そんな思いで自分がスタイルを書く時・レビューをする時に気をつけていることを（自戒も込めて）まとめまてみました。 🤔 良いスタイルってなんだろう？ スタイルを書く時に大切だと考えていることは3点あります。 開発効率 デザイン再現性 パフォーマンス 開発効率 色々な記事や本でも引
Bulma Doc ( Layout ) を読んだ - nlog
Layout - Bulma を読んだ。 Bulma はサイトの幅を決めるコンテナー（.container）を持つ。どこでも使えるクラスだが、主に以下のクラスの子要素とし指定される。 .navbar .hero .section .footer コンテナーのサイズ $desktop、$widescreen、$fullhd とあり、それぞれブレークポイントから左右の余白（デフォルトでは 32px * 2 ）を引いた数値になっている。これらの数値は 12px または 16px で割り切れる数値になっている。 左にロゴ、右にナビゲーションのように、水平方向の配置を指定するためにレベルというのも用意されている。親要素に .level、子要素に .level-left と .level-right（右両側配置をしたいときに使う。なくてもいい）、孫要素に .level-item といった構成で使う。レ
Bulma (CSS フレームワーク) のサンプルページを作りました - ラボラジアン
Web Bulma (CSS フレームワーク) のサンプルページを作りました※当サイトにはプロモーションが含まれています。 概要Bulma というCSSフレームワークを使ったサンプルページを作りました。 Bulma は、以下の特徴を持つ CSSフレームワークです。 Flexbox をフルに活用している。シンプルなグリッドシステム学習が容易カスタマイズが簡単JavaScript は含まれていない。 Flexbox をフルに活用しているFlexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。（参考：CSS Flexible Box Layout Module Level 1） このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。 Bulma はこ
CSSフレームワークのBulma使い始め｜よねあぷ
新しいプロダクトを作る際にnuxt.jsのデフォルトで選択できるBulmaがあったので使ってみました。 まずは公式ドキュメントを一通り読んで見る。コンセプトなどは難しいですが、流し呼んで２０分ぐらいでざっと見れるので全ページ見たほうが良いです。
A-Frame を使った基本的なデモの作成 - ゲーム開発 | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ���View in English @���Always switch to English WebXR と WebGL の API を使えば、ウェブブラウザー内で仮想現実（VR）や拡張現実（AR）体験を制作し始められます。 これをより簡単にするために、Mozilla の A-Frame フレームワークは、ウェブ開発者が使い慣れたやり方で 3D VR 空間を作れるマークアップ言語を提供しており、ゲーム開発のコーディング原則に準拠しています。 これにより、JavaScript や GLSL を大量に書くことなく、プロトタイプやデモを迅速かつ効果的に作れます。 この記事では、A-Frame のセットアップやり方と、それを使って簡単なデモを作るやり方
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
WordPressのテーマをBlueprint CSSで作る
WordPressのテーマをいじるのなんて３年ぶりぐらいなので、当時購入したリファレンス本と今のデフォルトテーマにあるテーマ実装を見比べながらテーマ作りをしてました。 昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。 例えば、スレッド形式にできたり複雑化していたコメントも、 <?php wp_list_comments();?>だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。 本題のテーマ作り、 Blueprint CSSを使ったテーマ作りBlueprint CSSはCSSのフレームワーク（ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利！）なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。 デフォ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YingYing Zhang | Product Designer
Free Bulma templates
Flexbox Froggy
flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita
HTML Reference
usercontent.css/広告カット - Mozilla Firefox まとめサイト
Firefox まとめサイト
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
Sell, Buy and Park Domains with Afternic