What's New Qiita

20191001のHTMLに関する記事は9件です。

  • 投稿日：2019-10-01T23:16:23+09:00

【Rails】Slim基本文法【初心者】

はじめに

Railsを使った開発で使うことになるであろうSlimについて簡潔にまとめてみました。

Slimとは

Railsで使用できるRuby製のHTMLテンプレートエンジン。

Slimのメリット

HTMLをよりシンプルに見やすく書くことができる。

Slim導入

Slimジェネレータを提供してくれるslim-railsとERB形式のファイルをSlim形式に変換してくれるhtml2slimという２つのGemをインストール

gem 'slim-rails'
gem 'html2slim'

Slimへ変換

すでにあるerb形式のファイルをSlim形式に変換するときは以下のコマンド

$ bundle exec erb2slim 変換したいerbファイルのパス --delete

Slim基本文法

<>が不要、や<% end %>等の閉じタグも不要
<%= %> → =
<% %> → -
id指定 → #
class指定 → .
コメント → /
改行 → |

ERBとSlimの比較

最初にERB形式

example.html
<div class="contents nav">
  <ul class="navbar-nvv">
    <% if current_user %>
      <li><%= link_to("MyPage", user_path, class: "nav-link") %></li>
    <% else %>
      <li><%= link_to("LogIn", login_path, class: "nav-link") %></li>
    <% end %>
  </ul>
  # これはコメントです
  <p id="greeting">Hello World!!</p>
</div>

次がSlim形式

example.html.slim
.contents.nav
  ul.navbar-nav
    - if current_user
      li= link_to "MyPage", user_path, class: "nav-link"
    - else 
      li= link_to "LogIn", login_path, class: "nav-link"
  / これはコメントです
  p#greeting Hello World!!

さいごに

かなりスッキリしましたね！
以上Slimの基本文法でした。

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

【rails】jQueryでいいね機能を非同期化しよう

やりたいこと

いいねを非同期でやりたい！！
railsの勉強し始めてしばらく同期通信しかやっていませんでした。。
そんな時、Ajaxという言葉を見つけました。
Ajax？何やと調べてみると非同期通信の意味らしい
非同期通信があると一つのページでいろいろなことができるようになる！！
ページに新しい情報を増やす時はだいたい非同期通信が使われています

この記事を理解して非同期通信できるようになってください！！！

方法

今回の方法は以下の通りです
1. ボタンをクリックでAjax（非同期通信）でアクションへ送信
2. アクションで処理を進め、ビューへデータを返す
3. Ajaxが成功したらHTMLを書き換える

ボタンをクリックでAjax（非同期通信）でアクションへ送信

ビューファイルから押すとAjaxでアクションへ送信するボタンを実装します
では、説明していきます

link_to

一般的な方法でいいね機能を実装するのであれば、このメソッドを使っていると思います
追加するのはremote trueとclass: "post_favorites_create"です
remote trueは非同期通信にするための記述です。
class: "post_favorites_create"はJaveScriptで反応させるために設定しています
クラス名は好きな名前にしてください

<%if @post.favrite?(current_user)%>current_userが@postに対していいねをしてるかどうかのチェックです。
いいね実装時に条件分岐していると思うので、それに合わしてください。

posts/show.html.erb
<div class="favorite">
    <%if @post.favrite.nil?%>
        <%= link_to post_favorites_path(@post), id: "post_favorites_deatroy", method: :delete, remote: true do %>
            <span>❤︎</span>
        <%end%>
    <%else%>
        <%= link_to post_favorites_path(@post), id: "post_favorites_create", method: :post, remote: true do %>
            <span style="color:red;">❤︎</span>
        <%end%>
    <%end%>
</div>

アクションで処理を進め、ビューへデータを返す

app/controllers/favorites_controller.rb
def create
    @post_favorites = Favorite.new(user_id: current_user.id,post_id: params[:post_id])
    @post_favorites.save
    result = [done: "save",user_id: current_user.id, post_id: params[:post_id]]
    render :json => result
end

def destroy
    @post_favorites = Favorite.find_by(user_id: current_user.id, post_id: params[:post_id])
    @post_favorites.destroy
    result = [done: "destroy",user_id: current_user.id, post_id:params[:post_id]]
    render :json => result
end

resultを定義するときの
doneはビューにresultを返した時に判断するための値です

render :json => result
resultをjson形式でビューに返すということです。

Ajaxが成功したらHTMLを書き換える

$(document).on('ajax:success', '.favorite a', function(e) {
    Ajaxに成功した時の処理
});

favoriteクラスないのaタグからのajaxが成功した時にfunction(e)を実行するという意味です
eはajaxで返ってきた値をeとして扱う

