Webページで画面いっぱいに画像や動画を表示し、尚且レスポンシブに対応する際に、
通常は.resizeを用いて処理することが多いと思いますが、
Windows7以降のエアロスナップ(画面端にウィンドウを持っていき全画面や半画面表示に出来るあの機能)
するとうまく画像や動画が全画面に表示されない場合がある。

resizeの処理はウィンドウの端をドラッグする場合に処理されるが、
エアロスナップのように一気に全画面になる場合などには処理がうまくいかないのかな？？
(自分の場合は、全画面になるはずの画像や動画が画面3/1は表示され残りは表示されない不具合が生じた)

そんなこんなで、PC画面とにらめっこしていたときに頭に稲妻が走り、
実装してみたらうまくいき我ながら天才か？と思ったのでここに記します。

普段使うリサイズ処理

まず初めに普段使う可変処理をみてみましょう。

jquery.js

  $(window).resize(function(){
    ここに画面可変時の処理
  });

エアロスナップに対応した処理

ただif文でwidthを取得した時に処理を行うようにする。

jquery.js

  if $(window).width() {
    ここに画面可変時の処理
  });

こうすることによりWindowsのエアロスナップにも対応できるようになります。

ちなみに

この読み込んだ時の処理.load()もさっきのコードに置き換えることが出来ます。
.loadと.resizeで同じ処理にしているコードなどがあれば、
if $(window).width() 一文で置き換えることが出来ます。

jquery.js

  $(window).load(function(){
    ここに画面可変時の処理
  });

こっちのほうが良いよとか、あったらコメント頂ければ幸いです。

こいつ天才か？と思ったら「いいね」！

はじめに

未来電子テクノロジーでインターンに参加している、tomokiyo_hiromuです。
プログラミングの勉強を始めて約10時間が経過しました。
今回は、Progate中級編を終えてつまづいたところを発信しようと思います。

クラスでないものには「.」を付けない

ここに関しては、ガイドが教えてくれたおかげで苦労しませんでした。
ですが、実際に自分一人で作業するときにはきっとミスします。

stylesheet.cssでは、
index.htmlのタグでクラス指定していないものに「.」を付けてはいけません。

終了タグを間違えない

タグ名を入力し、tabキーを押すと自動で終了タグを補完してくれます。
これは便利な機能ですが、終了タグの位置を間違えるとエラーが出てしまいます。
私がよくミスをしたのは
要素を挟んでいるのに、一行目に終了タグを配置していたこと。
役立つ機能だからこそ、有効に使って効率化したいところです。

ペースを上げすぎない

これは初級編の時と変わりませんが、だからこそ大切なことだと実感しています。
一人でスラスラコードを書ける人は別として、私のような初心者は下手にペースを上げてはいけません。
まずは小さなミスがゼロになるくらい慎重に打ち、効率化を求めるのはそのあとでも遅くありません。

まとめ

中級編まで終えて、未経験の頃よりもはるかに上達しました。
これからはサポートに頼らず、一人でアウトプットの練習をしていくつもりです。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
最後まで読んでいただき、ありがとうございました。

実現したいこと

• 上図のようなかわいいタイトルを作成したい。
• 文字数に応じて幅が伸縮するようにしたい。
• 画像を使いたくない。

実装方法

<h2 class="headline">見出し</h2>

/* 1.カンバンの板 */
.headline {
  background-color: #ec685b;
  border-radius: 6px;
  box-shadow: 0 -2px 0 #f0a39b;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 0 0 2em;
  padding: 0.5em 1em;
  position: relative;
}
/* 2.カンバンの棒 */
.headline::before,
.headline::after {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  content: '';
  display: block;
  left: 10%;
  position: absolute;
  width: 80%;
}
.headline::before {
  top: -5px;
  height: 4px;
}
.headline::after {
  bottom: -12px;
  height: 12px;
}

1. カンバンの板にあたる部分を作成
2. before, afterで棒にあたる部分を作成

簡単なので、ぜひやってみてください。

たんぽぽ乗せは辛いよ

めったに新規サイトを作成しないたんぽぽ乗せの為のオレオレスニペットです
たんぽぽはせっかく覚えたモダンな組み方をすぐ忘れる……

See the Pen VRXPPL by H.NOTSU (@H_NOTSU) on CodePen.

とりまHTML基本

index.pug

doctype html
html(class="no-js" lang="ja")
    head
        meta(charset="utf-8")
        meta(http-equiv="x-ua-compatible" content="ie=edge")
        title タイトル
        meta(name="description" content="説明文")
        meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")

        link(rel="manifest" href="site.webmanifest")
        link(rel="apple-touch-icon" href="icon.png")
        //- favicon.icoはルートディレクトに配置
        link(rel="stylesheet" href="css/normalize.css")
        link(rel="stylesheet" href="css/main.css")
    body
        //- ここにサイトやアプリのコンテンツ          

        header
            .container

        main
            .container

        footer
            .container

        script(src="js/vendor/modernizr-3.5.0.min.js")
        script(src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous")
        script.
          window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')
        script(src="js/plugins.js")
        script(src="js/main.js")
        //- Google Analytics: UA-XXXXX-YをあなたのIDに変更
        script.
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        script(src="https://www.google-analytics.com/analytics.js" async defer)

参考サイト

最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
上記リンクのソースをpug用に書き直して追加修正

とりまCSS基本

main.scss

//normalize.css調整
p
    margin: 0

ul
    margin: 0
    padding: 0

li
    list-style: none

// mixin

// 共通パーツ

.container

    margin: 0 auto
    max-width: 960px

//専用パーツ

body
    //要素少ない際のレイアウト用
    display: flex
    flex-direction: column
    min-height: 100vh

header

    height: [header-height]
    width: 100%

    .container

main

    .container
        //要素少ない際のレイアウト用
        min-height: calc( 100vh - ( [header-height] + [footer-height] ) )
        width: 100%
        // paddingの外への飛び出しを防ぐ
        box-sizing: border-box
        padding: 

footer
    //要素少ない際のレイアウト用
    margin-top: auto

    height: [footer-height]

    .container

参考サイト

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法
上記を参考に以下略
追加ポイントはmainのmin-height: calc( 100vh - ( [header] + [footer] ) )
要素が少ない際に背景がめいっぱい広がってくれなくて大変ブサイクになったので……
headerとfooterの高さが無くてもなんとかできる方法が知りたいけども、ここまで指定がないのも珍しいので今のところは大丈夫かな