投稿画面が微妙に使いにくい気がしたので弄ってみました。

ブックマークレット等でも出来そうですが、その都度実行も面倒なのでChrome拡張を利用してます。

Stylus - Chrome ウェブストア
CSS弄れるなら色々と自分好みに出来て便利です。

スタイル設定

適用先: 正規表現に一致するURL https?://qiita.com/drafts/.*?/edit\b.*

/** プレビューペイン **/
div.editorPreview_article .it-MdContent{
  white-space: nowrap;       /* 折り返さない */
  transform: scale(0.75);    /* 縮小表示:75% */
  transform-origin: 2em 2em; /* 縮小位置調整 */
}
div.editorPreview_article .it-MdContent.slide_preview{
  white-space: initial;  /* スライドモードは普通に */
  transform: none;
}

/** 編集ペイン **/
textarea.editorMarkdown_textarea{
  white-space: pre;        /* 折り返さない */
  tab-size: 2;             /* TAB文字幅:2 */
  /* 好みのフォントで編集したい */
  font-family: "FONT-NAME",Consolas,Liberation Mono,Menlo,Courier,monospace;
}

---

やりたかった事

• 編集画面
  • 自動折り返しの無効化
    投稿用にコード手直しする時、非常に見づらかったので。
  • TAB文字幅の変更・表示フォントの変更
    単純に好みの問題です。
    
    
• プレビュー画面
  • 自動折り返しの無効化
    表示幅半分だと実際の記事以上に折り返されるので。
  • 縮小表示化
    プレビューなら実寸で無くても良いかな～と。

WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の
メディアクエリのメモとしてこちらでご紹介します。

1. スタイルシート（CSSファイル）に記述する

link要素として記述するのではなく、CSSファイルに直接
画面ごとの別のcssを記述します。

sample.css

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxまで　*/
  p { 
    color: red;
  }
}
@media screen and (min-width:760px) and ( max-width:960px) {
    /*　画面サイズが760pxから960pxまで　*/
  p {
    color: red;
  }
}
@media screen and (min-width:960px) {
    /*　画面サイズが960px以上*/
  p {
    color: red;
  }
}

・ブラウザ上では上から順に読み込まれる。
・このように小さい画面から順番に指定していく事を
「モバイルファースト」という。

---

以上で終了です
ご覧いただきありがとうございました。

概要

https://shindans.herokuapp.com

診断アプリを作りました。

こんな感じ

こちらの診断アプリをJS（jQuery）のみで実装したので記事をしました。

まずは、ビューを用意する。

