CSS

CSSのみでradioボタン選択時に親要素を装飾する

例えばこういう構成だった時にinputの親要素であるdivを装飾したかった。 <div> <input id="foo" type="radio"> <label for="foo">foo</label> </div> 結論からいうとこのタグ構成で掲題の件を実現する方法はわからなかった... radioボタン選択時は擬似クラス:checkedを利用することで実現可能。 ただ、セレクタの基準がradioボ…

外部css,jsを読み込む時にスキームを省略すると現在のスキームを使用してくれる

jQueryやbootstrapを使うときCDNにあるものを使うことがほとんどだと思うけど下記のように書くことが多かった。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 最近はスキームを省略するのが流行りなのね?と糞みたいな理解をしていたので今回ハマった。 スキームを省略すると現在のスキームを利用すると…

CSS学習するならHTMLのブロックレベル要素、インライン要素の区別とボックスモデルから入るべきでは

業務レベルでCSSを使うなら話は別だが、とりあえず自分でHTML+CSS使えるようになれればいい。 という場合掲題の通りHTMLのブロックレベル要素とインライン要素の違い。その後ボックスモデルについて学ぶのが近道だと思う。 自分に教える機会があったらCSSの…

CSS3 Box Shadow ジェネレータ

CSS

検索するといくつか見つかったんだけど機能がミニマムで使いやすかったのはこれ。 Box Shadow | CSS 3.0 Box Shadow

一部ブラウザでimportするCSSがNotFoundの場合404ページに適応されているCSSファイルがimportされてしまう

CSS

Evernoteに溜まっていたもの。IE8で遭遇した問題で現行ブラウザでは多分起きない。 ここに書くことでEvernoteから消す

SCSS borderを使ったアロー付き吹き出し

CSS

アローの位置はpositionで配置するボックスの外側にくっつけること用途が多いと思うがその場合absoluteの指定を負の値にするとよい。 ちなみに下のコードはscssのシンタックスなのでcssにするには多少書き換える必要ある。 scss .bubble { background: #333;…

assets.compress = trueの時にスラッシュハック使ってるところがあると落ちる

プロパティの前に/(スラッシュ)を書いて行うハックでIE6,7のみに適応させる記法。 p { /font-size: 12px; } 多分こういう奴。precompileする時にcompressがtrueだと落ちるから別のハックにするとか対応が必要今回はアスタリスクハックを代替として使うことで…

PSコントローラのボタンっぽくするCSS

CSS

○×△□ボタン表示したいな。と思ったんだけど1つ1つ画像表示するのはなんかアホらしいのでCSSでそれっぽくした。 @charset "utf-8"; .ps_button { border-radius: 20px; background: linear-gradient(#888, #333); font-size: 13px; font-weight: bold; paddin…

iPhoneアプリでよく見る通知バッヂみたいなものを置く

<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> a { background: #888; display: block; width: 30px; height: 30px; position: relative; } a span { background: #f00; border: solid 1px #fff; border-radius: 8px; color: #fff; display: block; font-size: 10px; font-weig…</meta></head></html>

zen-codingでhtml,cssのコーディングスピードが3倍以上になる

zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。 zen-coding - Project Hosting on Google Code 公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神 …

position:absoluteで親要素から相対位置で表示したいとき

CSS

css #hoge { position:relative; } #foo { position:absolute; top:0px; left:100px; } html <div id="hoge"> <div id="foo"> ababababab </div> </div> 親要素にposition:relativeを設定することにより子要素のposition:absoluteが親要素を始点とする 本来position:absoluteの始点は画面左上となるた…

CSSプロパティの指定順序

CSS

Web標準の教科書作者:益子 貴寛秀和システムAmazonWeb標準の教科書に書いてあったMozilla.orgで提案されている順序(情報古いかも)Web標準の教科書 p.403 1.表示や配置など「視覚整形モデル」に関するプロパティ 2.マージンやパディング、ボーダーなど「ボッ…