治安の良い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 フレームワーク) のサンプルページを作りました - ラボラジアン
概要 Bulma というCSSフレームワークを使ったサンプルページを作りました。 Bulma は、以下の特徴を持つ CSSフレームワークです。 Flexbox をフルに活用している。 シンプルなグリッドシステム 学習が容易 カスタマイズが簡単 JavaScript は含まれていない。 Flexbox をフルに活用している Flexbox というのは、今まで難しかった「要素を横に並べる」機能を簡単に実現するための新しい CSS の仕様です。（参考：CSS Flexible Box Layout Module Level 1） このサイトでも CSS Flexible Box Layout Module のサンプルページを作りました というページで取り上げています。 Bulma はこの新しい CSS の仕様をフルに活用しているフレームワークです。 シンプルなグリッドシステム Bulma には
CSSフレームワークのBulma使い始め｜よねあぷ
新しいプロダクトを作る際にnuxt.jsのデフォルトで選択できるBulmaがあったので使ってみました。 まずは公式ドキュメントを一通り読んで見る。コンセプトなどは難しいですが、流し呼んで２０分ぐらいでざっと見れるので全ページ見たほうが良いです。
A-Frame を使った基本的なデモの作成 - ゲーム開発 | MDN
Web のゲーム開発紹介 Web のゲーム開発紹介 ビデオゲームとの違い ツール Canvas CSS Full screen Gamepad IndexedDB JavaScript Pointer Lock SVG Typed Arrays Web Audio WebGL WebRTC WebSockets WebVR Web Workers XMLHttpRequest ゲーム開発テクニック asm.js の同期スクリプトを利用する 起動パフォーマンスを最適化する ピア通信チャンネルとして WebRTC を利用する Web ゲームの効率的なアニメーション Web ゲーム向けの音 2D 衝突検出 タイルとタイルマップの概要 Web上の 3D ゲームの概要 Web上の 3D ゲームの概要 基本の 3D理論の説明 A-Frame Babylon.js PlayCanvas を利用した基本的
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｜総合情報サイト
ここでは、YUI Grids CSSを使ったレイアウトのポイントを見ていこう。はじめに、Yahoo! DEVELOPER NETWORKからYahoo! User Interface Library（以下、YUI）ライブラリをダウンロードする【1】。解凍後のソースにはドキュメントやサンプルが含まれるが、実際に必要となるのは「build/reset-fonts-grids/」だけだ。このCSSファイルには見出しや段落などに適用されるデフォルトスタイルをリセットできるReset CSSと、ブラウザやOS間のフォントサイズの差異をなくすFonts CSSが同梱されている。Grids CSSでは要素の幅をem値で指定しているため、「build/grids/」を単独で利用する場合は＜body＞タグのフォントサイズを13pxに合わせておく必要がある【2】。 【1】YUI Grids CSSのページ（d
MdN Design｜総合情報サイト
最後に、カスタマイズを支援するオンラインサービスについて触れておこう。YUI Grids CSSのページからリンクされている「YUI:CSS Grid Builder」【1】では、基本的な段組みの設定をマークアップ不要で実現できる。はじめに、Toolboxにある「Body Size」から全体の幅を選択する。このとき、「Custom」を選択すると任意の幅を指定することも可能だ【2】。 【1】「YUI:CSS Grid Builder」（developer.yahoo.com/yui/grids/builder/）の画面。Toolboxを利用してカスタマイズしていく 【2】パーセントまたはピクセル値を指定して、任意のサイズを指定することもできる サイドバーが必要な場合は、「Body Columns」で表示位置やサイズを選択する。メインコンテンツ部分のカラム数は「Split Content」で指
WordPressのテーマをBlueprint CSSで作る
WordPressのテーマをいじるのなんて３年ぶりぐらいなので、当時購入したリファレンス本と今のデフォルトテーマにあるテーマ実装を見比べながらテーマ作りをしてました。 昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。 例えば、スレッド形式にできたり複雑化していたコメントも、 <?php wp_list_comments();?> だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。 本題のテーマ作り、 Blueprint CSSを使ったテーマ作り Blueprint CSSはCSSのフレームワーク（ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利！）なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。 デ
cssdepot.com - Domain Name For Sale | Dan.com
VAT overview )Value Added TaxThe Value Added Tax (VAT) is a consumption tax applied in the European Union (EU) to all goods and services. All consumers in the EU are charged VAT on the purchase of goods and services. Businesses in the EU buying from a business in the same country are also charged VAT. Businesses in the EU buying from a business in a different EU country are not charged VAT. Consum
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