#wrapper
  .question
    %h1.title ソーシャルスタイル診断
    %ul.questions
      %li.textBox
        %span.text Q1. 冷静で人からの指示は嫌い
        %label.yes
          %input.typeA.typeD{:name => "q01", :type => "radio"}>/
          YES
        %label.no
          %input.typeB.typeC{:name => "q01", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q2. 自分の話をすることを好む
        %label.yes
          %input.typeB.typeA{:name => "q02", :type => "radio"}>/
          YES
        %label.no
          %input.typeC.typeD{:name => "q02", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q3. 周りの意見を大事にする方だ
        %label.yes
          %input.typeC.typeD{:name => "q03", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q03", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q4. 情報を集めたり分析することが得意だ
        %label.yes
          %input.typeD.typeC{:name => "q04", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q04", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q5. 戦略立案や勝負事への興味が強い
        %label.yes
          %input.typeA.typeD{:name => "q05", :type => "radio"}>/
          YES
        %label.no
          %input.typeB.typeC{:name => "q05", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q6. ノリがよくムードメーカーだと言われる
        %label.yes
          %input.typeB.typeC{:name => "q06", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeD{:name => "q06", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q7. 気配り上手、聞き上手と言われる
        %label.yes
          %input.typeC.typeD{:name => "q07", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q07", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q8. 感情を表に出すのは、苦手だ
        %label.yes
          %input.typeD.typeA{:name => "q08", :type => "radio"}>/
          YES
        %label.no
          %input.typeC.typeB{:name => "q08", :type => "radio"}>/
          NO
    %button 診断する
  .result.ResultA
    .ResultA__recommend あなたの性格は・・・・
    .ResultA__Amenu
      .ResultA__Amenu__text 前進型・行動派
    %p あなたは迅速かつ合理的に仕事を進めるタイプです。ビジネスライクな性格で、プロセスよりも結果を重視し、決断力に優れています。経営者に多いタイプに多いとされます。
    = image_tag("close-up-face-fashion-fine-looking-450212.jpg", width: "306px",class: "image")
  .result.ResultB
    .ResultB__recommend あなたの性格は・・・・
    .ResultB__Bmenu
      .ResultB__Bmenu__text 直感型・感覚派
    %p あなたは、周りから注目されることを好むタイプです。ビジネス面では、自ら先頭に立って人を率いていく傾向にあります。
    = image_tag("men-s-white-button-up-dress-shirt-708440.jpg", width: "306px",class: "image")
  .result.ResultC
    .ResultC__recommend あなたの性格は・・・・
    .ResultC__Cmenu
      .ResultC__Cmenu__text 温和型・協調派
    %p あなたは、どこにいてもみんなの調停役になるタイプです。周囲の気持ちに敏感で、自分の話をするよりも相手の話に耳を傾ける傾向にあります。
    = image_tag("woman-wearing-teal-dress-sitting-on-chair-talking-to-man-2422280.jpg", width: "306px",class: "image")
  .result.ResultD
    .ResultD__recommend あなたの性格は・・・・
    .ResultD__Dmenu
      .ResultD__Dmenu__text 分析型・思考派
    %p あなたは、独特の価値観や雰囲気を持っていて、周囲に影響されにくいマイペースな人です。仕事においては、データの収集や分析に黙々と取り組みます。
    = image_tag("person-using-a-laptop-3183131.jpg", width: "306px",class: "image")

次にJS(jQuery)を用意する。

$(function(){
  //ボタンがクリックされた時
  $("button").on("click", function(){
  //一度結果を非表示にする
    $(".result").hide();   
    //問題数を取得
    var qNum = $("ul li").length;
    if( $("ul li input:checked").length < qNum ){
      //全てチェックしていなかったらアラートを出す
      alert("未回答の問題があります");
    } 
    else {
        //チェックされているinputの数を取得
        var typeANum = $(".typeA:checked").length,
            typeBNum = $(".typeB:checked").length,
            typeCNum = $(".typeC:checked").length,
            typeDNum = $(".typeD:checked").length,
            typeENum = $(".typeD:checked").length;
        if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum && typeANum >= typeENum) {
            $(".ResultA").fadeIn();
        } else if( typeBNum >= typeANum && typeBNum >= typeCNum && typeBNum >= typeDNum && typeBNum >= typeENum) {
            $(".ResultB").fadeIn();
        } else if( typeCNum >= typeANum && typeCNum >= typeBNum && typeCNum >= typeDNum && typeCNum >= typeENum) {
            $(".ResultC").fadeIn();
        } else if( typeDNum >= typeBNum && typeDNum >= typeCNum && typeDNum >= typeANum && typeDNum >= typeENum) {
            $(".ResultD").fadeIn();
        } else if( typeENum >= typeBNum && typeENum >= typeCNum && typeENum >= typeANum && typeENum >= typeDNum) {
            $(".ResultE").fadeIn();
      }
    }
  });
});

解説

ちょい説明します。

  .result.ResultA
    .ResultA__recommend あなたの性格は・・・・
    .ResultA__Amenu
      .ResultA__Amenu__text 前進型・行動派
    %p あなたは迅速かつ合理的に仕事を進めるタイプです。ビジネスライクな性格で、プロセスよりも結果を重視し、決断力に優れています。経営者に多いタイプに多いとされます。
    = image_tag("close-up-face-fashion-fine-looking-450212.jpg", width: "306px",class: "image")

回答結果となる.result.ResultAは、CSSでdisplay: none;により普段は非表示にしています。

if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum && typeANum >= typeENum) {
    $(".ResultA").fadeIn();

もし.typeAが.typeB .typeC .typeD .typeEよりinputの数（.length）が多い場合は、

$(".ResultA").fadeIn();

fadeInメソッドで、非表示にされていた.result.ResultAをフェードイン表示させます。

---

こんな感じで.typeB以下のif文が同じ要領で続きます。

これを応用すれば、色んな診断アプリを作れそうです。

補足

hamlからHTMLに変換する場合は、以下の記事を参考にしてください。
https://qiita.com/chezou/items/0e9bd4f9eb8314dc2aec#hamlhtml%E5%A4%89%E6%8F%9B

ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。
例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。
しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。

以下、サンプルコード

/*宣言方法は以下のように'--'で始める*/
/*使い方はvar()の()ないに入れ込む*/
h1{
  --my-color: orange;
  color: var(--my-color);
}
/*これでh1にオレンジが割り当てられる。
また、何も設定がないときの指定もできる*/

h1{
  color: var(--my-color,blue);
}

/*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/

ただ、<h1>で宣言した変数を<p>では使えない。
つまり

h1{
  --my-color: orange;
  color: var(--my-color);
}

p{
  color: var(--my-color);
}

としても<p>にはオレンジが割り当てられない。
どうすれば共通して使えるかと言うと、
方法は２つある。

①共通の親要素で宣言する。
②文書全体のhtmlで宣言する。

①の場合は、htmlが以下のようになっていた場合、

<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>

共通する親要素である<body>で宣言すれば両方ともに共通する変数を使える。

body{
  --my-color: orange;
}

としておくと、<body>の中にある要素には、--my-colorが使える。

②の方法はCSSファイル内で

:root{
  --my-color: orange;
}

と言うように宣言すると、<body>,<h1>,<p>の全てというか、htmlにある全ての要素に--my-colorが使える。

また変数はプロパティの値に使えるのであって、プロパティ名には使えない
。
例えば、

--my-margin-top: margin-top;

はできず、

--my-margin-top: 40px;
margin-top: var(--my-margin-top);

こういう使い方をしなければならないということ。

以下、まとめサンプルコード

:root{
  --my-hue: 200;
}

body{
  background: hsl(var(--my-hue), 40%, 95%);
}

h1,p{
  color: hsl(var(--my-hue), 35%, 55%);
}

.btn{
  color: white;
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  background: hsl(var(--my-hue), 50%, 50%);
  background: hsl(calc(var(--my-hue) + 180), 50%, 50%);
  /* 180°変えて補色の関係にし、見やすいように。 */
  background: hsl(calc(var(--my-hue) + 60), 50%, 50%);
  /* 完全に穂色はきついから、少しずらした色に */
}

100日チャレンジの351日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
351日目は、

おはようございます
昨日1日でやったこと⇩
●ブログ1記事作成
●プログラミング学習350日目　2.0h
・架空LP17日目1.0h(@ririru_123)
・ipad版の制作物部分作成
・Udemy:フロントエンド講座1.0h

時短と、別垢でやる意味がなくなってきたので、こちらに統合#早起きチャレンジ#100DaysOfCode

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 20, 2020

webクリエイターボックスさんの記事を参考にして、筋トレ（腕立てふせ）をアニメーションにしてみました。

イラストレーターで描いたイラストをSVG形式で保存

腕を曲げる前と、曲げた後の動きをひとつの画像ファイルとして用意します。

HTMLとCSSを実装

pushupクラスに画像を埋め込んで、動かしていきます。

<h1>WORK OUT</h1>
      <div class="viewContainer">

          <div class="pushup"></div>

      </div>

CSSで画像の配置と、アニメーションの動作を記述します。

/* push up */
.pushup {
  background: url(../images/person/pushUpMan.svg) no-repeat;
  width: 360px;
  height: 173px;
  animation: play 1s steps(2) infinite
}

@keyframes play {
  to {
    background-position: -840px 0;
  }
}

アニメーションの動き

animationの1sは、アニメーションの動作時間（秒）を表しています。
step(2)は、2段階を繰り返すという意味です。

animation: play 1s（※時間） steps(2)（※コマ数） infinite

コマ数を増やせば、それだけ滑らかなアニメーションを作ることが可能です。
最後にinfiniteを指定すると、動作が無限ループになります。

background-position: -840px 0;

keyframes内で1秒ごとに背景を指定の数値分だけx軸でズラす事で、あたかも動きがあるように見せています。

デモ

実行結果がこちらです。
デモサイト

参考

CSSスプライトとstepsを使ってアニメーション画像を作ろう
codepen

こんにちは、古の腐女子です。
古の腐女子なので、同人サイトを作っていた経験があり（今は亡きジオシティーズで作っていました。ロリポップは永遠の憧れです）、
HTMLの知識はあるものの何分知識が古すぎる(m*10 + n 年以上前)ので、ドットインストールで再勉強しています。

若い頃とは違って、勉強したことが走馬灯のように左から右に通り過ぎていくので、
復習と理解の促進のために、アウトプットしておきます。

知識あるからと調子に乗って、ドットインストールのHTMLを学ぼうコーナーを素通りしてJavaScriptで三択クイズとか作ってたら、チンプンカンプンすぎてえらいことになったので、自分の能力を適切に理解する過程は本当に必要ですね。

はじめてのHTML
はじめてのCSS

はじめてのHTML

• headerとfooter
• section
• リスト表現( ol, ul, li )
• anchor
• MDN

headerとfooter

ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。
headerタグはheadタグとよく混同されることがあるのですが、headタグとは違います。
ちなみにheaderタグやfooterタグは、文書構造によってはひとつの文書の中に複数書くこともあります。

sectionタグ

ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。

リスト表現( ol, ul, li )

どれがどれ？となりやすいのですがolもulもliも略語です。

• ol >>> ordered list
• ul >>> unordered list
• li >>> list item

liはlist itemであることを明示するために利用するので、olやulで囲うことが多いでしょう。

HTMLを書くときは文書の意味を考えて適切なタグを囲うことが求められるので、横並びであっても積極的にリストを使っていきましょう。

anchor

リンクを貼る時にaタグを使うのですが、これの意味はanchorです。
私が初めてaタグを使ったのは小学生のときだったのですが、「anchorのaだよ」と教えてくれる人はどこにも居らず、
「まあ、そんなもんだろ～～」と処理していたので、晴天の霹靂です。
「ごん、お前だったのか……」のテイストで驚きました。「a, お前anchorのaだったのか……」

MDN

仕様の説明をしてくれる優しいサイト。
私が子供のときなかったよね？と確認すると、2005年かららしい。
MDN

はじめてのCSS

• セレクタとプロパティ
• divタグ
• 役に立ちそうなcssタグ

セレクタとプロパティ

なんちゃって独学なので、万事が万事「まあ、こんなもんだろ～～」と処理しているので、用語の再確認をします。
セレクタが「どこに」で、プロパティが「どのようなスタイルを」です。

divタグ

レイアウトのためのタグです。
識別子を付けるためにクラスをつけます。

class属性を付けた要素は.クラス名で表現することができます。

index.html

<div class="container">

styles.css

.container {
 background-color: pink;
 margin-left: auto;
 margin-right: auto;

}

ちなみに、divで使った領域を中央寄せにしたい場合、この左右のmarginをautoに設定するテクニックがよくつかわれます。

Flexboxで横並びにする

横に並べたい要素があったら、Flexboxを使うといいです。
その親要素にプロパティを追加しましょう。

index.html

    <div class="container">
      <div class="icon">
      ...
      </div>
      <div class="info">
      ...
      </div>

styles.css

.container {
   display :flex;
}

基本セレクタ早見表

#id名

.classs名

〇,〇,〇, (カンマ区切りで複数のセレクタを書く)

複数のタグやクラスに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べます。タグ名やclass名、id名を一緒に並べてもOKです。

◯ ◯ ◯(半角スペース区切りで子孫セレクタ)

半角スペースで区切って並べることで「◯の中の◯に対してのみCSSを適用」というようなことができます。このように絞り込むような指定は「子孫セレクタ」と呼ばれます。

◯ > ◯ (「>」で子要素にのみ適用)

半角スペース区切りだと、子要素の中の要素（孫要素）にまでスタイルが適用されますが、「>」をつけることで1つ下の階層の子要素にのみCSSが適用されるようになります。

CSSのセレクタとは？覚えておきたい25種類と書き方

CSSのリファレンスサイト

基本を学んだらあとはいろんなタグを知っていけばいいと思うので、リファレンスサイトや本で情報収集しようと思っています。
おすすめの情報収集方法があれば教えていただけると嬉しいです～。
（以下は参考にする予定のサイトです）

w3schools
MDN CSSリファレンス