What's New Qiita

20200516のCSSに関する記事は9件です。

  • 投稿日：2020-05-16T23:36:43+09:00

HTMLのインライン要素とブロック要素

HTMLのインライン要素とブロック要素について、

なんとなくの感覚でスタイルをあてていることが多いので、復習。

インライン要素

  • 横並びに表示され、縦幅・横幅を指定できない。
  • cssでdisplay:block;をあてるとブロック要素の性質を与えれて縦並びにできる。
  • display:inline-block;はインライン要素とブロック要素の両方の性質を併せ持ち、横並びで表示されるが、高さが指定できる。

ブロック要素

  • 縦並びに表示される。
  • cssでdisplay:inline;をあてるとインライン要素の性質を与えれて横並びにできる。

インライン要素とブロック要素のざっくりとした見分け方は、
横に並べばインライン要素。
縦に並べばブロック要素。

また、スタイルがあたる優先度はタグ→クラス→id。
ただし、親要素、子要素なども含めると変わってくる。。。

インライン要素か、ブロック要素か、理解した上でコーディングするのが大事だと思った。

例えば、

「は縦並びにならないのか。」

と、

「はインライン要素だから縦並びにならないのか。」

では、文章にすると少しの違いだけどコーディングしていく上で、大きく変わってくると思う。

本当に基礎基本なことで今更なことですが、しっかりとこういったことも自分の理解を深めるために書き残していこうと思いました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T23:05:44+09:00

Expressでcssとjavascriptを読み込む方法

1. ディレクトリ構成

Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。

スクリーンショット 2020-05-16 22.33.17.png

詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。

2. css作成

publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。

3. javascript作成

publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。
javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、
その点を考慮した実装としておいてください。

4.適用

viewsフォルダに作成した(プロジェクト作成時は1ファイルのみ作成されている)テンプレートエンジンのファイルに読み込みをさせていきます。

4-1. cssの場合

おなじみ、linkタグを使いましょう
e.g.
<link rel='stylesheet' href='/stylesheets/style.css' />
publicフォルダ直下のstylesheetsフォルダのstyle.cssファイルなので良いですね？

4-2. javascriptの場合

こちらもおなじみ、scriptタグを使いましょう
<script type="text/javascript" src='/javascripts/test.js'></script>
こちらも問題ないですね？

5.　最後に

まだ終わりません。
生htmlと違い、タグで読み込むだけでは表示ができません。
どうしたら良いかと言うと、ディレクトリ構成の中にある、app.jsファイルに1行書き込みます。
app.jsはルーティングを定義したりしていますので、全体のコントローラと思ってください。
そこで以下を追加します。
app.use(express.static('public'));
若しくは
app.use(express.static(path.join(__dirname, 'public')));
※__dirnameは現在実行されているファイルの絶対パスが入っています。
これで表示ができると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T18:45:29+09:00

[CSS]画像を重ねる時、positionやz-indexを反射的に使っていませんか？

CSSで画像を重ねて表示させたいだけなのに、
position:rerative、absoluteやz-indexを反射的に使っていませんか？

背景画像に別の画像を単純に重ねるだけなら、
CSS1行だけで表現することができます。
もっと簡単に実装してしまいましょう！

完成イメージ

cat.PNG

テキスト：タイトルテキスト
画像：木目調のテクスチャ
画像：猫
の3点を今回は表示します。

サンプルコード

main.html
<div class="aClass bClass">
  タイトルテキスト
</div>

テキストは、HTMLの中に直接書いています。

main.css
.aClass {
        background: no-repeat bottom right 
        url(画像のパス),
        no-repeat
        url(画像のパス);
}
.bClass {
        color: #fff;
        height: 200px;
        width: 320px;
}

画像を重ねているのは、aClassの方だけです。
１番上のurl(画像のパス),が手前に表示されます。
猫の画像をbottom rightで右下に配置しています。

bClassは、テキストの色などを指定しています。
画像の重ねるサンプルがわかりにくくなってしまうので別にしています。

