投稿日：2020-01-17T23:06:48+09:00

TypeScript+ReactでCSSにtextAlignを使う

以下のように指定してあげればOK。
毎回これで書くのも面倒なのでいい感じの方法が知りたい。
textAlign: "center" as "center"
参考記事

TypeScript type inference issue with string literal - Stack Overflow https://stackoverflow.com/questions/43121661/typescript-type-inference-issue-with-string-literal/43124412

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T14:30:54+09:00

同じテーブル内に複数の外部キーを設定する方法！！

はじめに

某プログラミングスクールで、担当した実装を復習していきたいと思います。
今回は、出品・取引中・売却済みのこの3つをクリックした際に、それぞれにあった商品を
表示させる実装を行いました。

これを実装するにあたって、1つのテーブル内に複数の外部キーを設定する必要があり、
ここで詰まったため、記録として残していきます。

ちなみにこんな感じの実装をしていきます。

工程

今回は、工程を以下に分けて説明をしていきます。
1.実装の大まかな説明とマイグレーションファイルの作成
2.モデルの作成
3.コントローラーの作成
4.hamlでの条件分岐設定
の順で行っていきます。
少し、長いですががんばっていきましょう。

解説

1.実装の大まかな説明とマイグレーションファイルの作成

はじめに出品中・取引中・売却済みを区別するために、
productというテーブル内に、seller_id・auction_id・buyer_idという
userと紐づく外部キーを3つ設定しました。

そして、出品中の際には、productのレコードの中から
seller_id(出品者)にだけ値が入っているレコードをDBから引っ張って来ています。

取引中の場合は、seller_id(出品者)とauction_id(取引者)がいる
productのレコードをDBから引っ張ってきています。

売却済みの場合は、seller_id(出品者)とbuyer_id(買取者)がいる
productのレコードをDBから引っ張って来ることで、
それぞれを区別してDBから取得してきています。

マイグレーションファイルはこんな感じです。
*今回の実装であれば、user側はテーブルを作成しidがあればOKだと思います。
products.rb(マイグレーションファイル)
class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.string :name, null: false
      t.references :seller, foreign_key: {to_table: :users} 
      t.references :buyer, foreign_key: {to_table: :users}
      t.references :auction, foreign_key: {to_table: :users}
      t.timestamps
    end
  end
end
「詰まったポイントその1」
(1)foreign_key: {to_table: :users}
通常であれば、
t.references :user, foreign_key: true
foreign_key: trueのみで外部キーを設定できるのですが、
今回のように、同じテーブル内に複数の外部キーを設定する場合、
foreign_key: trueで定義してしまうと、
カラム名がテーブル名_idになってしまうため、
複数カラムを設定したいときにうまくいかないことがありました。

そのため、{to_table: :テーブル名}で今回使用するテーブルを直接指定する必要があるようです。

「参考記事」

2.モデルの作成
product.rb
class Product < ApplicationRecord
  belongs_to :seller, class_name: "User", optional: true,foreign_key: "seller_id"
  belongs_to :buyer, class_name: "User", optional: true,foreign_key: "buyer_id"
  belongs_to :auction, class_name: "User", optional: true,foreign_key: "auction_id"
end
各、外部キーをuserとアソシエーションを組んでいます。
user.rb
class User < ApplicationRecord
  has_many :saling_items, -> { where("seller_id is not NULL && buyer_id is NULL") }, class_name: "Product"
  has_many :sold_items, -> { where("seller_id is not NULL && buyer_id is not NULL && auction_id is NULL") }, class_name: "Product"
  has_many :auction_items, -> { where("seller_id is not NULL && auction_id is not NULL && buyer_id is NULL") }, class_name: "Product"
end
次に、user.rbに焦点を当てて説明をしていきます。
user.rb
has_many :saling_items, -> { where("saler_id is not NULL && buyer_id is NULL && auction_id is NULL") }, class_name: "Product"
この1文は、出品中のアイテムをproductのレコードから取得するための記述となっています。
今回でいう、出品中の商品とは言い換えると、

「seller_id(出品者)はいるが、まだ、buyer_id(買取者)またはauction_id(取引者)はいないproductのレコード」

