投稿日：2020-01-22T23:47:13+09:00

文字を右寄せにする

以下のように親要素の中にpタグがあります。
文字は左寄せになっています。
pタグのdisplayはblockのため横幅は、親要素の横幅に合わせられていますので親要素が隠れています。
<div>
  <p>hello world.</p>
</div>
div {
  background: gray;
  width: 400px;
}

p {
  background: skyblue;
}![スクリーンショット 2020-01-22 23.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569169/a2eaf841-8e11-3fb5-b16f-2fbe4c7d8173.png)
まず、pタグの横幅を文字数に合わせます。
displayをinline-blockとし、marginが発生するのでmarginを0にします。
div {
  background: gray;
  width: 400px;
}

p {
  background: skyblue;
  display: inline-block;
  margin: 0;
}
pタグを右寄せにするのでpタグを float: right にします。
そのときにdivタグ float: left にします。
div {
  background: gray;
  width: 400px;
  float: left;
}

p {
  background: skyblue;
  display: inline-block;
  margin: 0;
  float: right;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T23:16:22+09:00

メディアクエリ_HTML&CSS_20200118

https://bitsofco.de/how-calc-works/
https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.htmla
【calc（）】
CSS関数
加算、減算、乗算、除算が可能

width: calc(100% - 50px);
幅いっぱいから50px引いた幅を指定

width: 33.33%;
↓
width: calc(100% / 3);

HTML

CSS
media (max-width: 670px) {
.u-display__pc {
display: none;
}
}
画面幅が671px以上の場合には改行を行う。
画面幅が670px以下の場合には改行を行わない。
これにより、スマホなどで表示を行う際に綺麗に枠に合わせた文字出力が行われる。

CSS
position: fixed;
メニューの画面上部固定などに使える

transform: rotate();
要素を回転表示する(使い方わからない)

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T23:13:09+09:00

CSS 要素を下揃えにする

以下のように親要素の中にboxがあります。
上揃えになっています。
    <div class="wrapper">
      <div class="box"></div>
    </div>
.wrapper {
  background: gray;
  width: 600px;
  height: 400px;

}

.box {
  background: yellow;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}
boxを下揃えにします。
displayをflex、縦ならびにしたいのでflex-directionはcolumnとなります。
さらにその状態から逆方向に並べたいのでflex-directionをcolumn-reverseとします。
.wrapper {
  background: gray;
  width: 600px;
  height: 400px;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  background: yellow;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T21:02:33+09:00

p、h1要素の横幅を文字数合わせる

pタグ、h1タグの要素の横幅はデフォルトでは親要素の横幅に合わせられています。
<body>
    <h1>hello world.</h1>
    <p>hello world.</p>
  </body>
h1 {
  background: skyblue;

  /* デフォルトの状態
　display: block */
}

p {
  background: pink;

  /* デフォルトの状態
　display: block */
}
これはpタグ、h1タグはデフォルトのdisplayプロパティの設定がblockとなるためです。

pタグ、h1タグのようなデフォルトのdisplayがblockの要素の横幅を文字数に合わせて設定する場合は以下のようにCSS設定をします。
h1 {
  background: skyblue;

  display: inline-block;

}

p {
  background: pink;

  display: inline-block;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T20:43:59+09:00

jQueryのメソッド

jQueryとこの記事について

『jQuery』とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ。

　jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる。

　jQueryを勉強中（ど素人）なのですが、復習も兼ねて学んだメソッドを
　下記にメモとして記述していこうと思います。随時更新していきます。

hide

セレクタ（HTMLのタグ名やclass名,idなどを指定する）で指定した要素を隠すことができる。

　例：　$('h1').hide();

show

セレクタで指定した隠れている要素を表示することができる。

　例：　$('h1').show(slow);

fadeOut

セレクタで指定した要素を徐々に隠すことができる。

アニメーションの速度は（）内に引数として指定することができる。（1.0秒 → １０００、slowなど）

　例：　$('.class').fadeOut(1000);

fadeIn

セレクタで指定した要素を徐々に表示ことができる。

　例：　$('.class').fadeIn(slow);

slideUp

セレクタで指定した要素を下から上にスライドしながら隠すことができる。

　例：　$('#id').slideUp(1000);

slideDown

セレクタで指定した要素を上から下にスライドしながら表示することができる。

　例：　$('#id').slideUp(slow);

css

セレクタで指定したCSSを変更することができる。引数①にプロパティ、引数②にプロパティの値を設定する。

　例：　$('p').css('color','blue');

　※ちなみに、
　　　 $('img').css('display','none'); ⇦　hideメソッドと同じ
　　　 $('img').css('display','block'); ⇦　showメソッドと同じ

text

セレクタで指定した要素のHTMLの中身を引数で指定した内容に書き換えることができる。

　例：　$('p').text('アイウエオ');

html

セレクタで指定した要素の中身のHTMLを引数で指定したものに書き換えることができる。

　例：　$('p').html('アイウエオ');

find

セレクタで指定した要素の子孫要素から、引数で指定した要素を全て取得することができる。

　例：　$('.class').find('p');

　　この場合、'.class'というクラス内の'p'要素を取得することができる。

children

セレクタで指定した要素の子要素（１階層分）から、引数で指定した要素を取得することができる。

　例：　$('.class').children('p');

addClass

セレクタで指定した要素に引数で指定したクラスを追加することができる。

　例：　$('.class1').addClass('.class2');

removeClass

セレクタで指定した要素から引数で指定したクラスを取り除くことができる。

　例：　$('.class1').removeClass('class2');

hasClass

セレクタで指定した要素が引数で指定したクラスを持っているか判定することができる。

　例：　$('.class1').hasClass('class2');

　・if文の条件式として設定することができる
　
　　　if($('.class1').hasClass('class2'))
　　　{
　　　　　// 処理内容
　　　}

eq

セレクタで指定したオブジェクトから引数で指定した数値と同じインデックス番号をもつ要素を取得することができる。

　例：　$('li').eq(2).css('color','red');

index

セレクタで指定したオブジェクトにおいて、引数で指定した要素が存在するインデックス番号を取得することができる。

　例：　$('li').index($('active'));

prev

セレクタで指定したオブジェクトの同じ階層の１つ前の要素を取得することができる。

例：　$('#id').prev().css('color','red');

next

セレクタで指定したオブジェクトの同じ階層の１つ次の要素を取得することができる。

例：　$('#id').next().css('color','blue');

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T20:23:39+09:00

初心者によるプログラミング学習ログ 217日目

100日チャレンジの217日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

217日目は

おはようございます
217日目
・Vue.js
・Css設計

教科書的なインプット重視学習した#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 21, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-22T00:33:25+09:00

【CSS】position: fixed; と z-index

position: fixed;

指定した位置に要素を固定
位置は top, bottom, left, right を使う

上の動画をご覧いただくと、背景だけが動き
ずーっとログインボタンが同じ位置にあるのがわかるかと思います。
これは position: fixed; でログインボタンを固定しているためです。
ログインボタンCSS.
position: fixed;
  top: 50px;
  left: 500px;
【CSS】position: absolute; と position: relative; のときにも説明しましたが、サイトの左上を始点と考えて

上から 50px
左から 500px

のところにログインボタンを配置して
position: fixed; でログインボタンよ、そこから動くんじゃない！と命令しているわけです。

z-index

要素の重なりの順番を指定する。
０を基準として数字が大きいほど上に重なる。
必ず position プロパティと一緒につかう。

さきほどの動画ですが、のんびりとしてとてもきれいな風景なので気球に乗って景色を観覧するのもいいなと思い、気球に乗ることにしました

配置したのが下の動画になります

ありゃりゃりゃりゃ・・・！
気球が前にきてログインボタンが隠れてしまったじゃないか・・・！
これは気球女子がじゃまだ。。
なんとかせねば

・・・というときに使うのが z-index です
ログインボタンcss.
  position: fixed;
  top: 50px;
  left: 500px;
  z-index: 1;
z-index は 0 を基準として数字が大きくなるほど上に重なる性質をもっているので、上にきてほしいログインボタンに 1 を設定しました。
z-index を使用するときは必ず position プロパティを使用するのがルールです。

では動画を確認してみましょう

気球女子が重なることなく、ログインボタンが上になりました