[応用]画像を３つ重ねたい場合

画像を３つ重ねたい場合は、url(画像のパス)を増やすと、重ねる画像を増やすことができます。

まとめ

position:rerativeやz-indexは大変便利です。
やろうと思えばなんでも配置できてしまいます。

ただ後になって修正しようとすると、
どれが親要素で子要素なの？、画像の重ね順はどうなってるの？
と、調べる手間が発生してしまいます。

単純に重ねたいだけであれば、こういった書き方ができることも知っておくとコーディングの幅がもてます！

【参考】CSS での複数の背景の利用方法

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T16:47:40+09:00

【HTML, CSS基礎】インライン要素、ブロック要素の配置方法

HTMLとCSSの基礎をすぐ忘れてしまうので、メモしたいと思います。

ブロック要素、インライン要素とは

ブロック要素

文字通りかたまりを表す要素のことで、箱をイメージするとわかりやすいと思います。
ブロック要素は高さや幅を指定することができます。
このブロック要素の大きさを調整して、ウェブサイトをおおまかな見た目を作っていきます。

例) divタグなど

インライン要素

文章の一部として扱われる要素で、主にブロック要素の中に入れて使用します。
インライン要素は高さや幅の指定ができないので、そのまま使うと狙い通りの配置にならずダサくなります。
なので、インライン要素は必ずブロック要素の中に入れて使うようにしましょう。

例) iタグ、aタグ、inputタグ、buttonタグ、pタグなど

なぜ要素を把握することが重要なのか

ブロック要素とインライン要素では大きくコーディングのやり方が変わってくるからです。
具体的にどう違うのかは次で説明します。
必ず、どちらの要素なのかを知った上でタグを使うようにしましょう。

要素ごとの配置方法

インライン要素の左右中央寄せ

インライン要素を親のブロック要素の幅に対して、左右中央寄せしたいときのCSSの記載です。
親ブロックに対してtext-align: centerを適用します。

（補足）
text-align: centerは一つ親のブロックに対して左右中央寄せされ、二つ以上親のブロックは無視されます。

インライン要素の上下中央寄せ

インライン要素を親のブロック要素の高さに対して、上下中央寄せしたいときのCSSの記載です。
親ブロックに対してline-height: ○○px（親ブロックのheightに合わせる）を適用します。

ブロック要素の左右中央寄せ

ブロック要素をその親ブロックの幅に対して、左右中央寄せしたいときのCSSの記載です。
こちらは２つ方法があります。

①　動かしたいブロック要素にmargin: 0 autoを適用します。
　　基本的にはこれを使ったほうがいいです。

②　動かしたいブロック要素の親要素にdisplay: flexとjustify-content: centerを適用します。
　　こちらはフレックスボックスと呼ばれる手法になり、
　　中央寄せ以外にも様々な配置を実現することができる便利な手法になります。

しかし、display: flexには要素を横並びするという役割もあるため、結果として意図した配置にならないことがあります。そういう意味では①の方法を使ったほうが事故が起こりにくいです。

ブロック要素の上下中央寄せ

ブロック要素をその親ブロックの高さに対して、上下中央寄せしたいときのCSSの記載です。
親ブロック要素に対してdisplay: flexとalign-items: centerを適用します。

まとめ

以上まとめますと、コーディングをする際は要素がブロック要素なのかインライン要素なのか把握しましょう。
その理由は、要素によって配置の仕方が変わってくるからということでした。
具体的には、下のようにCSSを記載しました。

  • インライン要素の左右中央寄せ　⇒　親要素にtext-align: center
  • インライン要素の上下中央寄せ　⇒　親要素にline-height: ○○px（親ブロックのheightに合わせる）
  • ブロック要素の左右中央寄せ　⇒　動かしたい要素にmargin: 0 auto
  • ブロック要素の上下中央寄せ　⇒　親要素にdisplay: flexとalign-items: center

