読者です 読者をやめる 読者になる 読者になる

外部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から消す

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標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト作者: 益子貴寛出版社/メーカー: 秀和システム発売日: 2005/07/01メディア: 単行本購入: 17人 クリック: 532回この商品を含むブログ (105件) を見るWeb標準の教科書に書いてあったMozilla.orgで提案され…