What's New Qiita

20201127のCSSに関する記事は6件です。

  • 投稿日：2020-11-27T14:19:22+09:00

ルビのようだけどルビではないものたち

表示例
　某所の会議でルビ／ふりがなに関する話題になった時に、ルビ的な組版処理をしているけれども少なくとも狭義の意味ではルビとは言いがたい組版要素の話が出ました。紙の本のデータのEPUB化の際にもしばしば取り扱いを悩む要素を多く含んでいますので、ちょっとまとめて書いておきたいなと思います。なお、InDesignやIllustratorなどのDTPアプリケーションでは「タブ機能を使った複数行テキストの位置合わせ」や、「アンカーボックスを使った要素の配置」に相当する話になるかと思います。JLREQ的には「3.6 Tab Setting タブ処理」に関連します。そのつもりで読んでください。

さまざまな例

　例えば以下のようなものたちです。
  • 語学学習系コンテンツでよく出てくる、例文に並行して記述される和訳、発音記号、品詞など
  • DTPデータ内ではルビの機能を使用して行間に挿入されている注の合印
  • 漢文訓読の返り点や送り仮名など
　注の合印や漢文の返り点などは今は上付き・下付きの指定でコーディングされるケースが多いかと思いますが、本来的には本文テキストの横に並行して置いておきたいという要望が強いかと思います。実際注の合印などはInDesignでルビの機能を使って配置している例は良く目にしますので、ずっと組版的にはニーズはあったと見るべきでしょう。
　また、円城塔氏が「文字渦」でやったような、ルビの体裁で本文とは違う内容のテキストをエンドレスで書くような表現も狭義での「ルビ」とは言いがたいでしょう。
　こういった組版要素はいずれも本文と並行して記述され、またリフロー化の際には行末で本文と並んで折り返される挙動になることが表組みとは異なります。単純なHTMLのテーブル要素ではカバーできないのです。
　ここでは仮にこういうものたちを「並行注」と呼称することにします。

無理矢理組版再現できなくはなさそうだけど…

　上記の例のうち、おそらく一番複雑なものになりそうな語学学習系コンテンツをコード化できそうかを考えてみます。 
<div style="display:inline-block;width:11em;">
  <span style="display:inline-block;width:100%;">Humpty Dumpty </span>
  <span style="display:inline-block;width:100%;">ハンプティ・ダンプティ</span>
  <span style="display:inline-block;width:100%;">名詞</span>
</div>
<div style="display:inline-block;width:4em;">
  <span style="display:inline-block;width:100%;">sat </span>
  <span style="display:inline-block;width:100%;">すわった</span>
  <span style="display:inline-block;width:100%;">動詞</span>
</div>
<div style="display:inline-block;width:3em;">
  <span style="display:inline-block;width:100%;">on </span>
  <span style="display:inline-block;width:100%;">〜に</span>
  <span style="display:inline-block;width:100%;">前置詞</span>
</div>
<div style="display:inline-block;width:3em;">
  <span style="display:inline-block;width:100%;">a wall</span>
  <span style="display:inline-block;width:100%;">塀</span>
  <span style="display:inline-block;width:100%;">名詞</span>
</div>
　以上のような感じで、一応ブラウザレベルでの動作は確認できました（図ではわかりやすくするために各ブロックに背景色を指定しています）。きちんと行末でブロックごと折り返されています。
　ただし、1点解決不可能な問題があります。「各ブロックの幅を明示的に指定する必要がある」点です。表示フォントをコンテンツ作成側が強制できるような環境であれば問題にはならないですが、そうでない場合に、例えば「ユーザーがプロポーショナル幅のフォントを表示フォントに指定した」ような場合に各ブロック間に不規則な幅のスペースが空くことになりそうです。
　また、コードも正直相当煩雑になりますし、さらにdisplay:inline-blockの入れ子はかなりトリッキーにも思えますので、ビューアによっては表示の問題が出そうです。本によってはこういうものはかなり頻出しますので、可能ならばもっと簡単な記法で書きたいところです。

