What's New Qiita

20190323のCSSに関する記事は5件です。

  • 投稿日：2019-03-23T18:47:36+09:00

Materializeでcol系のクラスとvideo-containerを同じタグ内で使ってはいけない

概要

  • Materializeのvideo-containerクラスを使うとyoutubeとかの動画埋め込みを簡単にレスポンシブにできて便利
  • でも使いかたをミスると動画が出てこなくなるので注意

コード

だめな例、正しい例、video-container使わないで頑張る例、それぞれのコード

video-container.html
<html>
    <head>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
    </head>
    <body>
        <div class="row">
            <!-- colとvideo-containerを同じdivで使うと動画が出てこない -->
            <div class="col s4 video-container">
                <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
            </div> 
            <!-- colとvideo-containerを入れ子にするとちゃんと出てくる -->
            <div class="col s4">
                <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
                </div>
            </div>
            <!-- 参考: 自力でレスポンシブ対応する場合 -->
            <div class="col s4">
                <div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0" 
                    style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
                </div>
            </div>
        </div>
    </body>
</html>

実行例

間違った使い方をすると左側のように何も出てこなくなる
video_container_sample.png

備考

video-containerを使わない場合の説明

ググるといっぱい出てくるが、めんどいのでおとなしくフレームワークの機能に乗っかったほうがよさそう

上記のコードからMaterialize依存の部分を取り除くとこうなる

responsive-ganbaru.html
                <div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0" 
                    style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
                </div>

ぱっと見、何でこれで動くのかわかりにくいが

  • 外側のdivで要素の幅に合わせた高さの「箱」 をpadding-topで作る。元の要素の高さは邪魔なので0にしておく。
  • 内側のiframeでは要素がピッタリ左上から始まるように位置調整する + 与えられた箱の大きさすべてを使うように指定

ということらしい。

サンプルで使ってる動画 is 何　という方へ

花譜　#17　「雛鳥」 【オリジナルMV】
https://www.youtube.com/watch?v=M1RIUrgJqWw

みんな聞きましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-23T16:43:49+09:00

CSS基礎まとめ

0．背景

Webアプリが作るために、今更ながらCSSをおさらい。
但し、最低限使うだろう部分に限定して記載します。

1．基本的なスタイル指定方法

index.html：スタイルを適用するHTML

<!DOCTYPE html>
<html lang="ja">
  <head>
  ~ 中略 ~
  <link rel="stylesheet" href="style.css">   <- StyleSheet(css)指定
  </head>

　<body>
    <h1> タイトル </h1>
    <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
  </body>
</html>

style.css：スタイルの設定ファイル
@charset "UTF-8";

/* "h1"タグのスタイル */
h1 {
  color: red;                   <- 文字色：赤
  border: 5px solid blue;       <- 枠指定(幅,線,色)
  text-align: center;           <- 文字位置 {left|center|right|etc..}
}

/* "p"タグのスタイル */
p {
  font-weight: bold;　　　　　　 <- 太文字
  text-decoration: underline;　 <- 下線
}

[結果 : スタイル適用前]


　ccstest_before.PNG

[結果 : スタイル適用後]


　ccstest.PNG

2．指定範囲の設定方法

index.html：スタイルを適用するHTML

<!DOCTYPE html>
<html lang="ja">
  ~ 中略 (css指定含む) ~
  <body>
    <section class="main">
      <h1> タイトル </h1>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
    </section>

　　<section class="sub">
      <h1 id="title2"> タイトル </h1>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
      <p> Hello CSS! Hello CSS! Hello CSS! Hello CSS! Hello CSS! </p>
    </section>

</body>
</html>

style.css：スタイルの設定ファイル
@charset "UTF-8";

/* 全ての"section"タグに適用 */
section {
  border: 1px solid silver;          <- 枠指定(幅,線,色)
  padding: 10px;                     <- 画面端からの幅
  margin-bottom: 10px;               <- section下の幅
}