を取得すればいいという形となるため、
上記のwhereの記述で制限することで、:saling_itemsカラムには
出品中の商品のみが取得できるという感じです。
user.rb
 has_many :auction_items, -> { where("seller_id is not NULL && auction_id is not NULL && buyer_id is NULL") }, class_name: "Product"
次に、取引中の商品の記述になります。
取引中は言い換えると

「seller_id(出品者)とauction_id(取引者)のユーザーが存在し、buyer_id(買取者)はまだ存在していないproductレコード」

という形となるため、
上記のwhereでの制限となっています。
user.rb
has_many :sold_items, -> { where("seller_id is not NULL && buyer_id is not NULL && auction_id is NULL") }, class_name: "Product"
最後に、売却済みの商品の記述です。
売却済みは言い換えると

「seller_id(出品者)とbuyer_id(買取者)は存在するが、auction_id(取引者)は存在していないproductレコード」

ということになるため、
上記のwhereでの制限となっています。

これで、とりあえずはproductとuser間のアソシエーションは終了です。

「参考記事」

3.コントローラーの作成
1.2の記述で、マイグレーションファイルとアソシエーションを組んだため、
コントローラーでその取得したデーターを取り出す記述を行っていきます。
products.controller.rb(必要な箇所のみ記載)
class ProductsController < ApplicationController
  before_action :set_current_user_products,only:[:p_transaction,:p_exhibiting,:p_soldout]
  before_action :set_user,only:[:p_transaction,:p_exhibiting,:p_soldout]


  def p_exhibiting #出品中のアクション

  end

  def p_transaction  #取引中のアクション

  end

  def p_soldout    #売却済みのアクション

  end

  private

  def set_current_user_products
    if user_signed_in? 
      @products = current_user.products.includes(:seller,:buyer,:auction,:product_images)
    else
      redirect_to new_user_session_path
    end
  end

  def set_user
    @user = User.find(current_user.id)
  end
end
*product.conrollerで行っていますが、productとuserでネストをしている場合は、
user.controllerへ上記の記載をしても大丈夫だと思います。
*current_userを使用しているため、ログインしていない場合idがないため、
エラーが出てしまうことがあります。
その際は、DBへの直打ち等でユーザーを存在させる必要があると思います。(ここはあまり自信がないので、この方法でエラーをはいてしまったら、すみません。)

【解説】
@user = User.find(current_user.id)
この1行によって、まずはログインしているユーザーのレコードを
取得している形となっています。
    if user_signed_in? 
      @products = current_user.products.includes(:seller,:buyer,:auction,:product_images)
    else
      redirect_to new_user_session_path
    end
この記述によって、ログインしているユーザーが所持しているproductレコードのみを取得していきます。

「詰まったポイント　その２」
(1)上記で、指定のuserやprodutのレコードの取得はできた。
だが、そもそもproductテーブルに複数のカラムを指定したが、どうやって・どのタイミングで狙ったidへいれるのかがわかりませんでした。

「解決策」
products.controller.rb
  def new
    @product = Product.new
    @product.product_images.new
  end

  def create
    @product = Product.new(product_params)
    if @product.save
      redirect_to root_path
    else
      redirect_to new_product_path,data: { turbolinks: false }
    end
  end

  private
  def product_params
    params.require(:product).permit(:name product_images_attributes: [:image, :_destroy]).merge(seller_id: current_user.id) #productやご自身のカラムに合わせて変更してください。
  end
まず、seller_idとは、出品者がもつidなため、出品する段階のnew・createの段階で、
そのユーザーが持っているidをseller_idへいれることによって解決しました。
@product.update(buyer_id: current_user.id)
また、buyer_idに関しては、上記の一行を購入する画面でいれることによって実装しました。

4.hamlでの条件分岐設定
最後に、コントローラーで取得してきた値を繰り返し処理する記述を加えていきます。

