Foundation5でレスポンシブをオフにする方法(sassのみ）

コメントをどうぞ

自分用にメモ。

CSSフレームワーク Foundation5 でレスポンシブの機能をオフにする方法です。
_settings.scss を開きます。

以下の箇所を探します。

// $screen: "only screen";

// $landscape: "#{$screen} and (orientation: landscape)";
// $portrait: "#{$screen} and (orientation: portrait)";

// $small-up: $screen;
// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

以下に修正

$screen: "only screen";

$small-up: $screen;
$small-only: $screen;

$medium-up: $screen;
$medium-only: $screen;

$large-up: $screen;
$large-only: $screen;

$xlarge-up:$screen;
$xlarge-only: $screen;

$xxlarge-up: $screen;
$xxlarge-only: $screen;

要はメディアクエリを全部同じ値にしてしまう強引な方法です。
無駄なソースは出力されてしまいますが、PC版だけで取り急ぎ作成したい場合にどうぞ。

サト研の風景

5年ぐらい運営してきた勉強会「サト研(仮)」の運営方法や手順のメモを公開

コメントをどうぞ

福岡で一番ゆるい？勉強会のサト研(仮)がもうすぐ40回目になるのでなんとなく。

だいぶ前に、サイト研究会(仮)の主催・運営や勉強会開催のおおまかな流れをFacebookグループ内でメモっておいたので、それをざっくりメモレベルでブログにも公開しておきます。

“サト研方式”と呼んでくれる人もおりますが、実際は「アンカンファレンス方式」です。
これを軸に勉強会を開催してきた経験から、皆で小技やアレンジを入れてきた感じです。

「これから勉強会を開いてみたい！」
「毎回準備が大変！もっと楽に運営したい！」

って人に役に立てれば幸いです。 続きを読む →

p3

アップルケア未加入者がiPhone5sをトイレに落としてAppleStoreに持ち込んで27,800円で即日機種交換してもらってきたレポート

コメントをどうぞ

新年あけましておめでとうございます。
本年もどうぞよろしくお願いします。

旧年の大晦日に風邪なのかノロウイルスかインフルエンザかわかりませんが、
とにかく体調を崩して寝込んでしまい、布団の中で年越しという38年の人生で最悪の年越しを迎えました。
元旦も寝たきりで過ごし、2日でようやく快復。

今年は並ぶのを断念した、Apple初売りのLucky Bug。
マリノアの初売りにでもLucky Bugの3万6000円分ぐらいは買いに行くかと起き上がり、病み上がりのふらついた身体でトイレへ。

そこで悲劇が起きました。

続きを読む →

baserCM2.1.2から 3.0.0へ移行を試してみたよ

コメントをどうぞ

basercms3.png
この記事はbaserCMSアドベントカレンダー2013/12/21の記事です。

ついについについに出ました、baserCMS3!
baserCMS３正式版リリース！ | baser CMS

それで、今まで作ってきたbaserCMS2系(2.1.2)の移行を試してみました。

やった内容は公式開発ブログにも書かれてる以下の記事を参考にしました。

結論としては、この記事見ながら1時間ぐらいで移行できました！

わーい( ´ ▽ ` )ﾉ

で終わると記事にならないので、途中詰まった点とか調べたりしたことをフィードバックできればと思います。

続きを読む →

Youtube、Facebookのブラウザのサポート対象外である案内のスクリーンショット

コメントをどうぞ

IE対応で古いバージョンを切り捨ててるメジャーなサイトの、ブラウザのアップデート、ダウンロードを促すページがどうなっているのか気になってアクセスしてみた。

Windows7 / IE7でアクセスしてます。

Facebook

sc_facebook

Youtube

sc_youtube

Yutubeのブラウザサポートの判断ページ
http://www.youtube.com/supported_browsers

ちなみにTwitterはモバイル版にリダイレクトさせてました。

遊びで作ったストップモーション #ymmf_ycam

コメントをどうぞ

山口情報芸術センター［YCAM］10周年記念祭 にブースの準備中や出展中に遊びで作ったストップモーション。

すり抜ける缶コーヒー
すり抜ける缶コーヒー

おや、トマさんが…？！
トマさん巨大化→帽子化→増殖

朝のホテルで関根勤さんのみんなの「こんなことできません」：ピタゴラスイッチ – キッズワールド NHK Eテレ-こどもポータル を見たのがきっかけ。

デジカメ一個でできるのでお手軽メイク！

追加）
ブースに遊びに来てくれた男の子に協力してもらって作成。
ナスくんが…？！
Youtube版はこちら

この男の子、ナストマくん全話をブースで読み切ってくれてて、本当に嬉しかった。
ナストマくんのぬいぐるみをかなり欲しがってたけど、残念ながらあげられなかったのでせめて思い出にと協力依頼して、出演してもらいました。
（親御さんから掲載許可もいただきました）

メモ：macターミナルでファイル名に拡張子を強制的に付けるコマンド

コメントをどうぞ

リネームソフトで失敗したので調べたメモ。

以下のコマンドで同階層の全てのファイルに、強制的に末尾に拡張子(.jpg)をつけています。

for F in *; do mv "$F" "${F%%}.jpg"; done

▼ファイル判別：ファイル名先頭に”test”の文字列があるファイルだけにしたい場合

for F in test*; do mv "$F" "${F%%}.jpg"; done

▼ファイル判別：ファイル拡張子が”JPEG”のファイルだけを対象にしたい場合

for F in *.JPEG; do mv "$F" "${F%%}.jpg"; done

参考サイト)

Future Sync Vol.3で福岡のコミュニティのパネルディスカッションさせてもらいました（猛省

2件の返信

もし福岡のコミュニティがなかったら？　〜 とある福岡ITコミュニティの話｜12109教室｜セッション｜分野を超え、未来について語り合うトークイベント にパネルディスカッションを出させてもらいました。

続きを読む →

camera.js で1周ループ表示後に、最初のスライドでスライド再生を停止するサンプル

5件の返信

最近お気に入りの高機能jQueryスライドショーのプラグイン Camera でのメモ。

camera.js にはループのON/OFFのオプションはない模様。
クライアントから要望があったので、callback使って自分で書いてみた。

以下の書き方で、スライドを1周表示させた後、最初の一枚で停止させることができます。

<div id='camera'>
  <div data-src="slide1.png" data-link="page1.html"></div>
  <div data-src="slide2.png" data-link="page2.html"></div>
  <div data-src="slide3.png" data-link="page3.html"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){

  var EndTransitionNum = 0;
  var slideNum = 0;
  var h = 260; //スライドショーの高さ
  var t = $('#camera'); //スライドショー対象

  // camera 
  t.camera({
    fx: 'simpleFade', //topLeftBottomRight , simpleFade ,blindCurtainTopRight
    height: h + 'px',
    easing: 'easeInOutCubic',
    navigation: false,
    navigationHover: true,
    pagination: false,
    playPause: false,
    pauseOnClick: false,
    hover: true,
    thumbnails: false,
    time: 3000,
    transPeriod: 1000,
    loader: 'none',
    onLoaded : function() {
      setSlideHeight(); //ロード完了後、高さ調整
      slideNum = t.find('.camera_target .cameraSlide').index(); //スライドの枚数を取得
    },
    onStartLoading : function(){setSlideHeight();},  // ロードが始まった時に高さ調整
    onEndTransition: function(){
      EndTransitionNum++; //スライドの切替回数をカウント
      var ind = t.find('.camera_target .cameraSlide.cameracurrent').index(); //現在表示してるスライドのIndex No
      // 一周ループした後、スライドが1枚目の時
      if( EndTransitionNum > slideNum && ind == 0 ) {
        t.cameraStop(); //スライドショー停止
      }
    }
  });

  //IE7-8対策： スライドショーの高さを固定
  function setSlideHeight ( ) {
    if( t.find('.camera_fakehover').height() < h ){
      t.find('.camera_fakehover').height(h);
    }
  }
});
</script>

UPDATE: 2013.11.27
一部記述ミスしていたので修正しました。