もっといい方法はあると思いますが、ひとまずこのやり方で問題なくviewを作れているのでメモしました。
こうした方がいいだったり、アドバイス等ありましたらコメントくださると幸いです。
もっとコーディングに関しての知識が深まればまた更新したいと思います。
以上、ここまで読んでくださり、ありがとうございました。では！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T10:55:12+09:00

HTML、CSS番外編②～Webアイコンフォント、Font Awesomeを使ってみよう‼～

超便利なFont Awesomeを使って、Webアイコンフォントを手に入れよう

今回はWebページ内にアイコンを導入するやり方を紹介していきます:relaxed:
Font Awesomeというサービスを使って、簡単にWebアイコンフォントが手に入ります:point_up_tone2:
Font Awesomeの導入方法から、アイコンの編集の仕方も紹介していきます。

今回の記事:arrow_down:

  • Webアイコンフォントって何？
  • Font Awesome導入方法
  • アイコンを編集してみよう
    • アイコンの大きさを変える
    • アイコンの色を変える
    • アイコンと文字の間にスペースを作る
    • 回転させる（アニメーション）

Webアイコンフォントって何？

Webアイコンフォントとはフォントとして使用することができるアイコン素材です。
よくWebページなどで目に付くアイコンはTwitterやInstagramなどのSNSのアイコンがありますね:grinning:アイコンはWebページをデザインうえで欠かせないものなのです:bangbang:
SNS.png

アイコンフォントを使用するメリットとしては、CSSで大きさや色が変えられたり、ファイルサイズも小さいので、ファイルサイズを抑えることができます。:point_down_tone2:

Font Awesome導入方法

そんなWebアイコンフォントを導入するには、いつくかサービスはありますが、Font Awesomeがおすすめです:heart_exclamation:
ここではFont Awesomeの使い方を紹介していきます。導入方法は簡単で、アイコンの種類もたくさんあります。

まず以下のコードをHTMLの＜head＞内に書きます。

HTMLの＜head＞内
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

Font Awesome:point_down_tone2:
FontAwesome.png

Font Awesomeのサイトに行き、使いたいアイコンを選びます:point_down_tone2:
image.png

使いたいアイコンをクリックし、Start Using This Iconをクリック:point_down_tone2:
image.png

HTMLコードをコピーして、貼り付ければ導入完了です:point_down_tone2:
image.png

※最近の新しいバージョンはメールアドレスを登録して使えるようになっています。

登録する場合はStart for Free:point_down_tone2:
startfree.png

メールアドレスを入力し、Create & Use This kitをクリック:point_down_tone2:
メールアドレス.png

以下のようなメールが届くので、Click To Confirm Your Email Address + Set Thisgs upをクリックし、設定します:point_down_tone2:
image.png

会員登録を無事完了するとKit CodeというものがCopyできるので、それをHTMLの＜head＞内に埋め込みましょう:exclamation:
後は先程と同じように導入したいアイコンを選択して入れます。

アイコンを編集してみよう

アイコンの導入が完了しました!!導入しただけのアイコンは、小さく、色は黒です。
大きさを変えたり、CSSを使ってよりおしゃれなアイコンにしてみましょう:heart_eyes:

アイコンの大きさを変える

FontAwesomeでは、アイコンの大きさを簡単に変えられます。

今回はこのアイコンを使用していきます。
image.png

使用するアイコンHTML
    <p><i class="fab fa-apple"></i></p>

上記のコードのi class="〜"内に書くことでサイズを大きくすることができます。

アイコン2倍HTML
    <p><i class="fab fa-apple fa-2x"></i></p>

サイズ表

  • fa-xs：0.75倍
  • fa-lg：1.33倍
  • fa-2x：2倍
  • fa-3x：3倍
  • fa-4x：5倍
  • fa-5x：7倍

全部のサイズ感はこんな感じです:point_down_tone2:
apple.png

自分のページのバランスなどを考えるといいですね！
もちろんCSSでも調整可能です。

アイコンの色を変える