/* class指定 */
.main h1 {                           <- class="main"の"h1"タグ
  border-left: 5px solid skyblue;    <- 左側だけの枠(幅,線,色)
}

/* id指定 */
#title2 {                            <- id="title2"
  border-left: 5px solid green;
}

/* 隣接結合子での指定 */
p + p {                              <- "p"タグが続いた時
  border-top: 1px dashed silver;     <- 下側だけの枠(幅,線,色)
}

[結果 : スタイル適用後]

csstest2.PNG

情報ソース

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-23T16:21:13+09:00

Tab移動などに使えるフォーカスアニメーション(サイト制作)

1.gif

button{
    outline: 1px solid transparent;
    outline-offset: 5px;
    transition: all 500ms;
}
button:focus{
    outline: 1px solid rgba(0, 0, 0, 0.5);
    outline-offset: 0;
}

outline-offsetプロパティでoutlineとボタンの距離（オフセット）を
指定・変更することで残像のような効果を表しています。
※IE非対応

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-23T16:09:49+09:00

【CSS/Javascript】手書き風の文字を錬成して時代錯誤に立ち向かえ

TL;DR

  • 手書き文化は滅べ
  • それっぽく対抗してみた
  • 実運用は自己責任で…

intro

わし「ES提出したるで～、OpenES(※)でいくらでも出したるわ」
企業「手書きね＾＾」
わし「」

こういう非効率の塊みたいな企業が死滅することを祈りながら、技術的に解決することを試みる。

※OpenES: Web上で書いてそのまま提出できるES。ガクチカ(学生時代に力を入れていたこと)という9割の人間はろくに書けない質問などを提供してくれる

目標

ぱっとみ手書きっぽくないようなフォントの組み合わせとかを錬成。

使用フォント

1: それっぽいフォントを組み合わせる

CSSを整備する。