application.js
$(document).on('ajax:success', '.favorite a', function(e) {
    if (e.detail[0][0].done == "save"){
        var post_fav = document.getElementById('post_fav')
        post_fav.innerHTML = '<a id="post_favorites__deatroy" data-remote="true" rel="nofollow" data-method="delete" href="posts/'+e.detail[0][0].post_id+'/favorites"><span style="color:red;">❤︎</span></a>'
    }
    if (e.detail[0][0].done == "destroy"){
        var post_fav = document.getElementById('post_fav')
        post_fav.innerHTML = '<a id="post_favorites_create" data-remote="true" rel="nofollow" data-method="post" href="posts/'+e.detail[0][0].post_id+'/favorites"><span>❤︎</span></a>'
    }
  });

これで非同期化が完了です

まとめると
link_toにremote: true、id名の追記
redirect_toをrender :json =>に変更
jsファイルにajax成功時の処理を記述する
以上３点です。

以上のことを設定すると同期通信を非同期通信にすることができます
いいね以外にも他の機能を非同期にしてみましょう！！

質問、気になるところなどございましたらコメントよろしくお願いします

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

Memo HTML Clearfix

Memo

Clearfix

sample
<div class="box1">box1
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>

<div class="box4">box4</div>
css
.box1 {
  width: 500px;
  border: 5px solid #000;
}
.box2 {
  height:100px;
  width: 100px;
  background-color:#999;
  float: left;
}
.box3 {
  height:100px;
  width: 100px;
  background-color:#777;
  float: left;
}
.box4 {
  height:50px;
  width: 100px;
  background-color:#555;
  float: left;
}
/*-- clearfix --*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

サンプルでの表示はfloatした要素の親要素の高さが無い状態

See the Pen RwbzYMP by abek922 (@abek922) on CodePen.

floatした要素の親要素にクラス名clearfixをつけてclearfixのCSSを適応

sample
<div class="box1 clearfix">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="box4"></div>

高さがとれる状態になる

See the Pen Clearfix_2 by abek922 (@abek922) on CodePen.

Clearfix

clearfix
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T17:21:38+09:00

Memo HTML 複数のクラス名をつける

Memo HTML 複数のクラス名をつける

単一の場合

sample
<div class="class1">

複数の場合

ダブルクォート内で半角スペースを挿入する事で複数のクラス名をつける事が可能

sample
<div class="class1 class2 class3">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T15:39:19+09:00

使いたいテンプレートまとめ

テンプレートはあくまでもテンプレートとして
自分でカスタマイズやアレンジをして使ってみようという気持ちです

テンプレートも素材もたくさん見て学んで
自分で作れるようにしたい

JSで作りこんだ動きのあるサイトもつくってみたいので
よいサイトがあれば随時更新します

テンプレート

◇線の細いイラストと組み合わせて
　https://alicex.jp/oysm/74/

◇きれいなバナーと組み合わせて
　http://vmeer.55950.xrie.biz/?guid=on

◇自分で撮った写真と組み合わせて
　http://vmeer.99162.blog.xrie.biz/?guid=on

◇ブログっぽい見え方をする
　http://drop.37449.xrie.biz/?guid=on

◇配色の勉強に
　http://drop.18668.xrie.biz/?guid=on

◇自分でいじっていろいろと応用が利きそう
　http://drop.11190.xrie.biz/?guid=on

お手本サイト

お手本サイト集め
テキストサイトとは趣ちがうけど、とっても参考になる
https://www.manicyouth.jp/webdesign-matome-dressing-up/

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

テキストサイトで使いたいテンプレート

テンプレートはあくまでもテンプレートとして
自分でカスタマイズやアレンジをして使ってみようという気持ちです

テンプレートも素材もたくさん見て学んで
自分で作れるようにしたい

JSで作りこんだ動きのあるサイトもつくってみたいので
よいサイトがあれば随時更新します

テンプレート

◇線の細いイラストと組み合わせて
　https://alicex.jp/oysm/74/

◇きれいなバナーと組み合わせて
　http://vmeer.55950.xrie.biz/?guid=on

◇自分で撮った写真と組み合わせて
　http://vmeer.99162.blog.xrie.biz/?guid=on

◇ブログっぽい見え方をする
　http://drop.37449.xrie.biz/?guid=on

◇配色の勉強に
　http://drop.18668.xrie.biz/?guid=on

◇自分でいじっていろいろと応用が利きそう
　http://drop.11190.xrie.biz/?guid=on

お手本サイト

お手本サイト集め
テキストサイトとは趣ちがうけど、とっても参考になる
https://www.manicyouth.jp/webdesign-matome-dressing-up/

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

ASP.NET: DropDownListのスタイル変更

SAMPLE

未選択
image.png

選択
image.png

REFERENCE

出典不明

html

<div>
    <asp:DropDownList ID="List1" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU1</asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="List2" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU2 </asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="List3" runat="server" Width="200px" Height="100px" BackColor="#080808" ForeColor="#ffffff" Font-Names="Andalus" CssClass="ddl" Font-Size="30px" AutoPostBack="True" >
    <asp:ListItem Value="">MENU3 </asp:ListItem>
    <asp:ListItem Text="ITEM1"></asp:ListItem>
    <asp:ListItem Text="ITEM2"></asp:ListItem>
    <asp:ListItem Text="ITEM3"></asp:ListItem>
    </asp:DropDownList>
</div>

css

.ddl
{
    text-align: center;
    border:2px solid #7d6754;
    border-radius:5px;
    padding:10px;
    -webkit-appearance: none; 
/*    background-image:url('Images/任意のファイル');*/
    background-position:88px;
    background-repeat:no-repeat;
    text-indent: 0.01px;
    text-overflow: '';
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-01T11:39:15+09:00