ルビの記法の延長で書けるようになれば嬉しい

　より簡単な記法の候補として思いつくのが、「ルビ」のそれです。ルビはまだCSSの規格としては審議中の段階ですが、肩付きルビや両側ルビのような複雑な指定が将来使えるようになるかどうかはともかく、基本的なルビはもう現在使用して問題ない状況なのでその延長は考えてもよいかと思います。例えば、以下のような形はどうでしょうか？ 
<span class="parallelnote"><span class="main">Humpty Dumpty</span><span class="note1">ハンプティ・ダンプティ</span><span class="note2">名詞</span></span>
<span class="parallelnote"><span class="main">sat </span><span class="note1">すわった</span><span class="note2">動詞</span></span>
<span class="parallelnote"><span class="main">on </span><span class="note1">〜に</span><span class="note2">前置詞</span></span>
<span class="parallelnote"><span class="main">a wall</span><span class="note1">塀</span><span class="note2">名詞</span></span>
　当然まだ専用タグなどはなく、全部spanタグにclass名で書いたので複雑に見えますが、要するにrubyタグ内のrt要素に当たるものをrb要素の後に複数個連続で並べただけなので構造としてはシンプルかと思います。このような記法で書いてきちんと「並行注」的な挙動が得られるようになるなら嬉しいところです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-27T13:13:48+09:00

jQueryを使ってスクーロル時にフワッと文字が浮き上がって出るやつ

はじめに

今回はタイトルにある通りスクロール時にフワッと要素が浮き上がってくる機能を実装したので備忘録として記録していきます。
今回はjQueryを使っての実装になるのでそちらの準備をしてから実装に入って下さい
私自信プログラミング初心者なので間違いなどあればご指摘の程よろしくお願いします！

ステップ１ フワッとさせたい要素を作る

  <div class="container">
  </div>

  <div class="container2">
    <h1>フワッと現れる</h1>
  </div>

.container {
  height: 100vh;
  width: 100%;
  background-color: aquamarine;
}

.container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: rgb(147, 147, 197);
}

こちらはなんの変哲もないhtmlとcssです。
h１タグの部分をスクロールと共に出現するように実装していきます！

ステップ２　JavaScriptの記述

基本的にスクロールに応じてアニメーションを付けるためのJsの流れは
１、ブラウザの表示できる領域の高さを取得
２、スクロール位置を取得
３、アニメーションをさせたい要素のY軸（縦）の位置を取得
４、アニメーションさせる要素かどうかを判断する
５、アニメーションをさせる要素だった場合、クラス.fadeInを追加

これらをコードにすると

$(function () {
  $(window).scroll(function () {
      const wHeight = $(window).height();
      const scrollPosition = $(window).scrollTop();
      $('.scroll').each(function () {
          const targetPosition = $(this).offset().top;
          if(scrollPosition > targetPosition - wHeight + 60) {
              $(this).addClass("fadeIn");
          }
      });
  });
});

まず1、２行目でスクロール時のアクションを定義します。
3行目でブラウザ表示領域の高さをconst wHeightに代入しています。
4行目でスクロール位置の高さをscrollPositionに代入しています。
5行目でクラスscrollが付与されてる要素を繰り返し処理を行っています。
6行目でアニメーションを行いたい要素の高さを取得しています。
7行目でif文でスクロール位置 > 対象となる要素の縦位置 – 表示領域の高さ + 60を定義
ここで+60などを指定しないと画面の下部でアニメーションが行われていて確認が難しくなるためです。
なのでここの値はお好みの値を指定して下さい。
8行目で条件式を満たした場合クラスfeadInを追加してます。

ステップ３ cssでアニメーションを定義する