上記の画像のように、productに指定したレコードがある場合と、
ない場合で表示の仕方を変更する必要があるため、以下でif文による条件分岐を行っていきます。
p_exhibiting.html.haml(一部のみ表示しています。)
- if @user.saling_items.present?
  - @user.saling_items.each do |product|
    = link_to product_path(product),data: { turbolinks: false },class:"item_content" do
      .item_content__image
        = image_tag product.product_images[0].image.to_s,size:"58x48"
      .item_content__right
        .item_content__right--name
          =product.name
        .item_content__right__good
          .item_content__right__good--goods
            = icon("far","heart")
            0
          .item_content__right__good--comment
            = icon("far","comment-alt")
            0
          .item_content__right__good--exhibition
            出品中
      = icon('fas', 'angle-right', class: 'item_content__icon')
- else
  .pmain__bottom
    = image_tag "", class: "pmain__bottom--img", size: "100x100"
    .pmain__bottom--text
      出品中の商品がありません
*今回は、長いため出品中のみの記載としています。

特に重要な部分を記載していきます。
- if @user.saling_items.present?
この一行で、userのsaling_itemsがある場合は以下に記述した
- @user.saling_items.each do |product|
のsaling_itemsを繰り返すようにしています。

以上です。

最後に

長い行を読んでいただきありがとうございました。
所々、切り抜いて記事を書かせて頂いているため、間違っている箇所があった際には、
私の記述でエラーを起こしてしまい申し訳ありません。
また、間違っている箇所がありましたら、コメントをいただけると幸いです。
ご視聴ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T14:24:08+09:00

Classとid

classとid

classとidについて説明します。
classとidはWEBサイトを作る上で、最も重要な概念と言っても過言ではありません。
しっかりここで復習しておきましょう！

classとidとは

HTMLにおけるclassとidは、「他の要素と識別するためのラベルの役割を果たすもの」でしたね！
ページ内で、同じタグを使いたいけど、特定の部分だけ装飾を変えたいといった時に使用します。
例えば、以下のようなコードがあったとします。そして「これだけ強調したい！」の文章のみに装飾を加えるにはどのようにCSSを書けばいいでしょうか？
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    
    <p>これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
