SimpleIsm

舞台裏は乱雑に、見えるところはシンプルに。

タグ: CSS

CSS Lintの警告文を訳してみた

Posted on by Yoruaki

CSS Lintの日本語訳。普通に書いたCSSだと問答無用で警告文が出る。やってられるか！

でもどういった理由でエラーが出るのかは知っておいて損はないと思うので、いくつか訳してみた。多分結構多くの人が遭遇する警告だと思う。何せ自分が遭遇した警告だしね！

原文 日本語訳
Disallow universal selector
The universal selector (*) is known to be slow.
ユニバーサルセレクタは禁止です
ユニバーサルセレクタ (*) は遅くなることが知られています。
Headings should only be defined once
Heading (h1, h2, h3, h4, h5, h6) has already been defined.
見出しは一度だけ定義されるべきです
見出し (h1, h2, h3, h4, h5, h6)はすでに定義されています。
Disallow qualified headings
Heading (h1, h2, h3, h4, h5, h6) should not be qualified.
見出しの修飾は禁止です
見出し (h1, h2, h3, h4, h5, h6) は修飾されるべきではありません。
Require fallback colors
Fallback color (hex or RGB) should precede RGBA color.
代替色の指定が必要です
RGBA指定の前に、代替の色指定 (16進数またはRGB) をした方が良いです。
Disallow IDs in selectors
Don’t use IDs in selectors.
セレクタにIDは禁止です
セレクタにIDを使用しないでください。
Disallow overqualified elements
Element is overqualified, just use #test without element name.
必要以上の要素名付加は禁止です
必要以上に要素名があります。要素名は付けず、IDのみもしくはCLASS名のみで使用してください。
ex.)div#hoge => #hoge
Disallow !important
Use of !important
!importantは禁止です
!importantが使用されています。
Parsing Errors
Expected RBRACE at line 123, col 456
パースエラー
Require use of known properties
Unknown property ‘hoge’.
きちんと定義されたプロパティが必要です
‘hoge’ というプロパティは定義されていません。

HTMLとCSSでQRコード

Posted on by Yoruaki

演算処理した結果の何かを出したいと思って思いつきで作ってみた。

Sassで四角形(QRコード)の辺を変えると、その中のパターンも可変するというもの。

HTMLはQRコード(二次元バーコード)作成【無料】でQRコード作って、白黒のパターンに合わせてクラス名を割り振った。29×29パターンあるので、HTMLは割愛。

@charset "utf-8";

//辺の長さを指定
$edge: 145px;

@mixin square {
    height: $edge;
    width: $edge;
}

//29x29パターンに分割したあと、小数点以下切り捨て
@mixin dot {
    height: floor($edge / 29);
    width: floor($edge / 29);
}

.qrcode {
    @include square;
    div {
        overflow: hidden;
    }
}

span {
    @include dot;
    display: block;
    float: left;
}

.b {
    background-color: #000;
}

.w {
    background-color: #FFF;
}

以下出力結果

.qrcode {
  height: 145px;
  width: 145px;
}

.qrcode div {
  overflow: hidden;
}

span {
  height: 5px;
  width: 5px;
  display: block;
  float: left;
}

.b {
  background-color: #000;
}

.w {
  background-color: #FFF;
}

View Demo: QR Code in HTML and CSS

CSS書くよりHTMLでそれぞれ黒か白かを指定するのが面倒くさかった…。メリットは拡大縮小しても滲んだり潰れたりしないことかな。ならSVG使えって話か…。

でもPHPの勉強がてらURL入力してできたQRコード(画像)の白黒部分判別してHTMLとCSSを吐き出すツールを作ってみようかな。うん、そのうちやろう。

参考サイト
QRコード(二次元バーコード)作成【無料】
sassの抑えておきたいfunctionの使い方 « NAVER Engineers’ Blog

CSS3(transition)で円の中心を基準に拡大する丸いボタンをSassで書いてみる

Posted on by Yoruaki

意外とやり方載ってなかったりするよね。で、円の直径を決め打ちすると全部の直径を打ち直さなきゃいけないから、直径を変えたら柔軟に対応してくれるCSSをSassで書いてみた。と言うかSassが書きたかっただけ。でもSassって便利よねー。

HTMLはまんまパクった。

<div id="box">
    <div class="boxin">
        <a href="#" id="circle1">CSS</a>
    </div>
    <div class="boxin">
        <a href="#" id="circle2">CSS3</a>
    </div>
    <div class="boxin">
        <a href="#" id="circle3">jQuery</a>
    </div>
    <div class="boxin">
        <a href="#" id="circle4">Tutorial</a>
    </div>
    <div class="boxin">
        <a href="#" id="circle5">Collect</a>
    </div>
</div>

続いてSass。$circle-diameterの値を変えてやると、円の直径と、基準点が変わる。

@charset "utf-8";

$circle-diameter: 150px; //円の直径
$horizon-margin: 10px;   //円の横マージン
$font-size: 16px;        //フォントサイズ

//円の数によって横幅を変える
@mixin box-width($box-num) {
    width: ($circle-diameter + ($horizon-margin * 2)) * $box-num;
}

@mixin default-circle($value) {
    width: $circle-diameter * $value;
    height: $circle-diameter * $value;
    line-height: $circle-diameter * $value;
}

#box {
    @include box-width(5);
    text-align: center;
    margin: ($circle-diameter / 2) auto;
}

.boxin {
    @include default-circle(1);
    float: left;
    margin: 0 $horizon-margin;
    position: relative;
}

a {
    position: absolute;
    display: block;
    border-radius: 50%;
    text-decoration: none;
    color: #FFF;
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
            transition: 0.5s;
    @include default-circle(1);
    font-size: $font-size * 2;
    top: 0;
    left: 0;
    z-index: 10;
    &:hover {
        @include default-circle(2);
        font-size: $font-size * 3;
        top: $circle-diameter - ($circle-diameter * 1.5);
        left: $circle-diameter - ($circle-diameter * 1.5);
        z-index: 100;
    }
}

#circle1 {
    background-color: rgba(73, 10, 61, 0.7);
}

#circle2 {
    background-color: rgba(189, 21, 80, 0.7);
}

#circle3 {
    background-color: rgba(233, 127, 2, 0.7);
}

#circle4 {
    background-color: rgba(214, 174, 0, 0.7);
}

#circle5 {
    background-color: rgba(138, 155, 15, 0.7);
}

View Demo: Relative Center Circle Transition

expandedでの出力結果は以下。

#box {
  width: 850px;
  text-align: center;
  margin: 75px auto;
}

.boxin {
  width: 150px;
  height: 150px;
  line-height: 150px;
  float: left;
  margin: 0 10px;
  position: relative;
}

a {
  position: absolute;
  display: block;
  border-radius: 50%;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 32px;
  top: 0;
  left: 0;
  z-index: 10;
}
a:hover {
  width: 300px;
  height: 300px;
  line-height: 300px;
  font-size: 48px;
  top: -75px;
  left: -75px;
  z-index: 100;
}

#circle1 {
  background-color: rgba(73, 10, 61, 0.7);
}

#circle2 {
  background-color: rgba(189, 21, 80, 0.7);
}

#circle3 {
  background-color: rgba(233, 127, 2, 0.7);
}

#circle4 {
  background-color: rgba(214, 174, 0, 0.7);
}

#circle5 {
  background-color: rgba(138, 155, 15, 0.7);
}

やーSass楽しいなぁ。