十を聞いて一を知る

要領の悪い高専生がプログラミングをします。

メディアクエリを使ってPCにだけCSSを適用させてみる

こんばんは。
自動化は無かったことになってます。またモチベが上がったら続けます。


さて、今日はちょっとデザインをいじります


前回、本文が表示されるところのwidthをいじったんですけれども、そのときはこんな感じで、ただ#wrapperに幅を指定しているだけなので、スマホで見るとはみ出ちゃうんですね。

#wrapper {
  width: 750px;
}

こんな感じで。
f:id:taira1999120:20170312001510p:plain
ですので、上のような指定は、一定の幅があるデバイスにだけ対応させたいわけです。

そういう時に使えるのがメディアクエリ
こういう風に書けばいいそうです。

@media screen and (min-width: 980px) {
  ここにCSSを指定
} /* パソコン表示 */

@media screen and (min-width: 768px) and (max-width: 979px) {
  ここにCSSを指定
} /* タブレット端末表示 */

@media screen and (max-width: 479px) {
  ここにCSSを指定
} /* スマホ表示 */

(引用 「メディアクエリ」CSSだけでパソコン・タブレット端末・スマホ表示を切り替える

両端に200pxぐらいはpaddingが欲しいかなと思ったので、以下のようにしました。

@media screen and (min-width: 1150px) {
    #wrapper {
        width: 750px;
    }
}

ここで注意することがあります。

上のコードはCSSファイルの一番最後に書いてください。

そうしないと、条件に当てはまるデバイスには上のコードの内容(幅指定)しか適用されなくなります。

それでは、確認してみます。
f:id:taira1999120:20170312001544p:plain
できてますね。

以上です。

Mechanizeを使ってWeb予約を自動化してみる・続々々々々

こんばんは。
今日こそは自動化するとか言ってましたが、ちょっとした問題が起きてしまいました。

それがこちら。 f:id:taira1999120:20170311230211p:plain
Herokuにあげていても、Herokuコマンドを送ったクライアントPC(今回の場合私のMac)が動いてないと、止まってしまうのです。
ということで、常時稼働させている自家用Windows機で走らせようということになりました。


今日のテーマはRuby on Windowsです。


とはいえ、やり方はQiitaにあったので特に私が書くことはありません。というか改めて書くのが面倒臭い

有志によって配布されているコンパイル済みのバイナリ

ここから落として、あとは道なりです。
どのバージョンを落とすかですが、まず、自分のMacでターミナルを立ち上げます。 rubyのバージョンを確認します。

$ ruby -v

f:id:taira1999120:20170311230154p:plain
f:id:taira1999120:20170311230155p:plain
ないですね笑
2.3.3を落としました。動かなかったらその時のこと。

インストールが完了したら、Windowsにソースを移して、コマンドプロンプトを立ち上げます。 実行します。

C:\HOGE> ruby auto_reservation.rb

以上です。