S.F. Page

Programming,Music,etc...

CSS

Cascading Style Sheetの記法はなぜあのような形になったのか。(2)

続き。 blog.sfpgmr.net 前回CSSがほぼ今の形になったのは1995/11/1版だと言ったが、違っていた。1995/11/1はassignmentの属性と値を結びつける記号が'='だったのが':'に変わっただけだった。 下の一覧はCSS Level 1が勧告となるまでの版を一覧である。ほぼ…

Cascading Style Sheetの記法はなぜあのような形になったのか。

CSSの記法ってなぜこんな風になったのだろうとちょっと疑問に思った。なんとなくJSON風でだけどそうではない独特の記法だ。セレクタにマッチするスタイルの内容をブレス({})中に記述するという記法はどのようにして生み出されたのか。 h1 { font-size:10pt; …

ブログの見た目を作る

ちょっとずつではあるが、新しいブログシステムの見た目を作りはじめている。正直このあたり苦手なので試行錯誤している。ようやくモバイル用のハンバーガーメニューみたいなものができたところだ。 レスポンシブ・デザインなんていうのは今ではごく当たり前…

CSS-ボックス内のテキストの縦方向のセンタリングが思いのほか難しい

CSSのテキストの縦方向のセンタリングは簡単にできそうで難しい。 <html lang="ja"> <head> <title>縦方向のセンタリング</title> <meta charset="UTF-8" /> <style> body { height:250px; } .va { margin:auto; display:block; width:200px; height:200px; text-align:center; vertical-align:middle; word-break: normal; backg</meta></head></html>…

レスポンシブUIフレームワークを作りはじめる - 勉強しながら実装しつつ、軽量フレームワークを研究しようかなと

軽量なレスポンシブUIフレームワークをいちから作ろうかなと手を動かし始めた。もうタスクランナー周りの設定でおなか一杯になっている。何も出来ていないのに趣味としては十分な満足度が得られるという、おかしなことになっている。レポジトリの状態は以下…

cssnext(postCSS)を使ってみることにする。

自分でブログシステムを作ろうとしているが、UIをどうしようかと考えていた。 Bootstrapを使おうと思っていたけど、もれなくjqueryがついてくるのでそれがちょっと無駄に思えてくる。Bootstrapもナビゲーションあたりしか使っていないし、DOM操作は最近はd3.…

LESSでCSSを一つにまとめる

VS2013 Express For Web上でLESS 昨日から引き続き、sass(scss)もしくはLESSでライブラリで参照しているcssファイルを1つに統合し、main.cssファイルとして読み込むようにしてみた。 でsassかLESSかどちらを使うか迷ったが、Bootstrapが絡むしnode.js環境も…

ポケミク・シーケンサーを作る(4)

今週もあまり成果はない。Undo/Redoをコントロールするオブジェクトを作ったり、レイアウトをデスクトップ専用にするためにCSSをいじったりしていた。画面上の変化ではタブでトラックを切り換えるようにできるようにしたくらいか。 Bootstrapのデフォルトテ…

Twenty Thirteenテーマを導入した。

そういうわけで Twenty Thirteenテーマの導入に踏み切った。まずは開発・テスト環境を整備しなおした。XAMPPとWebMatrixをインストールし直した。さらに本番サイトからDBとWordpressのバックアップを取り、開発環境にコピーした。そしてWordpressをXAMPPで動…

node.jsをいじり始める(5) - HTML5・CSS・jQueryを理解するうえで私がポイントと思ったところとか

Tumblrのポストを表示するためのページ作りを進めている。CSS・JQuery中心に実装を進めていて、node.jsどころではなくなっている。モダンなWeb技術に関する知識のない私が、Wordpressのテーマかスタマイズを始めてから今まで勉強してきた中でポイントだ!と…

Tumblr のブログテーマをカスタマイズする

<section> <h3>変更の動機</h3> <p> TumblrのBlog画面をほぼデフォルトのまま放置していたのだが、変えることにした。というのも動画を連続ポストした結果、無限スクロールだとスクロールが非常に遅くまた 1ページのリソースが増大しそうな気がしたので。そもそも動画を連続ポスト</p></section>…

CSS - float属性

きょうはCSSのfloat属性を勉強しつついじっていた。フローレイアウトで意図したとおりにレイアウトできるようになりたいので。 レイアウト 勉強のために下記のようにdivでブロックを作り、フローレイアウトで配置してみる。普通に考えるとdiv0はそのままdiv1…

CSS3 Media Queries

IE BlogのCSS3 Media Queriesの記事を読んだ。 画面の大きさ・向き・幅・解像度などでCSSを切り替えるというもの。 デモページをChrome・Firefox Beta・Operaで見てみたら普通に対応していた。 Beginning Html5 and Css3: Next Generation Web Standards