次は色を変えていきましょう。CSSを使っていきますのでクラスを追加しましょう。
使用するアイコンは引き続きリンゴです。赤いリンゴと、青いリンゴを作ってみます。

使用するアイコンHTML
    <p><i class="fab fa-apple fa-3x"></i></p>
    <p><i class="fab fa-apple fa-3x"></i></p>

ここにクラス名以下とし、追加します。
クラス名:red_apple 赤いリンゴ
クラス名:blue_apple 青いリンゴ

クラス名追加HTML
    <p><i class="fab fa-apple fa-3x red_apple"></i></p>
    <p><i class="fab fa-apple fa-3x blue_apple"></i></p>
CSS
.red_apple{
    color: red;
}
.blue_apple{
    color: blue;
}

image.png

色が付けられました。SNSのマークなどは、そのままの色を再現するとわかりやすいです。

アイコンと文字の間にスペースを作る

アイコンと文字の間にスペースがないと、詰まって見えてしまいます。
image.png

HTML
    <p><i class="fas fa-home"></i>HOME</p>
    <p><i class="fas fa-bars"></i>MENU</p>
    <p><i class="fas fa-cog"></i>SETTINGS</p>

こちらも簡単にスペースを追加できますので、ぜひ参考にしてみてください。
fa-fwという名前のclassをiタグに追加だけで、前後にちょっとした余白が作られます。

HTML
    <p><i class="fas fa-home fa-fw"></i>HOME</p>
    <p><i class="fas fa-bars fa-fw"></i>MENU</p>
    <p><i class="fas fa-cog fa-fw"></i>SETTINGS</p>

image.png

少し余白が入り、違和感がなくなりましたね。

回転させる（アニメーション）

何と簡単に回転させることなんかも可能です。

image.png

使用するアイコンHTML
    <i class="fas fa-fan"></i>
    <i class="fas fa-question-circle"></i>

fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。

回転HTML
    <i class="fas fa-fan fa-spin"></i>
    <i class="fas fa-question-circle fa-spin"></i>

GIF 2020-05-17 11-13-02.gif

便利なのでぜひFont Awesome使ってみてくださいね:kissing_heart:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T10:16:44+09:00

Rails6+Reactで付箋アプリっぽいページを作ってみた。4 (UI作成編2)

記事について

前回まででUIの作成を行いましたが、見た目があまりに寂しいので、
スタイルシートを使って、それっぽく見せてみます。

関連する記事

書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
その１(環境構築〜モデル作成編)
その２(API作成編)
その３(UI作成編1)
その４(UI作成編2)
おまけ(モデルのテスト編)

スタイルシート

white_board/main.htmlで使われるwhite_board.scssを編集して、各DOM要素の見た目を目ます。
全体的なレイアウトにはflexレイアウト。
付箋の中身は段組が指定しやすかったのでgridレイアウトを使用しています。

app/assets/stylesheets/white_board.scss
// タイトル要素
div#WhiteBoardTitle {
  font-weight: bold;
  font-family: Monospace;
  font-size: 24px;
  border-collapse: collapse;
}

// ホワイトボード全体
// "display: flex"でflexレイアウトを指定しています。
// 左上からピチっと並べてもらいます。
div#WhiteBoard {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

// ユーザ毎の箱
div.UserBox {
  margin: 1px;
  width: 45vw;
  height: 45vh;
  border: 1px solid;
  border-collapse: collapse;
}

// ユーザ名を表示する箱
div.UserName {
  width: 100%;
  height: 25px;
  font-weight: bold;
  font-size: 18px;
  font-family: Monospace;
  text-align: center;
  background-color: #FFEEAA;
  border-bottom: 1px solid;
}

// 付箋表示エリア
// ここもflexレイアウト
div.TaskArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
}

// 付箋本体
// 影をつけてそれっぽく
div.Sticky {
  display: grid;
  padding: 1px;
  margin: 5px;
  width: 100px;
  height: 80px;
  font-size: 10px;
  font-family: monospace;
  text-align: left;
  border: 1px #FFFF00 solid;
  background-color: #FFFF00;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);

}