/*1.フェードインアニメーションの指定*/
.scroll {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

cssで実際にアニメーションを作っていきます。
まずfeadInクラスの説明をします
こちらでアニメーションの名前やかかる時間などの設定をしていきます！
animation-nameでアニメーションの名前を定義しています。
animation-duration: 5s;でアニメーションにかかる時間を設定しています。
animation-fill-mode: forwards;でアニメーション後そのままの状態を維持する記述です。

次に@keyframesでアニメーションの挙動を設定していきます
@keyframesのあとは上で設定したアニメーションの名前を記述して下さい。
実際にこの部分の記述でどのように要素を変化させるかを設定していきます。
今回は0%の時と100%の時の要素の状態を定義していますが、50%や75%など細かく設定する事ができるのでお好みで設定してみて下さい。

これで一通りの準備ができましたので挙動を確認してみましょう！

https://gyazo.com/c8e8aa5f59ec2226d79fcb479c9ed6f6

最後に

僕自身フロント実装は苦手なのですが実際アニメーションを作ってみるととても楽しいですし、モダンなサイト作成には必須な技術かと思うので、今後も少しずつ扱えるようにしたいと思いました！！
まだまだプログラミング初心者のためご指摘などあればよろしくお願いします！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-27T12:33:21+09:00

Vue で script で算出した数値・文字列を CSS で利用したい

後で修正します。ポイントは CSS変数をDOMに動的に当てる ところです。
ここに気づけずけっこうハマりました。。。

<template>
  <div class="test" :style="styles">
    <input v-model="color" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      color: 'black',
    };
  },
  computed: {
    styles() {
      return {
        '--color': this.color,
      };
    },
  },
});
</script>

<style lang="scss" scoped>
$size: 10px;

.test {
  --color: black;  // ここは必ず指定
  color: var(--color);
  font-size: $font-size; // もちろん SCSS の変数とも併用できます。
}
</style>

Options API だけでなく、 Class API でも動作します。もちろん、 Nuxt でも OK です。
安全性のために、 以下の2点は必ず実施してください。

  • デフォルト値の設定（万が一 computed が壊れた等して値が飛んでこなかったら事故に繋がります）
  • SASS系なら対象のスコープを限りなく狭めて使う（想定外の影響を避けてください）
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-27T09:42:53+09:00

30代からのプログラミング勉強　3日目

仕事が休みだった事もあり専属メンター(身内)によるPythonアプリケーション講座...の予定だったもののほぼほぼ環境構築で終了。

学習内容

ターミナルの活用方法

現在地
$ pwd
移動
$ cd ○○○○
現在地のファイル一覧
$ ls

他にも事前に環境出来てればpipenv shellで仮想環境に入れるとかあったけどあまり理解は出来てない。要学習。

HTML/CSS

Udemyにて。

CSSの内部参照
<style>
  p{font-size: 20px;}
</style>

※headの中に書き込むことにより対応したタグのスタイルを一括で設定できる。
CSSの外部参照
<link rel="stylesheet" href="ファイル名">

※headの中に書き込むことにより外部のCSSを引っ張ってこれる。同一ページ内に記載されないのでコードが見やすくなる。

上記二つを併記した場合は下に書いてある方が後に実行されるため優先されて表示される。

一行だけスタイルを変えたい場合は一番最後に実行されるようにインラインで書く。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-27T00:03:38+09:00

【CSS初心者向け】基本的な書き方やプロパティまとめ

解説ではなくカンペのようなものなので、細かい説明は省略しています。
（初心者のため間違いなどあったらすみません）

CSSの書き方（読み込み方）

HTMLファイルで読み込み

HTMLファイル内で、以下のいずれかの方法を使ってCSSファイルを読み込み、スタイルが反映されるようにします。

index.html
1. CSSファイルに記述し、HTMLファイルのheadタグ内でCSSファイルを読み込む（一般的な方法）
<link rel=“stylesheet” href=“styles.css” type=“text/css”>

2. HTMLのタグの中に直接記述
<p style=“color:blue”>テキスト</p>

