サイズ可変で縦横比固定のブロック要素をcssのみで実現する方法
Htmlでサイズ可変で縦横比固定のブロック要素を実現する方法を模索していたところ、 ちょっと独特な方法ですが可能なようです。 こちらのページに書かれていました。 日本語訳がちょっとおかしなことになっているので転載。 以下は幅によって高さが決まるタイプのコード。 html <div class="aspectwrapper"> <div class="content"> 内容… </div> </div> css .aspectwrapper{ position: relative; } .aspectwrapper:after{//beforeでもよい padding-top: 75%;//幅に対する高さの割合 display: block; content: ""; } .aspectwrapper > .content{ position: absolute; top: 0px; le
Town-0 Phase-5 PV アイデア
Town-o Phase-5 PV アイデア まず、こういうふうなモノにヒラサワの絵がはめ込まれている。 こいつは、金属で出来ていて、歩くことができるのだ。。。。。。 で、イントロで「インヤー」とういうところで、画面フレーム の下からスックと立ちあがり、フレームインするのだ。。。。 で、絵の中に「モニターフレーム」と書いてあるのは、CGじゃ なくて、見ている人のほんとのモニターのことであるのだ。。 この、どあたまで、とにかくびっくりさせるのだ。。。。。。 その後、街中を歩いたり、きょろきょろしたりしながら歌う とんでもないヤツなのだ。下からのあおりカメラアングルで 流れる雲をバックに歩いたりもするヤツなのだ。。。。。。 バカコーラスが「ラーラ ラッラーラ」というところは、大勢 のガイコツがやるのであった。。。。。。。。。。。。。。。 その後、あるときには、大勢のガイコツを引き連れて街中を
grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita
$ npm install grunt grunt-contrib-jade grunt-contrib-stylus \ > grunt-contrib-connect grunt-este-watch module.exports = (grunt) -> grunt.initConfig connect: server: options: # LiveReloadに必要なスクリプトを</body>直前に挿入してくれる # 多分grunt-contrib-connect ver.0.4.0から # HTML5などでbodyタグを書いていないと挿入してくれないみたい…… livereload: true esteWatch: options: # 監視対象のディレクトリ # ['./**']などとするとサブディレクトリを含むようになる dirs: ['.'] livereload: en
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
CENDOL168 | Platform Game Online Transaksi Paling Aman Terpercaya
Dalam dunia perjudian online, mencari platform yang terpercaya dan aman merupakan prioritas bagi para pemain. Cendol168 muncul sebagai jawaban bagi Anda yang mendambakan kedua hal tersebut. Situs ini tidak hanya menawarkan berbagai permainan slot yang seru dan menarik, tetapi juga menyediakan fasilitas sportsbook yang lengkap, menjadikannya destinasi utama bagi para penggemar taruhan olahraga dan
ピクセルグリッド的ブックガイド2012 | 第1回 外村編
ピクセルグリッド的ブックガイド2012 第1回 外村編 これから下半期に向けて、夏休みやお盆休みなどで、まとまった時間を持てる人もいるかもしれません。そんなときに、目を通しておくといいオススメ書籍を、ピクセルグリッドのエンジニアに挙げてもらいました。第1回目は外村です。 マークアップエンジニアに勧める3冊 HTMLやCSSの実装を手がけるマークアップエンジニアにオススメな本を、3冊挙げてください。 「入門 HTML5」 Mark Pilgrim 著、矢倉 眞隆 監訳、水原 文 訳（オライリージャパン）（原書：HTML5: Up and Running） HTML5の概要を知りたいという方にはイチ押しの書籍です。 著者はDIVE INTO HTML5というサイトでHTML5関係の情報を多く発信しているMark Pilgrim氏です。同サイトの情報を元に書かれている本で、HTML5とは何か、ど
さくらVPSのバーチャルドメインでメール送受信
VPSでメールの送受信をしたい。本格的な配信サービス等を運営するわけではなく、レンサバの延長線レベルで運用できればいい。 というライトなメールサーバの構築です。 メールサーバは、ApacheやMySQLとは違い、スパムの踏み台にされる可能性があったり、せっかく設定してもGmail等で迷惑メール扱いされるなど、他のサーバよりも難易度が高くて躊躇しがち。 でも独自ドメインでWEBを公開するならメアドも同じものが使いたい。ここに一つVPSの壁があると思います。さくらVPSなら最初からメールサーバ(MTA)のpostfixが起動してるので、ドメイン設定とメール転送設定のみで最低限の構築ができました。 VPSのメールサーバから直接メールを送受信するとなると、最低でもSSL+dovecot等のPOP3サーバ、SMTP Authの導入が必要になりますが、今回は受信したメールはスグに転送+送信は別のSMT
GitHub - t32k/stylestats: StyleStats is a library to collect CSS statistics.
$ stylestats path/to/stylesheet.css StyleStats! ┌─────────────────────────────────┬──────────────────────────┐ │ Published │ June 14, 2017 10:35 AM │ ├─────────────────────────────────┼──────────────────────────┤ │ Paths │ path/to/stylesheet.css │ ├─────────────────────────────────┼──────────────────────────┤ │ Style Sheets │ 1 │ ├─────────────────────────────────┼──────────────────────────┤ │ Sty
Sass/Less/Stylusでの変数入力を補助する「List stylesheet variables」(Sublime Text Package) | Program | position: absolute;
このエントリーは、膨大にあるSublime Textのパッケージ群の中で、執筆に参加した『Web制作者のためのSublime Textの教科書』の中で紹介していないパッケージのList stylesheet variablesを取り上げます。 監修のこもりさんが、Web制作者のためのSublime Textの教科書のFacebookページにて書籍に掲載していないパッケージを続々紹介しているのですが、そこでList stylesheet variablesが取り上げられました。 "インストールしてプリプロセッサのファイルを開いて、「Ctrl＋Option＋Lキー（Windowsの方は、Ctrl＋Alt＋Lキー）」を押すとあら不思議、定義済みの変数がわらわらとリストされます。もちろん絞り込みもできるので、選択してEnterキーを押せばキャレットの位置に挿入されます。" ということで、パッケージ
trash: grunt.jsを使うまで
2013年2月6日水曜日 grunt.jsを使うまで Antタスクみたいに、jsやSassをビルドしたりDocを生成してくれたりするgrunt.jsを使うまでの準備。 試した環境 node.js v0.8.18 ruby 1.9.3p374 grunt.js 0.3.17 Mac SnowLeopard node.jsのインストール 公式にインストーラーがあったので入れる。 Rubyのインストール Sassを使いたいので(Macに入ってるRubyが古いので)Rubyを入れる。 $brew install ruby (略) $gem install sass $gem install compass grunt.jsなどのインストール プロジェクトのフォルダ内に、package.jsonをつくり、いっしょに使いたいプラグインを登録しておく。 rubyのGemfileとbundle in
Gruntを使ったプロジェクトの自動化。もうCodeKitもMAMPもいらないよ。 | 5 LOG
Grunt を使ったwebsite製作用のデフォルトセットを一式作ってみた ソースコード一式 準備 下記がインストールされていない場合は、要インストール node.js grunt-cli node.js のインストール node.jsをインストール nodebrewを使って管理する grunt-cli のインストール grunt-cli はgrunt を実行するためだけのパッケージなので、「-g」でグローバルにインストールしておく $ npm install -g grunt-cli Grunt のインストール Grunt を実行するには下記が必要 package.json （プロジェクトの情報を記述した設定ファイル） Grunt.js Gruntプラグイン （sassのコンパイルなど、Gruntで実行するタスク） Gruntfile.js （Gruntで実行するタスクを記述したファイル
Initializr - HTML5 project - template
Wix is a top-ranked website builder, but its value for money is a mixed bag. Wix offers a range of pricing plans from $17 to $159 per month, billed annually. The prices increased in May 2024, with the entry-level plan… Read More »Wix Pricing 2024: How To Get The Best Deal Wix reigns supreme as our top website builder for 2024, outshining other platforms. With its unparalleled features, an expansiv
BEMる
BEMってみたけど光と闇が同居してる感じだった。 BEMとはBEMとはググると分かる。MindBEMdingという感じで、Block/Element/Modifierという概念にのっとってHTMLのクラス名を命名しようっていうやつ。 どう書くかこんな感じのクラス名をつける。 block block__element block__element--modifier block--modifier block--modifier__element ややこCとしか言いようがないが、慣れるとそうでもないし、OOCSSのクラス付けまくり方式に比べるとマシに思えてくる。 普通に書く<header id="header" role="banner"> <h1>Title</h1> <nav id="nav" role="navigation"> <ul> <li>Menu1</li> <li>Menu
CSS Architecture | en.ja Article
CreditThis article is translated with permission of Philip Walton. You can find original article at CSS Architecture.本記事はPhilip Walton氏の了承を得て翻訳された記事です。 原文はCSS Architectureにて掲載されています。CSSアーキテクチャ 多くのWebデベロッパとって、良いCSSとはビジュアルモックアップをコードで完全に再現できることを意味する。tableタグを使わず、また出来る限り画像を少なくすることに誇りを持つ。もしあなたが本当に優れたデベロッパであれば、メディアクエリ、Transitions、Transformといった最新で偉大な技術をも使うことだろう。 これらすべてが良いCSSデベロッパに必要なすべてであることは確かではあるものの、ス
大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX
いい感じのスライド、作るのむずいので、大体いい感じになるKeynoteテンプレート作った。ここからダウンロードできる。 Azusa - 大体いい感じになるKeynoteテンプレート解説サンプルも兼ねた解説スライド作った。 Introducing Azusa // Speaker Deckだいたいスライドに書いたけど要約すると下記のようなことを考えた。 スライド作るの難しい色とか難しいかっこよくしたいAzusaっていうのを作ったAzusaは、大体いい感じになるKeynoteテンプレートです Azusaの特徴大体いい感じになるカラースキーム大体いい感じになるフォント大体いい感じになるマスタースライド色カラースキーム考えた 白っぽい色（白っぽいクリーム色とか白っぽいねずみ色） 黒っぽい色（赤っぽい黒とか青っぽい黒とかそういうの） 緑とか青とかピンクとかのアクセントカラー1色 原色すぎないほうがイ
【音楽】くるりが私に教えてくれたこと。それは年号。 - きまやのきまま屋
くるりと私 くるりというバンド、知っていますか？ くるり on WEB｜PROFILE メジャーデビューシングル、「東京」が有名ですね。 くるり - 東京 - YouTube 私もこのシングルでくるりを知って、10代の終わりがけにめっちゃハマっておりました。アルバムずっと聴いていました。 さよならストレンジャー アーティスト: くるり 出版社/メーカー: ビクターエンタテインメント 発売日: 2005/09/22 メディア: CD 購入: 1人 クリック: 12回 この商品を含むブログ (129件) を見る で、私がくるりの中で一番好きなアルバムがこちら『図鑑』。 図鑑 アーティスト: くるり,岸田繁,佐藤征史,KONIYANG,ジム・オルーク,根岸孝旨,ナカコウ 出版社/メーカー: ビクターエンタテインメント 発売日: 2000/01/21 メディア: CD 購入: 3人 クリック: 3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://toybox-design.net/?p=664
en.ja Article
GitHub - ksmandersen/compass-normalize: A compass plugin for using normalize.css