// タスクのタイトル
div.TaskTitle {
  grid-row: 1;
  grid-column: 1 / 3;
  font-size: 12px;
  font-weight: bold;
  font-family: monospace;
  border-bottom: #FF0000 1px solid;

}

// タスクの本文
div.TaskDescription {
  grid-row: 2 / 6;
  grid-column: 1 / 3;
  font-size: 10px;
  font-family: monospace;
}

// タスクの期日
div TaskDueDate {
  grid-row: 7 / 8;
  grid-column: 1 / 3;
  font-size:8px;
  font-family: monospace;
}

完成イメージ

こんな感じになると思います。
これで少しはましになったかなぁ。
スクリーンショット 2020-05-16 9.07.50.png

スタイルの変更後もテストだ。

まずは、これまで作ったテストを流してみます。
（間違ってvisible: hiddenになってしまったりなどの影響がないことが確認できます。）

で、狙ったスタイルが適用されているかもテストしてみます。

test/system/whiteboards_test.rb
  test "style check" do
    # white_board/mainを開く。
    visit white_board_main_url;

    # タイトルはfont-weigt: bold, font-size: 24pxのはず。
    # font-weightをマッチする時はboldでなく、数値(700)でマッチします。
    find("div#WhiteBoardTitle").assert_matches_style("font-weight" => "700", "font-size" => "24px");
    find("div#WhiteBoard").assert_matches_style("display" => "flex", "flex-flow" => "row wrap", "align-content" => "flex-start", "align-items" => "flex-start");

    # ユーザ名部分
    username_divs = all("div", class: "UserName");

    username_divs.each do | username_div |
      username_div.assert_matches_style("font-weight" => "700", "font-size" => "18px");
    end

    # 付箋
    # 色はrgba(赤, 緑, 青, 透過率)で比較するようです。
    stickies = all("div", class: "Sticky");

    stickies.each do | sticky |
      sticky.assert_matches_style("background-color" => "rgba(255, 255, 0, 1)", "width" => "100px", "display" => "grid");
    end

  end

こういうテストを作っておくとスタイルシートの書き間違いなどで、狙ったスタイルが適用されてないことを検出することができます。
さらに、期日が近くなったら背景を赤くするなどの仕組みを取り入れたら、そういうのも自動でテストできるようになります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T08:44:01+09:00

【Rails】テーブルを分けて複数の画像をアップロードする

複数枚の写真を一度に保存する機能の実装において、
【itemテーブル】と【item_imageテーブル】の二つに
分けて複数枚の写真を保存する機能を実装した際の手順をまとめたのでご紹介します。

完成形

○ 商品写真は最大で10枚まで投稿可能。
○ 一つのファイルフィールドに一つの写真でアップロードしていく。
○ 5枚投稿時点で下段に切り替わる。
Image from Gyazo

1. HTMLの用意

sample.haml
~ 省略 ~

.image-container
  .image-container_box
    .form-title
      %span.box-form-explanaion
        商品画像
      %span.indispensable
        必須
    %p.image-container_box_message
      最大10枚までアップロードできます
    .image-container_box_alart-10
      ※ 1枚目は必須です
  .image-container_unit-man    【写真が順にプレビューされていく箱】
    .item-image-container__unit.preview-0  【写真一枚が入る箱　※投稿ごとに生成されていく】
      = f.fields_for :item_images do |i|
        .image-container__unit--guide
          = i.file_field :image, class: 'img-man', id:"image-label-0",type: 'file'
          .have-image
            %i.fas.fa-camera

~ 省略 ~

◉【写真一枚が入る箱】に2つクラスがあるのは、2枚目以降では毎回クラス名を
変えていくためです。
◉この仕様では、1つのinputに写真は1つなので、multiple属性は付けていません。

2. CSSの用意