3. HTMLファイルのheadタグ内に記述
<style type=“text/css”>
  color: blue;
</style>
CSSファイルの準備

CSSファイルの冒頭には、以下を記述します。

styles.css
@charset "UTF-8";

あと、必須ではないけれど、最初にリセットCSSで各ブラウザに設定されているデフォルトのCSSをリセットしておくと混乱が減る。

よく使うプロパティなど

コメント

/* このように記述します */

文字
  • color: 文字色
  • font-size: 文字サイズ
  • font-weight: 文字の太さ（400/normal:普通, 600/bold:太字）
  • font-family: 文字の種類
  • letter-spacing: 文字間隔
  • line-height: 行の高さ
  • text-align: 文字の左寄せ、中央寄せ、右寄せ
  • text-decoration: noneで下線を消す
  • font-style: 文字を筆記体（italic）や斜体（oblique）に
余白・位置
  • margin: 外側の余白
    • (margin: 0 auto; で真ん中寄せ)
  • padding: 内側の余白
  • position: ボックスの配置方法の指定
    • relative ->相対位置
    • absolute ->絶対位置
    • fixed ->絶対位置（スクロールしても固定）
  • top, right, bottom, left: 親要素の端からの距離を指定
要素の大きさ
  • width: 幅の指定
  • height: 縦の指定
背景
  • background-color: 背景色を指定
  • background-image: url(ここにURLを入れる); ->背景画像を設定
    • （以下2つを一緒に指定すると、背景画像をいい感じに設定できる）
    • background-size: cover;
    • background-position: center;
線
  • border: 1px（太さ） solid（スタイル） blue（色）; ->線のスタイルを一括で指定
    • スタイル...solid（直線）, dashed（点線）
  • border-bottom: 要素の下のみの線のスタイルを指定（top, right, leftも同様に可能）
表示
  • display:
    • block ->ブロック要素にする（幅と高さを指定できる）
    • inline-block ->インラインブロック要素にする（横幅と高さを指定できる。前後の要素と横に並ぶ）
    • inline ->インライン要素にする（幅と高さを指定できない。上下の余白を調整できない）
    • none ->非表示にする
    • flex ->子要素をいい感じに並べる（オプションたくさんあるので詳しくはぐぐる）
その他、よく使う
  • opacity: 透過（0～1）
  • border-radius: 丸角にする
  • box-shadow: 影をつける(左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 (内側指定);)
  • z-index: 要素の重なり順
  • overflow: はみ出る部分の指定
  • transition: (all 0.3s;) アニメーションに時差をつける（hoverと合わせてよく使う）

セレクタの指定の仕方

セレクタとは

スタイルを指定する対象のことです。

