1. /
  2. Web

Web

[フロントエンド] ParcelでSASSからNodeパッケージをインポートする

最近話題のモジュールバンドラであるParcelを使ってみてます。
そこで.scssファイルから、Nodeモジュールのパッケージに入ってる.scssファイルを読み込もうとしたんですが、そのままではnode_modulesディレクトリにパスが通ってないらしく、読み込めませんでした。
それについての対処法。

// example.scss
@import "compass-mixins/lib/compass";

続きを読む

[SASS] ネストしたセレクタで親セレクタに対して要素を限定したい場合

例えば.btn1ってクラスのa要素またはbutton用のスタイルを作るとして、
普段は白文字、:disabledもしくはhref属性がない場合ならグレー文字ってしたいと思うじゃないですか。
そしたら以下みたいなコード書くと思います。

.btn1 {
  color: white;
  
  &:disabled, &:not(button):not([href]) {
    color: gray;
  }
}

でもここで上記を継承するチェックボックス用の.btn1-checkboxが現れると、
aでもbuttonでもない場合は:not([href])が効いてしまい、常にグレーになってしまうので、どうするか・・・

.btn1 {
  color: white;
  
  &:disabled, &:not(button):not([href]) {
    color: gray;
  }
}

// チェックボックスで使いたいけど、このままじゃ常にグレーになっちゃう
.btn1-checkbox {
  @extend .btn1;
}

続きを読む

[CSS] アンカーリンクとは。。。

何年も前からよく『アンカーリンク』って言葉を耳にしますけど、それって『頭痛が痛い』って言ってるのと同じなんじゃ…っていつも思います。
しかもそのほとんどが『ページ内リンク』を指している言葉であったりして、なんでそうなった／(^o^)＼的な感じがしてモヤモヤします。
続きを読む

[フロントエンド] スマホサイトの表示幅調整

現在の仕事はソシャゲ開発をやってるわけで、当然時代の流れに沿ってスマホ対応もあります。
開発してるのはWebアプリなのでiPhoneとAndroidでソース統一できるんですけど、Androidは意外と曲者がいたりしてやっかいです。
先日Android用のFlashプラグインも配布が終ってしまってFlash再生不可な機種もでてきましたし。
Androidも3.0からSVGに対応したようなので、早くSVGの普及が進んで欲しいところです。

今回はGALAXY Nexusなどの機種で下記のようにおなじみのviewportを指定しているにも関わらず、画面いっぱいに表示されない件について。

<meta name="viewport" content="width=320, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

続きを読む

[WordPress] 『Twenty Ten』で作る簡単オリジナルテーマ

あけましておめでとうございました？
ああ、もう4月も近いですね。今年初めての記事です。
ということで、サイトのテーマをリニューアルして心機一転していきます。
今回のリニューアルではWordPressにデフォルトで含まれる『Twenty Ten』を少しいじっただけのお手軽自作テーマを使用しました。
そのレシピをざっくり紹介。

続きを読む

[Web] とある会社の四月馬鹿

今年も色々なサイトでエイプリルフールネタが披露されていました。
とりわけ仕事と関係のあるさくらインターネットのサイトが、あまりにも大逸れたような状態になっていたのでびっくらこいた。

続きを読む