sample.scss
  .image-container {
    padding: 40px;
    border-bottom: solid 1px rgb(235, 235, 235);
    &_box {
      &_message {
        height: 19px;
        margin: 16px 0 5px;
        font-size: 14px;
        line-height: 1.4em;
        display: block;
      }
      &_alart-10 {
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: bold;
        color:red;
      }
    }
    &_unit-man {
      min-height: 152px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .item-image-container__unit {
        align-content: center;
        align-items: center;
        background-color: rgb(245, 245, 245);
        display: flex;
        justify-content: flex-start;
        height: 150px;
        width: 118px;
        margin-left: 5px;
        margin-bottom: 2px;
        justify-content: center;
        position: relative;
        border-width: 1px;
        border-style: dashed;
        border-color: rgb(204, 204, 204);
        border-image: initial;

        .have-image {
          position: absolute;
            left: 32px;
            top: 40px;
          z-index: 0;
          cursor: pointer;
          font-size: 16px;
          .fas.fa-camera {
            margin-left: 16px;
            font-size: 1.2rem;
          }
          .fas.fa-camera:hover {
            cursor: pointer;
            transform: scale(1.3, 1.3);
            transition: all 0.1s ease 0s;
          }
        }
        .item-image-container__unit__image {
          z-index: 1;
          height: 145px;
          width: 100%;
          margin: 0 3px;
          background-color: #ffffff;
          position: relative;
          img {
            width: 100%;
            height: auto;
          }
          .image-option__list--tag {
            width: 100%;
            background-color: lightblue;
            text-align: center;
            position: absolute;
              bottom: 0;
              left: 0;
          }
          .image-option__list--tag:hover {
            cursor: pointer;
            transform: scale(1.0, 1.0);
            transition: all 0.1s ease 0s;
            background-color: #ea352d;
            color:#ffffff;
          }

        }
      }
      .item-image-container__unit {
        input{
          display: none;
        }
      }
    }
  }

「.unit-man」に適用されている、[flex-direction: row;]と[flex-wrap: wrap;]により、
写真が既定の幅まで投稿されたら下段に折り返してくれます。

3. JSでプレビューさせる