HTML & CSS (Flexbox編)

Flexboxとは

・縦、横並びができる。
・折り返しを付けられる。

横並び

display:flex

　指定した要素の子要素を横並びにする。
　↓
　親要素(ul)にdisplay:flexをかける。
　子要素(li)が横並びになる

ul {
 display:flex;
}

flex:auto

　要素の幅を親要素に合わせて伸縮させることができる。
　↓
　子要素(li)にflex:autoをかける。

ul {
 display:flex;
}
li {
 flex:auto;
}

flex-wrap:wrap

　子要素のサイズ(width)に応じて折り返す。
　↓
　親要素にflex-wrap:wrap
　子要素にwidthを設定する。(%で)

例えば、2列にしたいときは、子要素にwidth:50%;を付ける。

縦並び

flex-direction:column

　子要素を上から下へ並べる。
　↓
　親要素にflex-direction:columnを付ける。
　子要素にmargin:0 auto、widthを設定すると中央寄せできる。

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

メニューじゃないハンバーガーを作れるCSSをつくった。

CSSのチェックボックスなら、「チェックが入ってたら~する」って指定を行えば、
JSのクリックイベントのような使い方が出来る。

例えばハンバーガーメニューも作れる。
CSSだけで簡単にドロワーメニュー(ハンバーガーメニュー)を作る - Qiita

そしてわたしはついにハンバーガーも作れるのではと気づいてしまった、、、

See the Pen ハンバーガーが食べたいので作った by himeka223 (@himeka223) on CodePen.

できてしまった、、、

ハンバーガーを作る

image.png

<div class="hamburger">
    <div class="hamburger__body">
    <div class="topping--letus"></div>
    <div class="topping--meet"></div>
    <div class="topping--tomato"></div>
    <div class="topping--cheese"></div>
  </div>
</div>

かんたんに、構造

.hamburger…ハンバーガー自体の土台となる。
.hamburger__body…ハンバーガー自体。afterbeforeでパンの部分を指定。
.topping--{具材}…トッピング。

重なりについて

重なっていくトッピングを表現するのに、トッピングをpositionで指定しようとしたが
これだと、下のトッピングを抜いたのに、上のトッピングの位置が変わらなくなってしまう。

例えば、トマトが嫌いでトマトを抜いたら、上のチーズが浮いたままになってしまう。
そんなハンバーガーは美味しくなさそう。

★flexboxで子要素の順番を逆にする指定をする

マイナスマージンとかを使ってみるとわかるように、
HTMLは下の要素が手前に重なっていく。
↓こんな感じで下にある要素が手前に重なる。
.png

そこでflexboxの子要素の順番を逆にする指定を使い、
見た目と逆に書いたHTMLをそのまま逆にすることで、
下の要素が手前に重なっていったのをそのまま逆転させる。

flex-direction: column-reverse;
display: flex;

チーズ
トマト
肉
レタス

こうゆうふうに重ねたいから

レタス
肉
トマト
チーズ

と記載する。

そしてトッピングたちにマイナスマージンを指定して、重ねていく。

ハンバーガー自体の位置の調整

このままだと、トッピングしたときに下にバーガーが動いてしまう。
image.png
ハンバーガー自体をpositionで下に揃えることで、トッピングしても上へ重なっていくようになる。

position: absolute;
bottom: 0;
left: 0;

パンを作る