以下のように、pタグに対してCSSを当ててしまうと、、、
style.css
/* pタグに直接CSSを当ててしまっている */
p {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
当然、以下のように、全ての文章が赤文字で強調されてしまいます。

これでは、目的を達成することができません。
ここで登場するのが、class（またはid）でした。※idに関しては後ほど説明します。
以下のコードのように、
1. htmlファイルで、特定の装飾を当てたいタグに対してclassを指定し、
2. CSSファイルで、そのclassに対してCSSを当てることで、
そのclassが当たっている要素のみにスタイルを当てることができます。
以下の「class="bold"」の記述が、他のpタグとの差別化を図るラベルの役割を果たしていることがわかるでしょうか？
①HTMLファイルにclassを追加
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
②classに対してCSSを当てる
/* boldクラスにCSSを当てる */
.bold {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
CSSファイルでclassにスタイルを当てる際は、「ピリオド(.)」と「class名」と記述するのは覚えてましたか？
覚えていた方は素晴らしい！プログラミングの才能があります！
※忘れていた方も、たった今覚えたはずなので、みなさんプログラミングの才能がありますね(^^)
ちなみに、上のコードには出てきていませんが、idにスタイルを当てる際は、「ハッシュ(#)」と「id名」を記述します。これも併せて覚えておきましょう！
すると以下のような表示になり、特定の部分だけ強調することができました。

classとidの違い

上記でチラッとidについて触れましたが、classとidの違いはなんでしょうか？
結論から言うと、基本的には同じです。
特定の部分だけ装飾を変えたいといった時に、その部分にidを指定することで、他の要素と差別化するラベルの役割を果たします。
先ほどのclassで指定したコードをidで指定したバージョンに書き換えると、index.htmlとstyle.cssは、それぞれ以下のようになります。
①class→idに変更
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
②「ピリオド(.)」を「ハッシュ(#)」に変更
/* 「ピリオド(.)」を「ハッシュ(#)」に変更 */
#bold {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
以上でidにCSSが当たるようになりました。見た目に関しては、classにCSSを当てている時と変化はありません。

これまでの例だと、classもidも特に違いはないように思えるかもしれません。しかし、classとidには明確な違いが1点だけあります。
それは、「同じhtmlファイル内で、使用できる回数に違いがある」という点です。
それぞれの使用できる回数は、以下の表の通りです。

class id

使用できる回数何回でもOK 1回のみ

つまり、以下のコードは、正しいですが、
    
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
以下のコードは、同一ページ内で、同じidを複数回使っているので、HTMLの文法違反となります。
    
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
なぜこれが文法違反なのか、文法違反によりどのような弊害があるのかに関しては、他のプログラミング言語の話が絡んでしまい混乱を招くため、今回は割愛します。
ここで知っておいて役立つことは、idは上記の文法上の制限により、使い勝手が悪いため、実際のWEBサイト制作において、特定の要素のみにCSSを当てたいときは、基本的にclassを使うことが多いということです。ただし、idを使用しているサイトは実在するので、idに関しては、知識として知っておくとよいでしょう。

実際にやってみよう

では、classについて学んだところで、実際にclassを使ったワークをやってみましょう！
まずはみなさんに作って頂く完成の見本を画像で以下に示します。

今回はみなさんに、3色のボタンを作ってもらいます！これまで学んだclassについての知識を活用して、見本通りの見た目を完成させてください。
まずは問題に取り組むための準備の手順を以下に示します。

【手順1】

Cloud9上で、「html_work02」というフォルダを作成してください。

【手順2】

手順1で作成したhtml_work02フォルダの中に、「index.html」と「style.css」という名前のファイルを作成してください。

【手順3】

手順2で作成したindex.htmlに以下のコードを転記してください。転記するファイルを間違いないように注意しましょう！※コピペで構いません。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <div class="inner">
      <h2>ボタンを作ってみよう！</h2>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
    </div>
  </body>
</html>
同様に、「style.css」に以下のコードを転記してください。赤いバツ印が出てくるかと思いますが、現段階では気にせず、先に進んでください。
style.css
???? {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
???? {
  background-color: blue;
}
???? {
  background-color: red;
}
???? {
  background-color: green;
}
.inner {
  width: 960px;
  margin: 100px auto 0;
}
【手順4】

index.html、style.cssをそれぞれ保存したら、一度ブラウザで確認してみましょう！先ほどと手順は一緒です。
1. Cloud9で以下の動画のように、index.htmlを開いた状態にする。
2. 画面上部の「Preview」を押す。
3. 「Preview File index.html」を押す。
4. 画面右側にプレビュー画面が表示するので、画面右端の矢印マークを押す。
5. すると、新しいタブでindex.htmlの内容が表示される。
【index.htmlファイルをブラウザで表示する手順】

ここまでの段階では、以下の画像のような見た目になっているはずです。

これでやっと準備が整いました。それでは、先ほど用意した「index.html」と「style.css」のコードをもう一度見てみましょう。
それぞれ「????」の記述があるはずです。今回みなさんにやってもらうことは、この「????」の部分を書き換えて、見本通りの3色のボタンを完成させることです。ちょっと難しいかもしれませんが、頑張って取り組んでみましょう！

問題：以下の「????」の部分を書き換えて、見本通りの3色のボタンを完成させましょう。

※「????」以外の部分は編集する必要はありません。
ヒント：index.htmlに書くclassは1つとは限りません。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <div class="inner">
      <h2>ボタンを作ってみよう！</h2>
      
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
    </div>
  </body>
</html>
style.css
/* 以下の「????」にclassを書き加え、「ボタンの形を作るcss」を完成させましょう */
???? {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「青色」にするcssを完成させましょう */
???? {
  background-color: blue;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「赤色」にするcssを完成させましょう */
???? {
  background-color: red;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「緑色」にするcssを完成させましょう */
???? {
  background-color: green;
}
/* 以下のコードは見た目を整えるためなので、編集する必要はありません */
.inner {
  width: 960px;
  margin: 100px auto 0;
}
ワークの解答はこちら！

	class	id
使用できる回数	何回でもOK	1回のみ

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T08:59:31+09:00

ゲーム2を作ってみた

タイトルはyui2となっています。

https://syui.cf/imgame2

まずロゴを作りました。数字の部分、最初はフォントを使おうと思ったんですが、めんどくさいですしね、でもしっくりこなかったので、自分で作る羽目になりました、2です。

今回もアイテムから背景、キャラクター、シナリオなどを設計しました。

例えば、モンスターボックスというアイテムが登場するのですが、以下のようなデザインから構成されています。なんとなく線を引いたり、消したり、塗りつぶしてみたり。

シナリオに関しては、最初のシリーズで謎だった部分の伏線がいくつか回収されていると思います。

イラストで描いている背景、アイテム、キャラクターは方向性がそれぞれに決まっているのでやりやすいです。

やらないこととやることを決めていて、やらないことはやりません。それは面白くないことだったり、めんどくさいことだったり、やたら時間がかかることだったり。

シナリオに関しては、やはり非公開で書いていた小説が原案になっています。シリーズ1では暗くなってしまうので、バッサリと切り捨てた部分を少し拾いました。

キャラクターに関しては、キョウスケ、ポンタ、オクトカットはゲームからの参加で、それによって原案キャラも若干影響を受けていると思います。

ここから少しキャラクターに関する話をします。

例えば、yuiに出てくるキャラで私はどれに当てはまるのかってよく聞かれるんですが...うそですきかれたことありません！で、自分がどのキャラに当たるかと言うとそりゃもちろん、アイですよ！...という冗談は置いといて、私はおそらく、誰でもあって、誰でもないのだと思います。

私は以前、こんなコメントを見たことがあって、作者が自分のキャラのセリフにはっとさせられたという話に「作者は自分の思いをキャラAに語らせていて感動的」とコメントがついていました。

これですね、大半の人がコメントと同じような意見を持つと思うんですけど、私が思ったのはおそらくそうではないなと。

作者が作ったキャラでも、あいつらは勝手に動いて勝手にしゃべるので、特に作者がこうしゃべらせているみたいなことって少ないです。作者は単にキャラが勝手に喋ったそれをですね、メモしたり、記録したりですね、するだけですから、おそらく、本当に自分が作ったキャラのセリフにはっとさせられたんだろうなーって思ったんです。

一方で、そうは言っても作者が作ってんでしょと言われると、確かにそうで、それはやはり、どこかにあるからだと思うんです。

なので、私は、どのキャラでもないし、どのキャラでもあるなあと今の所はそう思ってたり。

話を変えて、次はモンスターの話です。

(本作ではまだ未登場)

今回は、モンスターが登場しますが、モンスターを作るの結構大変でした。特に、アイテムの方向性でデザインするのか、キャラクターの方向性でデザインするのかで迷いました。なので、その中間をとって、基本は四角や三角の図形で構成するものの、やはり躍動的に表現する部分も可という方向で行くことにしました。各々の部品もシンプルにすることを心がけ、あまり複雑にしてしまうと、あとで描くの大変ですからね...。

あと、配色ですが、私は1キャラ、1フィールド、1アイテムにつき3,4色と決めているところがありますので、モンスターも同じ。それでも配色は、難しかったし、悩みます。ただ、鳥なら鳥、ネコならネコ、ドラゴンならドラゴンで、一番に思いつく色ってあるじゃないですか。私の場合、それを基本色にしました。

最後にキャラクター紹介ページを作りました。

https://syui.cf/gamechara/

これは、漫画とか読む人はわかると思うんですが、冒頭にありますよね。私は全く見ないんですけど、というかゲームも説明書すら読まなかったり...でも作る側からすると、やっぱり「わかりにくいかな、こいつ誰ってなったりしない、途中から入って大丈夫？」みたいなことをちょっとだけ気にします...うそ、すごく気にします。なので、作りました。

ゲーム作るのとか、面倒でしたけど、でも、面白かったですよ、楽しかった。

次はどんなお話にしましょうか。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T04:24:07+09:00

【CSS】左右中央寄せ（ブロック要素、インライン要素、インラインブロック要素）

margin: 0 auto;

ブロック要素を左右の中央寄せ（まんなか）にする
必ずwidthを指定する

この赤いブロック要素をまんなかに表示したい。
例.html
<p>左右のまんなか</p>
例.css
p {
  background-color: red;
  color: white;
  width: 300px;
  margin: 0 auto;
}
CSSの一番下に margin: 0 auto; をコーディング。

Web
↓

左右のまんなかに表示されました！
注意事項としては必ず width で幅を指定しないとダメです。

text-align: center

インライン要素、インラインブロック要素を左右の中央寄せ（まんなか）にする

詳しくは【CSS】text-align の text-align: center; をご参考ください

まとめると・・・

ブロック要素インライン要素インラインブロック要素

margin: 0 auto; text-align: center text-align: center

となります

ブロック要素	インライン要素	インラインブロック要素
margin: 0 auto;	text-align: center	text-align: center

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T04:20:51+09:00

【CSS】text-align

text-align

ブロック要素のなかにある、インライン要素、インラインブロック要素の配置を指定できる

text-align: left;

左寄せ
例.html
    <div class="position">
      <span>ここだよ</span>
    </div>
例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: left;
}
Web
↓

文字が左寄せになっているのがわかるかと思います

text-align: center;

中央揃え
例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: center;
}
Web
↓

文字が中央揃えになっています

text-align: right;

右寄せ
例.css
.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: right;
}
Web
↓

右寄せになりました

注意事項

今回であれば text-align を
例.css
span {
  text-align: right;
}
上記のように span にかけてしまいそうですが
span にかけてしまっても何も反応しません。
理由は一番最初に書いたとおり

ブロック要素のなかにある、インライン要素、インラインブロック要素の配置を指定できる

からです。
つまり今回で言えば幅：300px のブロック要素のなかにある
インライン要素の span を右寄せしてね
っていう命令をすることで span は右寄せになります。

なので span に text-align: right; をかけてしまっても
え？え？右ってどこまで右に行けばいいの？？
text-align: center; なんてかけようもんなら
右も左もわかんないのに中央なんてどこなのさ！
と span ちゃんが困ってしまって何も反応しません

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T04:18:59+09:00

【CSS】border-radius

border-radius

角を丸める

角を丸めるとはなんじゃそりゃ？？
という感じですが、図をみてもらうと一目瞭然です

図のように角が丸くなります
例.html
    <div class="square">
      <p>四角でーす</p>
    </div>
    <div class="corners">
      <p>角丸でーす</p>
    </div>
例.css
.square {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
}

.corners {
  width: 150px;
  height: 100px;
  background-color: orange;
  text-align: center;
  border-radius: 30px;
上記では border-radius: 30px; で指定しましたが
数字を 50px に指定すると・・・

30px に比べてさらに角が丸くなりました
・・・ということは今度は 10px にして数字を小さくすると

さっきに比べて角張っちゃいました
つまりは・・・

数字が大きくなればなるほど角は丸くなるということがわかりました

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T01:59:34+09:00

【CSS】hover

hover

マウスのポインタを要素の上に置いたときに実行される
CSSの書き方はセレクタ:hover とする
例.html
    <p>ここにカーソルのせてね♪</p>
例.css
p:hover {
  background-color: red;
}
このように設定してここにカーソルのせてね♪ の文字の上にマウスのカーソルを乗せると・・・

↓

背景色が赤になりました

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T01:57:29+09:00

【CSS】display(ブロック要素、インライン要素、インラインブロック要素)

display:block;

インライン要素をブロック要素に変更する
例.html
    <span>インライン要素だよーん</span>
例.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
}
このように width: 300px; と height: 100px; というふうに幅と高さを指定した。
しかしWebでは・・・
↓

このようにしか表示されない。
これはHTMLの＜span＞タグがインライン要素のため幅と高さを指定することができない。
ではどうすればいいのかというと、幅と高さを指定できるのはブロック要素なのでブロック要素にしてしまえばいい

CSSを下記のように追加して・・・
例.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
  display: block;
}
Web
↓

はい、できた

display:inline;

ブロック要素をインライン要素に変更する
例.html
<p>ブロック要素だよーん</p>
例.css
p {
  background-color: red;
  width: 300px;
  height: 100px;
}
Web
↓

＜p＞タグはブロック要素のため高さも幅も指定できます
これを下記のようにCSSに display:inline; を追加すると・・・

インライン要素になりました

ブロック要素とインライン要素まとめ

以前、ブロックレベル要素とインライン要素についてまとめたのですが、意味をまとめただけだったので、ここで前回に追加してまとめてみます。

ブロック要素インライン要素

幅（width） ○ 指定できる ✗ 指定できない

高さ（height） ○ 指定できる ✗ 指定できない

内側余白（padding） ○ 指定できる △ 左右のみ指定できる

外側余白（margin） ○ 指定できる △ 左右のみ指定できる

display:inline-block

ブロック要素とインライン要素の特徴をあわせもつ（インラインブロック要素という）
幅と高さが指定できる
内側、外側ともに余白が設定できる
配置を横並びにできる

ブロック要素はというと
↓

このように縦並びとなる。

インライン要素はというと
↓

このように横並びとなる。
インラインブロック要素は横並びとなる。
もう一度インラインブロック要素を含めてまとめると

ブロック要素インライン要素インラインブロック要素

幅（width） ○ 指定できる ✗ 指定できない ○ 指定できる

高さ（height） ○ 指定できる ✗ 指定できない ○ 指定できる

内側余白（padding） ○ 指定できる △ 左右のみ指定できる ○ 指定できる

外側余白（margin） ○ 指定できる △ 左右のみ指定できる ○ 指定できる

配置縦並び横並び横並び

このようになります

	ブロック要素	インライン要素
幅（width）	○ 指定できる	✗ 指定できない
高さ（height）	○ 指定できる	✗ 指定できない
内側余白（padding）	○ 指定できる	△ 左右のみ指定できる
外側余白（margin）	○ 指定できる	△ 左右のみ指定できる

	ブロック要素	インライン要素	インラインブロック要素
幅（width）	○ 指定できる	✗ 指定できない	○ 指定できる
高さ（height）	○ 指定できる	✗ 指定できない	○ 指定できる
内側余白（padding）	○ 指定できる	△ 左右のみ指定できる	○ 指定できる
外側余白（margin）	○ 指定できる	△ 左右のみ指定できる	○ 指定できる
配置	縦並び	横並び	横並び

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T01:55:27+09:00

【CSS】文字の間隔

letter-spacing

文字の間隔を指定
例.html
    <p>あいうえお</p>
通常だとこのとおり
↓

CSSを適用すると・・・
例.css
p {
  letter-spacing: 20px;
}
文字間隔が広がりました

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-17T01:54:35+09:00

【CSS】透明度

opacity

要素を透明にする
透明度は0.0〜1.0の数値で指定。
0が完全に透明となり1が完全に不透明

透明度を設定しなかったら・・・
例.html
    <div class="one">
      <p>透明度 1.0</p>
    </div>
    <div class="half">
      <p>透明度 0.5</p>
    </div>
    <div class="zero">
      <p>透明度 0</p>
    </div>
例.css
p {
  font-size: 30px;
  background-color: red;
  width: 200px;
  height: 100px;
  float: left;
  margin-right: 10px;
}
もちろんこのとおり。
CSSを適用すると
例.css
.one {
  opacity: 1.0;
}

.half {
  opacity: 0.5;
}

.zero {
  opacity: 0;
}
このとおり
透明度0は全て透明になってしまうので、何も映らなくなりました

　 Tweet
Qiitaで続きを読む

20200117のCSSに関する記事は11件です。

TypeScript+ReactでCSSにtextAlignを使う

参考記事

同じテーブル内に複数の外部キーを設定する方法！！

はじめに

工程

解説

最後に

Classとid

classとid

classとidとは

classとidの違い

実際にやってみよう

【手順1】

【手順2】

【手順3】

【手順4】

問題 ：以下の「????」の部分を書き換えて、見本通りの3色のボタンを完成させましょう。

ゲーム2を作ってみた

【CSS】左右中央寄せ（ブロック要素、インライン要素、インラインブロック要素）

margin: 0 auto;

text-align: center

【CSS】text-align

text-align

text-align: left;

text-align: center;

text-align: right;

注意事項

【CSS】border-radius

border-radius

【CSS】hover

hover

【CSS】display(ブロック要素、インライン要素、インラインブロック要素)

display:block;

display:inline;

ブロック要素とインライン要素まとめ

display:inline-block

【CSS】文字の間隔

letter-spacing

【CSS】透明度

opacity

日付別

タグ一覧

問題：以下の「????」の部分を書き換えて、見本通りの3色のボタンを完成させましょう。