styles.cs
p(セレクタ) {
 color(プロパティ): blue(値);
}
複数の要素選択や、関係による絞り込み

  • 複数の要素の間に半角スペースを入れると、親要素の下のすべての指定した子要素に適用
    ex）sectionの中のすべてのpに適用

  • 「,（カンマ）」を入れると、すべての要素に適用
    ex）h2, h3, h4 {... ->h2 h3 h4すべてのpに適用

  • 「>」を入れると、最初の要素の1階層下の要素に適用
    ex）section > p {... ->section直下にあるpに適用

  • 「+」を入れると、最初の要素と同一階層で後続に登場する1つの要素に適用
    ex）h3 + p {... ->h3と同じ階層で1つ後にあるpに適用

  • 「~」を入れると、最初の要素と同一階層で後続に登場するすべての要素に適用
    ex）h3 ~ p {... ->h3と同じ階層で後に出てくるすべてのpに適用

セレクタの擬似クラス・擬似要素

擬似クラスで、リンクに指定
  • セレクタ:hover ->カーソルが要素の上にある時
  • セレクタ:visited ->訪問済みのリンク
  • セレクタ:link ->未訪問のリンク
  • セレクタ:active ->クリックしている時
擬似クラスで、1部のみに指定
  • セレクタ:first-of-type ->最初の要素を指定
  • セレクタ:last-of-type ->最後
  • セレクタ:nth-of-type(n) ->n番目
  • セレクタ:nth-of-type(even) ->偶数
  • セレクタ:nth-of-type(odd) ->奇数
  • セレクタ:not(n) ->n以外
疑似要素
  • セレクタ::before ->要素の直前にコンテンツを追加（contentプロパティが必要）
  • セレクタ::after ->要素の後にコンテンツを追加（contentプロパティが必要）
  • セレクタ::first-letter ->要素の1文字目を指定
  • セレクタ::first-line ->要素の1行目を指定

サイズ・単位

ブラウザの高さ・幅に対してサイズを指定
  • vw（viewport widthの略） ->ブラウザの幅を100vwとしてサイズを指定
  • vh（viewport heightの略） ->ブラウザの高さを100vhとしてサイズを指定
フォントサイズの単位
  • px ->絶対値。相対指定。
  • % ->相対値。親要素を100%としてサイズを指定
  • em ->相対値。親要素を1emとしてサイズを指定
  • rem ->相対値。ルート(html)を1emとしてサイズを指定

4年前に初めてコーディングを勉強した頃に書いたメモが出てきたので、まとめてみました。
今でも初心者なので、間違いなどあれば教えていただけると喜びます。（雑すぎて間違いも何もない気もしますが）

フロントエンドエンジニアになりたいと思って勉強をはじめ、気付いたらデザイナーになっていたので、今でも中途半端なまま。。。
コーディングもちゃんと実務レベルまで引き上げたい。頑張る。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-27T00:03:38+09:00

【CSS】基本的な書き方やプロパティまとめ

解説ではなくチートシートのようなものなので、細かい説明は省略しています。
（初心者のため間違いなどあったらすみません）

CSSの書き方（読み込み方）

HTMLファイルで読み込み

HTMLファイル内で、以下のいずれかの方法を使ってCSSファイルを読み込み、スタイルが反映されるようにします。

index.html
1. CSSファイルに記述し、HTMLファイルのheadタグ内でCSSファイルを読み込む（一般的な方法）
<link rel="stylesheet" href="styles.css" type="text/css">

2. HTMLのタグの中に直接記述
<p style="color:blue">テキスト</p>

3. HTMLファイルのheadタグ内に記述
<style type="text/css">
  color: blue;
</style>
CSSファイルの準備

CSSファイルの冒頭には、以下を記述します。

styles.css
@charset "UTF-8";

あと、必須ではないけれど、最初にリセットCSSで各ブラウザに設定されているデフォルトのCSSをリセットしておくと混乱が減る。

よく使うプロパティなど

コメント

/* このように記述します */

文字
  • color: 文字色
  • font-size: 文字サイズ
  • font-weight: 文字の太さ（400/normal:普通, 600/bold:太字）
  • font-family: 文字の種類
  • letter-spacing: 文字間隔
  • line-height: 行の高さ
  • text-align: 文字の左寄せ、中央寄せ、右寄せ
  • text-decoration: noneで下線を消す
  • font-style: 文字を筆記体（italic）や斜体（oblique）に
余白・位置
  • margin: 外側の余白
    • (margin: 0 auto; で真ん中寄せ)
  • padding: 内側の余白
  • position: ボックスの配置方法の指定
    • relative ->相対位置
    • absolute ->絶対位置
    • fixed ->絶対位置（スクロールしても固定）
  • top, right, bottom, left: 親要素の端からの距離を指定
要素の大きさ
  • width: 幅の指定
  • height: 縦の指定
背景
  • background-color: 背景色を指定
  • background-image: url(ここにURLを入れる); ->背景画像を設定
    • （以下2つを一緒に指定すると、背景画像をいい感じに設定できる）
    • background-size: cover;
    • background-position: center;
線
  • border: 1px（太さ） solid（スタイル） blue（色）; ->線のスタイルを一括で指定
    • スタイル...solid（直線）, dashed（点線）
  • border-bottom: 要素の下のみの線のスタイルを指定（top, right, leftも同様に可能）
表示
  • display:
    • block ->ブロック要素にする（幅と高さを指定できる）
    • inline-block ->インラインブロック要素にする（横幅と高さを指定できる。前後の要素と横に並ぶ）
    • inline ->インライン要素にする（幅と高さを指定できない。上下の余白を調整できない）
    • none ->非表示にする
    • flex ->子要素をいい感じに並べる（オプションたくさんあるので詳しくはぐぐる）
その他、よく使う
  • opacity: 透過（0～1）
  • border-radius: 丸角にする
  • box-shadow: 影をつける(左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 (内側指定);)
  • z-index: 要素の重なり順
  • overflow: はみ出る部分の指定
  • transition: (all 0.3s;) アニメーションに時差をつける（hoverと合わせてよく使う）

セレクタの指定の仕方

セレクタとは

スタイルを指定する対象のことです。

styles.cs
p(セレクタ) {
 color(プロパティ): blue(値);
}
複数の要素選択や、関係による絞り込み

  • 複数の要素の間に半角スペースを入れると、親要素の下のすべての指定した子要素に適用
    ex）sectionの中のすべてのpに適用

  • 「,（カンマ）」を入れると、すべての要素に適用
    ex）h2, h3, h4 {... ->h2 h3 h4すべてのpに適用

  • 「>」を入れると、最初の要素の1階層下の要素に適用
    ex）section > p {... ->section直下にあるpに適用

  • 「+」を入れると、最初の要素と同一階層で後続に登場する1つの要素に適用
    ex）h3 + p {... ->h3と同じ階層で1つ後にあるpに適用

  • 「~」を入れると、最初の要素と同一階層で後続に登場するすべての要素に適用
    ex）h3 ~ p {... ->h3と同じ階層で後に出てくるすべてのpに適用

セレクタの擬似クラス・擬似要素

擬似クラスで、リンクに指定
  • セレクタ:hover ->カーソルが要素の上にある時
  • セレクタ:visited ->訪問済みのリンク
  • セレクタ:link ->未訪問のリンク
  • セレクタ:active ->クリックしている時
擬似クラスで、1部のみに指定
  • セレクタ:first-of-type ->最初の要素を指定
  • セレクタ:last-of-type ->最後
  • セレクタ:nth-of-type(n) ->n番目
  • セレクタ:nth-of-type(even) ->偶数
  • セレクタ:nth-of-type(odd) ->奇数
  • セレクタ:not(n) ->n以外
疑似要素
  • セレクタ::before ->要素の直前にコンテンツを追加（contentプロパティが必要）
  • セレクタ::after ->要素の後にコンテンツを追加（contentプロパティが必要）
  • セレクタ::first-letter ->要素の1文字目を指定
  • セレクタ::first-line ->要素の1行目を指定

サイズ・単位

ブラウザの高さ・幅に対してサイズを指定
  • vw（viewport widthの略） ->ブラウザの幅を100vwとしてサイズを指定
  • vh（viewport heightの略） ->ブラウザの高さを100vhとしてサイズを指定
フォントサイズの単位
  • px ->絶対値。相対指定。
  • % ->相対値。親要素を100%としてサイズを指定
  • em ->相対値。親要素を1emとしてサイズを指定
  • rem ->相対値。ルート(html)を1emとしてサイズを指定

4年前に初めてコーディングを勉強した頃に書いたメモが出てきたので、まとめてみました。
今でも初心者なので、間違いなどあれば教えていただけると喜びます。（雑すぎて間違いも何もない気もしますが）

フロントエンドエンジニアになりたいと思って勉強をはじめ、気付いたらデザイナーになっていたので、今でも中途半端なまま。。。
コーディングもちゃんと実務レベルまで引き上げたい。頑張る。

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

日付別

タグ一覧