sample.js
$(function(){


~ 省略 ~


  var dataBox = new DataTransfer();  //データ用の箱を作る
  $(document).on('change', '.img-man', function(){    //inputの中身が変化したら発火する
    $.each(this.files, function(i, file){
      var fileReader = new FileReader();
      dataBox.items.add(file)    
      fileReader.readAsDataURL(file);     //ファイルの読み込み
      fileReader.onloadend = function() {     //読み込み完了すると発火
        var num = $('.item-image-container__unit').length  //写真の枚数をnumに代入
        var src = fileReader.result   //写真のデータをsrcに代入
        var html =  `<div class="item-image-container__unit__image">
                        <img src="${src}">
                      <div class="image-option__list--tag btn-${num}">削除</div>
                    </div>`

        var field = `<div class="item-image-container__unit preview-${num}">
                      <div class="image-container__unit--guide">
                        <label for="image-label-${num}">
                          <input class="img-man" id="image-label-${num}" type="file" name="item[item_images_attributes][${num}][image]">
                          <div class="have-image">
                            <i class="fas fa-camera"></i>
                          </div>
                        </label>
                      </div>
                    </div>`
        $(html).appendTo(`.preview-${num - 1}`)  //枚数で該当するクラスに写真を追加する
           　　　　　　　　　　　
        if (num < 10 ) {     //10枚分まで新しいinputの生成を行う
          $(field).appendTo('.image-container_unit-man')
        }
      };
    });
  });
  //削除機能　
  $(document).on("click", ".image-option__list--tag", function(){  //削除ボタンクリックで発火
    var num = $('.item-image-container__unit').length
    var field_2 = `<div class="item-image-container__unit preview-0">
                    <div class="image-container__unit--guide">
                      <label for="image-label">
                        <input class="img-man" id="image-label-0" type="file">
                        <div class="have-image">
                          <i class="fas fa-camera"></i>
                        </div>
                      </label>
                    </div>
                  </div>`
    $(this).parent().parent().remove();  //写真が入っている箱ごと削除
    $(".item-image-container__unit").removeClass(`preview-${num - 1}`)
    $(".item-image-container__unit").addClass(`preview-${num - 2}`)
    if(num == 1) {   //全部削除した時に新たに1つフィールドを生成する
      $(field_2).appendTo('.image-container_unit-man')
    }
  });

~ 省略 ~

◉変数【num】は、写真の読み込みごとに代入され、その度に横に生成される
【preview-${num}】クラスが書き換わって横に生成されるようになっています。

◉ 下部の１０枚制限の記述によって、10枚までアップされるとinputの生成が止まります。
また、multiple属性が付いていないので写真の一括選択はできなくなります。

◉削除機能に関しても、クラス名の書き換えを行う必要があります。

登録枚数に関しては、モデルにも別でバリーデーションは書いてあります。

sample.rb
  def  item_images_number
    errors.add(:item_images, "は10枚までです") if item_images.size > 10
  end

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T05:04:09+09:00

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

100日チャレンジの317日目

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-16T02:19:10+09:00

html&css markerで任意の目次を作る

最近

極鶏のラーメンが食べたいです:ramen:
ついでに言うと猪一のラーメンも食べたいです:ramen:

目次

  • 目標
  • HTML
  • CSS

目標

リストの入れ子で通常のリストだと↓見えにくい。
image.png

↓こんな感じのリストを作る
image.png

HTML

今回はolで括りましたがulでも大丈夫です。
それぞれのolにfirst second thirdなどの対応する階層の任意のクラスをつける。

index.html
<ol class="first-layer">
    <li>1つ目の階層リスト－１</li>
    <li>1つ目の階層リスト－２</li>
    <ol class="second-layer">
      <li>２つ目の階層リスト－１</li>
      <li>２つ目の階層リスト－２</li>
      <ol class="third-layer">
        <li>３つ目の階層リスト－１</li>
      </ol>
    </ol>
    <li>1つ目の階層リスト－３</li>
    <ol class="second-layer">
      <li>２つ目の階層リスト－１</li>
      <ol class="third-layer">
        <li>３つ目の階層リスト－１</li>
        <li>３つ目の階層リスト－２</li>
      </ol>
      <li>２つ目の階層リスト－２</li>
    </ol>
  </ol>

CSS

counterとmarkerを使い、作っていきます。

olが実行される度にcounter-resetで 加算していた num を0にする。
(int num=0;の気持ち)

ol{
    counter-reset: num;
}

counter-incrementで num に加算していく。
リストがある度に1加算される。
(num++; の気持ち)

li{
    counter-increment: num;
}

リストの後ろにmarkerを作り、そのcontentに num の数値を出力する。
(print(num) の気持ち)

li:before{
    display: marker;
    content: counter(num_f)". ";
}

以上を階層ごとに設定していく。

style.css
li{
    list-style-type: none;
    list-style-position: inside;
}
ol.first-layer{
    counter-reset: num_f;
}
.first-layer li{
    counter-increment: num_f;
}
.first-layer li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.second-layer{
    counter-reset: num_s;
}
.second-layer li{
    counter-increment: num_s;
}
.second-layer li:before{
    display: marker;
    content: counter(num_f)'.' counter(num_s)". ";
}
ol.third-layer{
    counter-reset: num_t;
}
.third-layer li{
    counter-increment: num_t;
}
.third-layer li:before{
    display: marker;
    content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}

できました！
image.png

おまけ

n.n.n.も作れます。
image.png

ol.first-layer{
    counter-reset: num_f;
    counter-reset: num_s;
    counter-reset: num_t;
}
.first-layer li:before{
    display: marker;
    content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}
ol.second-layer{
    counter-reset: num_s;
    counter-reset: num_t;
}
.second-layer li:before{
    display: marker;
    content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}

※変更した箇所を記載

参考

マーカー
http://www6.plala.or.jp/go_west/nextcss/reference/article/marker.htm

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

日付別

タグ一覧