上と下のパンは、hamburger__bodyのbeforeとafter要素で作られている。

    &:after,
    &:before{
      content: " ";
      width: 100px;
      background-color: $bun;
    } 
    &:before{
      display: block;
      height: 20px;
      border-radius:30% 30% 40% 40%;
      box-shadow:0 -8px 0 0px darken($bun,8%) inset; 
    }
    &:after{
      display: none;
      margin-bottom: -10px;
      height: 30px;
      border-radius:50% 50% 40% 40%/70% 70% 40% 40%;
      box-shadow:0 -6px 0 0px darken($bun,8%) inset;
    }
  }

重なりについて説明したように、flexboxの子要素の順番を逆にする指定で、htmlの記述とは逆に表示されるので

before要素…下のパン
after要素…上のパン

の指定になる。

★after要素で上のパンを作る

まず、高さ20pxの長方形を作成。

border-radiusでパンの丸みを表現する。

border-radius:50% 50% 40% 40%/70% 70% 40% 40%;

border-radiusは角丸の半径の指定である。
左上・右上・右下・左下の順で指定。
/で区切ることで、水平方向/垂直方向の指定ができる。

box-shadowで影をつける。

box-shadow:0 -8px 0 0 darken($bun,8%) inset;

影の指定方法は
box-shadow:横の位置 縦の位置 影のぼかし度 影の広さ 色 insetで中へ影を広げる;
となる。
darken($bun,8%)はSCSSの機能で$bun（変数で色コードを指定）を8%暗くした色になる。

★before要素でも下のパンを作る

作り方は上のパンと同様
角丸を平たくして平たいパンにした。

トッピングをつくる

トッピングは基本としては平たいパンと同じ。

width: 100px;
height: 20px;
margin-bottom: -10px;
border-radius:30% 30% 40% 40%;

高さ20px幅100pxで、丸みを付ける。

margin-bottom: -10px;とすることで、重ねることができる。

★チーズを作る

image.png

&--cheese{
    @extend %topping;
    background-color: $cheese;
    height: 10px;
    box-shadow:0 0px 0 2px $cheese ;
    &:after{
      display: block;
      content: " ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 50px 0 50px;
      margin-top:5px;
      border-color: $cheese transparent transparent transparent;
    }
  }

基本は普通のトッピングと同じ。

左右のトロッとした部分は、
box-shadow:0 0px 0 2px $cheese ;でチーズを他のトッピングより大きくして表現。
widthでサイズを変えなかったのは、中央からおおきくしたかったため。
widthだと、左を支点として、右に大きくなってしまう。

チーズの前のトロッとした部分は、
after要素で表現する。

borderプロパティで三角形を作り

border-style: solid;
border-width: 20px 50px 0 ;
border-color: $cheese transparent transparent transparent;

margin-top:5px;で少し下にずらしている。

★レタスを作る

image.png

こちらのサイトを参考に作りました。

  &--letus{
    @extend %topping;
    height: 15px;
    background-color:$letus;
    background:
      linear-gradient(-45deg, darken($letus,4%) 10px,  darken($letus,0%) 0) 10px;
    background-color: $letus;
    background-position: left bottom -3px;
    background-repeat: repeat ;
    background-size: 10px 20px;
  }

45°のグラデーションをぼかし無しでつけて、そのサイズを決めてリピートさせることでギザギザを指定する。

ボタンの装飾

CSSで作る！押したくなるボタンデザイン100（Web用）
こちらのコードをそのまま使用させていただきました。
作り方は割愛。

inputとlabelを連動させる

<input id="letus" type="checkbox">
<!-- ~省略~ -->
<label class="button" for="letus">letus</label>

inputとlabelはidとforを同じ値に指定することで紐付けることができる。
これでfor="letus"のlabelをクリックすると、id="letus"のinputのチェックをつけることができる。

#bun,#cheese,#tomato,#letus,#meet{
  display: none;
}

inputのチェックボックスは必要ないのでdisplay: none;で非表示にする。

:checkedでチェック後の動作を指定

#letus:checked~{
  .hamburger{
    .topping{
      &--letus{
        display: block;
      }
    }
  }
  .button-area{
    .button[for="letus"]{
      /*ボタンを押したとき*/
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        box-shadow: 0px 0px 1px rgba(red, 0.2);/*影を小さく*/
        border-bottom: none;
    }
  }
}

まず、#letus:checkedとすると、#letusにチェックが入ってた場合の動作を指定できる。
~セレクタは、すべての隣接する要素なので、
隣接している、.hamburgerの.topping--letusを表示するという動作にが実行される。

ボタンも、同様に指定している。

まとめ

ハンバーガーがおいしそうだから、作るのが楽しかった
マクドナルドの、一番安い薄いハンバーガーがたべたくなった

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

日付別

タグ一覧