@font-face {
    font-family: 'Kalam';
    font-weight: bold; /* ここをboldに指定することで、標準の太さフォントを太字と誤認させる */
    src: local('Kalam'), local('Kalam-Regular'),
         url('./fonts/kalam/kalam-v9-latin-regular.woff2') format('woff2'),
         url('./fonts/kalam/kalam-v9-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'dartsfont';
    src: local('dartsfont'), 
         url('./fonts/dartsfont/dartsfont.eot?#iefix') format('eot'),
         url('./fonts/dartsfont/dartsfont.woff') format('woff');
}

/* 手書き風 */
.hw {
    font-family: 'Kalam', 'dartsfont';
    font-weight: bold;
    letter-spacing: -1px;         /* そのままだと若干幅が広い。お好みで */
    text-shadow: 0 0 1px #EEE;    /* 影をつけると文字が濃く見える。好み */
    color: #222;                  /* ここもお好み */
    transform: rotate(0.05deg);   /* Windows Chromeできれいに描画してもらうため */
}

フォントはcssの中身見て適宜配置。これでひとまずそれっぽくなる。

この他に、行間とかを調整するためにpを修飾する。

p {
    white-space: pre-line;  /* コピペできるように */
    font-size: 1.4rem;      /* 文字サイズ。任意 */
    line-height: 1.3;       /* 行間。任意 */
    line-break: strict;     /* 禁則処理。あったほうが自然 */
    text-align: justify;    /* 両端揃え。これも多分あったほうがいい */
}

これで準備1は完了。
以上のCSSを使用して、文章をHTMLで書いてみるとこんな感じで表示される。
(文章は適当にここから拝借)
image.png

わりとそれっぽい。
半角数字は全体的に詰まってみえるため、1文字なら全角を使うことを推奨。
（上の画像でいうと「学生１位」の部分）

2: ランダム性を導入する

コード

このままだとPCで出力した感がまだ残っている。
というのも、各フォントごとの文字の形が全く同じだからである。

これを解消するのにJavascriptを使用する。
jQueryとsugarjsを使用して、こんな感じで書いてみた。

Sugar.extend();

$(() => {
    var hws = $(".hw");
    hws.each((i,e) => {
        console.log(e.textContent.split(''));
        e.innerHTML = e.textContent.split('').map(t => {
            if(t === '\n') return `<br/>`;
            if(t === '\t') return ``;
            return `<span style="${generateRandomizeStyle()}">${t}</span>`;
        }).join("");
    });
});

function generateRandomizeStyle(){
    const CharBeautyRate = 500; // 文字の綺麗さ指数。だいたい100-1000の範囲
    var color = Number.random(0, 0x30);
    var colorRgb = [1,1,1].map(e => color);
    var tax = 1 + Number.random(-10, 10) / CharBeautyRate;
    var tby = 1 + Number.random(-10, 10) / CharBeautyRate;
    var tay = Number.random(-10, 10) / CharBeautyRate;
    var tbx = Number.random(-10, 10) / CharBeautyRate;
    var transfromLocate = [1,1].map(e => Number.random(-5, 5) / 10);
    var letterSpace = Number.random(-8, -5) / 5;
    return `
        display: inline-block;
        white-space: pre;
        color: rgb(${colorRgb});
        letter-spacing: ${letterSpace}px;
        transform: matrix(${tax},${tay},${tbx},${tby},${transfromLocate});
    `;
}

各文字ごとに<span>で囲み、それぞれについてランダムで少し文字を変形させる。
このとき、あんまり派手に変形させると変な文字になるので、微小にずらしている。
調整しているパラメーターは「色」「文字空白」「文字形状」の3つ。

文字形状の調整

色、空白はランダム化させるだけでいいが、形状はそこまで単純でもない。
今回は、transform:matrixを使用した。

matrixは行列形式で文字変形を指定する。
詳しくはググってもらうのが早いが、簡単に説明すると
matrix(a, b, c, d, e, f)と指定した場合、前半のa～dの部分が行列になる。

\begin{matrix}
a & b \\
c & d 
\end{matrix}

一切の変換を施さない行列はというと、

\begin{matrix}
1 & 0 \\
0 & 1 
\end{matrix}

になる。
今回は少しだけ動かしたいので、

\begin{matrix}
1+δw & 0+δx \\
0+δy & 1+δz 
\end{matrix}

といったようにパラメーターを微小に動かす。
ここの値の動かし度合いで字の汚さを簡易的に指定することができる。

先程のコードでいうと

var tax = 1 + Number.random(-10, 10) / CharBeautyRate;
var tby = 1 + Number.random(-10, 10) / CharBeautyRate;
var tay = Number.random(-10, 10) / CharBeautyRate;
var tbx = Number.random(-10, 10) / CharBeautyRate;

のCharBeautyRateの部分である。

サンプル例

上記コードを当てはめると、こんな感じの文字になる。

CharBeautyRate=500
CharBeautyRate=500

CharBeautyRate=300
image.png

CharBeautyRate=100
image.png

CharBeautyRate=50
image.png

CharBeautyRate=50ぐらいになるとどういった変形を施しているかが明確になる。
徐々に文字が変な形になることがわかるだろう。
手書き風かつ丁寧な文章にしたいので、200-500ぐらいが無難だろうか。

今回はNumber.randomで一様乱数を使っているが、正規分布に従わせるとよりそれっぽくなりそう。

demo

つくりました。
https://arika0093.github.io/handwriting/tools.html

image.png
生成ボタンを押すたびに字の形状が毎回変わります。

課題

  • フォントの太さが均一
    • text-shadowでうまいこと調整できるか
    • ボールペン字ならそこまで気にならないか
  • とめはね等の調節
    • さすがに厳しい
  • 文字変形の単純さ
    • うまい方法があまり思いつかない
  • 字の「癖」の再現
    • transform:matrixを一様乱数でなくある程度の傾向をつける等？
  • 実際のESに貼り付ける方法
    • Word等で位置を調節して印刷が一番無難？
  • いつ使うのか
    • どうでもいい企業にしか使えないよね…

参考文献

https://xar.sh/post/95166529739/
https://sugarjs.com/docs/#/Number/random
https://qiita.com/junya/items/a1ad6126fa0315acc2aa
https://ginpen.com/2018/11/13/understanding-transform-matrix/
https://understanding-transform-matrix.ginpei.info/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-03-23T02:01:51+09:00

勉強する気力がびっくりするくらい湧かないしWordPressでアフィブログ作ろうと思った話

前回の記事（これ）書いてから満足して一向に学習意欲が湧かないのでWordPressでお小遣い稼ごうと思った話です。
こんな感じでWordPressのサイト作るんや～程度の備忘録的なやつです。この記事だけで網羅できてないんでその辺は適当にググりながらやるといいと思います。

一応できたやつ→なかむらのブログです

この記事について

そもそも勉強するのもお金稼げるようになりたいからだしアフィブログ作るのもええんでないかって安直な考えで手を出しました。

結論だけ先に書いておくとなんとなくWordPressってやつが簡単らしい程度の知識でブログ作ったらお金も時間も思ったよりかかってビビったのでアフィやる人は普通にブログサービスを使えばいいと思います。

まあWordPressってこんなものなのか～って勉強にはなったと思います。まったく触ったことないです＞＜ってよりは多少経験があるほうがまあいいんじゃないでしょうか。
認識が間違ってなければMVCモデル"風"のサイトが簡単にできるパッケージがWordPress。。。なんですよね？どうも完全にMVCモデルっては言えないみたいなことがインターネットに書いてありました。難しい話はよくわかりません。

まだアフィ貼ってないですけどアフィとか嫌いな人とかはスルーしてください。

やったこと

レンタルサーバー借りるの巻

おすすめ　安い　レンタルサーバーみたいな感じでググったら出てきたのでスターサーバー（りんく）にしました。
Netowlって会社のアカウント作って決済情報登録して利用申し込みしたら一瞬で借りられました。
確か月額250円のプランにしたんですけど最初は無料プランでもいい気がします。スターサーバーの無料プランがいいのかは知りません。ググってください。

ドメイン取得するの巻

いきなり順番ミスってたみたいでドメインを先に取得したほうがいいみたいです。
ドメイン申請してから実際に取得できるまで時間がかかるみたいでよくわかんない画面が出てきて心が折れかけます。ぼーっと待ってても解決しそうになかったのでググったらおとなしく待てって書いてあったのでその日は寝ました。
image.png

たぶんドメインは前もって準備しておくべきだと思います。結構お金もかかるし。。。（1年で1000円ちょっとだったような気がします。）
聞いたことはあったのでお名前ドットコム（りんく）でドメイン取得しました。
whois情報公開代行でググっておくと幸せになれると思います。難しいことはよくわかりません。

ドメインを設定するの巻

ドメインを取得しただけではなんの意味もないらしく、そのドメインでどのサーバーを見に行くのか的な設定が必要みたいです。
最初にお名前ドットコム側で設定してそのあとスターサーバー側で設定したらよくわからないうちにできました。XXサーバー　ドメイン設定　とかでググると先人の知恵がたくさん出てくると思います。

WordPress入れるの巻

ここまでやってやっとWordPressが出てきます。メールアドレスとパスワード入力したら勝手にブログできておしまい！だと思っててごめんなさい。

最初スターサーバーから適当なアドレスもらえたんでそこにWordPress入れて満足してたんですけどどうもドメインくっつけたらそっちに入れなきゃダメみたいですね。
あとググるとホームディレクトリ/wpにインストールやで～って書いてるサイトもあるんですけど罠です。それやると後々めんどいと思います。やめましょう。（オンプレの社内サーバとかに入れるならそれでもいいと思います）



眠いのでWordPressをインストールしてからの話はこの土日のどこかで書こうと思います。
では。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