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

即時に更新されるチャット機能(Action Cableの実装)

即時に更新されるチャットアプリ

  • Action Cableを用いた、リアルタイムチャットアプリを作成する

まとめてコードずらりします⬇︎

ターミナル
% cd projects
% rails _6.0.0_ new mini_talk_app -d mysql
% cd mini_talk_app
% rails db:create
ターミナル
% rails g controller messages new
% rails g model message text:text
% rails db:migrate
app/config/routes.rb
Rails.application.routes.draw do
  root 'messages#new'
  resources :messages, only: [:create]
end
app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def new
    @messages = Message.all
    @message = Message.new
  end

  def create
    @message = Message.new(text: params[:message][:text])
  end
end
app/views/messages/new.html.erb
<h3>mini_talk_app</h3>
<%= form_with model: @message do |f| %>
  <%= f.text_field :text %>
  <%= f.submit '送信' %>
<% end %>
<div id='messages'>
  <% @messages.reverse_each do |message| %>
    <p><%= message.text %></p>
  <% end %>
</div>

この時点で下記のようになっているはず

d6806db02ad04b485928bbd124c73f1a.png

Action Cableの実装(先ほどの続き)

ターミナル
% rails g channel message
app/channel/message_channel.rb
class MessageChannel < ApplicationCable::Channel
  def subscribed
    stream_from "message_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end
app/controller/messages_controller.rb
class MessagesController < ApplicationController
  def new
    @messages = Message.all
    @message = Message.new
  end

  def create
    @message = Message.new(text: params[:message][:text])
    if @message.save
      ActionCable.server.broadcast 'message_channel', content: @message
    end
  end
end
app/javascript/channels/message_channel.js
import consumer from "./consumer"

consumer.subscriptions.create("MessageChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    const html = `<p>${data.content.text}</p>`;
    const messages = document.getElementById('messages');
    const newMessage = document.getElementById('message_text');
    messages.insertAdjacentHTML('afterbegin', html);
    newMessage.value='';
  }
});

現場からは以上です!

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

【初心者でもわかる】imgの画像がぼやける理由と対策

どうも7noteです。なんだか画像がぼやけてるような気がする時の対処法

imgタグの画像は画像データと全く同じpxに指定するのが基本!

画像データが大きいが、無理に150pxの幅の箇所に画像を使用してしまうとぼやけてしまいます。(おそらくChromeのみ)

画像がぼやけないためには

①使う予定の場所のpxに合わせて画像をトリミング

一番正攻法です。
ただ、レスポンシブに対応しなければならない場面もあると思うので、実際にはPCでの指定よりも大きなサイズの画像が必要になうrことが多いです。

style.css
img {
  width: 100px;  /* 画像データの横幅も100px */
}

②画像データを使う場所の2倍の大きさで書き出す。

imgの特徴として、元データの半分のサイズで使う場合などは比較的綺麗み見えます。

レスポンシブサイトを作るときは、スマートフォンの画像サイズに合わせて画像を書き出す必要があります。
スマホは倍の画角の画像が必要になるため、横幅350pxのスマホに幅いっぱい画像を表示する場合最低でも700pxの画像が必要になります。
しかし、パソコンでは幅を400pxの場所に画像を使う場合、画像は700pxに対して使う場所は400pxと綺麗に割りきれません。

そこで、画像サイズを800pxで予め書き出しておくことで、PC表示でもスマホでも綺麗に見せることができます。

③画像をPC用とスマホ用2種類に分ける

多くの場合、レスポンシブサイトのため少しでも軽くする意図で1枚の画像でやろうとしますが、画像の綺麗さを優先するのであればPCもスマホも別の画像として登録しておいて呼び出す方が良い出しょう。

index.html
<img src="./images/img_pc.jpg" class="pc_img">  /* pc用の画像 */
<img src="./images/img_sp.jpg" class="sp_img">  /* スマホ用の画像 */
style.css
.pc_img {
  display: inline;
}
.sp_img {
  display: none;
}

@media screen and (max-width: 700px) {
  .pc_img {
    display: none;
  }
  .sp_img {
    display: inline;
  }
}

※クラスを使わずに、pcとスマホの画像を自動で切り換える方法もあるので、今度記事にします。

④CSSで解決

img {
  -webkit-backface-visibility: hidden;
}

これが一番簡単かも。

参考元:https://creativememomemo.com/chrome_image_blur/

まとめ

CSSで一応解決できるので、いろいろ紹介したけど結局④の方法が一番良いかも。
③のpcとスマホで画像を切り換える方法は全く違う画像に切り換える方法としても使えるのでむしろそっちの使い方の方が主流かも。

なんにせよ気兼ねなく自由に画像を書き出してそのまま使えるようになる時代になるといいですね。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

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

ボタンデザインがスマホでうまく表示されない時の対処法

スマホで見るとボタン表示が変!?

表題のとおり、bootstrap4を使っていた時に起こった問題についてメモ書き。

EC2にデプロイして、ほっとひと安心していたのもつかの間。

PCから開いたら問題ないのに、スマホから開くとボタンのデザインがおかしい。

実際の画面

PCで表示したボタン
(PCからの表示)

スマホで表示したボタン
(スマホからの表示)

何か白いのが出てる!

コード部分

.button#dropdown1.btn aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
  i.user-icon.fas.fa-user-circle.fa-3x
.dropdown-menu aria-labelledby="dropdown1"
  - if user_signed_in?
    li = link_to 'マイプロフィール', user_path(current_user), class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to 'プロフィール編集',"/users/edit", class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to 'ログアウト',"/users/sign_out", method: :delete, class: 'text-dark font-weight-bold dropdown-item bg-light'
  - else
    li = link_to 'ログイン',"/users/sign_in", class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to '新規登録',"/users/sign_up", class: 'text-dark font-weight-bold dropdown-item bg-light'

原因と対策

調べてみると、iOSのデフォルトスタイルが悪さをしていることが分かった。このスタイルの適用を外す必要がある。

CSSで該当する要素に指定をかける。今回の場合だとbtn要素の#dropdown1に記述を追加する。

div#dropdown1 {
  -webkit-appearance: none;
}

これでサーバーにデプロイし、表示を確認。

修正されたボタン

直った!

まとめ

OSの違いで生じる問題なので、今後も同様のトラブルが出てきた時に使っていきたい。

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

foreachで複数作ったbuttonタグでdivタグ全体をリンクにしてpostしたい!

こんにちは。クリスピーパンダです。
今回が初めての投稿ですが、早速行ってみましょう〜。

この記事で実現できること

foreach等のループ文で複数作ったform、divタグ、buttonタグで、buttonタグをdivタグ全体に広げて、リンク(button)を作成するものです。
イメージは、記事投稿サイトなどで記事表示する際に、たくさんできたカードの全体をボタンにして、postしようよって感じです。通常postはしないですが、ユーザーIDを送信したいよ!とかあるんで、そういう時に役立つ思います!

開発環境

OS:macOS Catalina
テキストエディタ:VSCode
フレームワーク:Laravel6
使用言語:HTML, CSS, JavaScript

実装

HTML

今回はLaravelなのでBladeですがHTMLと同じです。@foreachやroute('post.show')などはBladeでPHPを記述していますが、他のフレームワークでもループ文やaction先など指定すれば実装できます。

index.blade.php
@foreach($posts as $post)
  <form action="{{ route('post.show') }}" method="POST" name="post_show">
    <div class="linkbox">
      <p>{{ $post->title }}</p>
      <p>{{ $post->body }}</p>
      <input name="user_id" type="hidden" value="ここに送りたい値を記述">
      <button type="submit"></button>
    </div>
  </form>
@endforeach

これでpostのタイトルや内容が表示され、それを囲んでるdivタグ部分が次のCSSでリンク(ボタン)になります。
formタグ→divタグ→buttonタグの順番でコーディングしてください。

CSS

今回のHTML部分では、CSSの読み込みは省略していますが、CSSの読み込みも忘れずに行ってくださいね!

style.css
.linkbox {
    position: relative;
}
.linkbox button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* buttonのスタイル削除 */
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

まずはポジションを使用して、buttonタグを浮き上がらせて、buttonタグのスタイルをすべて削除することで、スケスケのbuttonタグが出来上がるというイメージです。

最後に

aタグで実装すればいいじゃん!と最初に思ったのですが、どうやらループ文で複数作成したaタグでpostすると、JavaScript等をかませないとだめみたいだったので、今回は簡単にbuttonタグで実装してみました。
aタグでもこんな感じで実装できるよ!やもっと簡単な方法あるよって方はぜひ教えて下さい!

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

CSS:サイズ指定は比率・相対指定

フォントサイズ、余白、幅などの指定は相対的に

 レスポンシブデザインのポイントになるのは「サイズ」。
 「サイズ」は、画面の幅によって動的に変動させる。
 また、ブレークポイントによって異なるサイズを指定しないといけない。

 このとき、いろいろなパーツに個別のサイズを指定していたのでは管理が大変。
 なので、その画面の起点となるサイズを定めたら、それの比率で他のサイズを決めていく。
 ブレークポイントごとに、その起点のサイズを変える。
 以下は、サンプル。

sample.sass
/* mixin:タイトルの集合 */
+titles($baseFontSize)
  .title
    font-size: $baseFontSize
  .sub-title
    font-size: $baseFontSize * 0.8  

/** デスクトップ以外 **/

//デスクトップの基準サイズ
$pcBaseSize: 1vw 
.container
  =titles($pcBaseSize)

/** デスクトップ以外 **/
@media screen and (max-width: $desktop)

//デスクトップの基準サイズ
$spBaseSize: 3vw
.container
  =titles($spBaseSize)

 
コード量を減らせるだけでなく、文字間のバランスを統一的にできるので、個別指定よりは相対的な指定をする方がよいと思います。

「多行は悪」がコーディングの指針ですね。

 
 
 

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

Progate 初級編 通し模写

何も見ないで、模写した結果、ダメダメだった。

色は、macの基本ソフト digital color Meterを利用した。
このソフトを使えば、rgbが抽出できるので、それで、色をつけた。

HTMLは結構書き出せる様になった。
送信のrgbをつけないといけない
CSSの細かい部分,padding marginが全然書けない。

一応、全体的な模写.完璧を目指さずに大体できていればOK

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="./styles2.css">
    <header>
        <div class="header-wrapper">
        <div class="header-logo">Progate</div>
        <div class="header-nav">
        <ul>
            <li>プログラミングとは</li>
            <li>学べるレッスン</li>
            <li>お問い合わせ</li>
        </ul>
        </div>
        </div>
    </header>
    <main>
        <div class="contents-wrapper">
            <div class="hellow-h1">
                <h1>HELLO WORLD<span>.</span></h1>
            </div>
            <div class="welcome-h2">
                <h2>プログラミングの世界へようこそ</h2>
            </div>
            <div class="learn-h3">
                <h3>学べるレッスン</h3>
            </div>
        <div class="contents">
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
                <p>HTML&CSS</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
                <p>PHP</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
                <p>Ruby</p>
            </div>
            <div class="contents-item">
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
                <p>Swift</p>
            </div>
        </div>
        </div>

        <div class="contact">
            <div class="contact-h3">
                <h3>お問い合わせ</h3>
            </div>
            <div class="contact-contents">
            <p>メールアドレス(必須)</p>
            <input>
            <p>お問い合わせ内容(必須)</p>
            <textarea></textarea>
            <p>※必須項目は必ずご入力ください</p>
            <input class="submit" type="submit" value="送信">
            </div>
        </div>

    </main>
    </footer>
        <div class="footer-wrapper">
        <div class="footer-logo">
            Progate
        </div>
        <div class="footer-nav">
            <ul>
                <li>会社概要</li>
                <li>採用</li>
                <li>Progate</li>
            </ul>
        </div>
        </div>
    </footer>

</head>
<body>
</body>
</html>

style.css

.header-wrapper{
    padding:30px;
    height:80px;
    background-color:rgb(99,205,200);
    color:white;
}

.header-logo{
    float:left;
    font-size:40px;
    padding:20px 20px;

}

.header-nav li{
    float:left;
    list-style:none;
    padding:30px;
    margin-bottom:40px;
}

.contents-wrapper{
    padding:40px;
}

.hellow-h1{
 font-size:40px;
}

.hellow-h1 span{
    color:red;
}

.welcome-h2{
    font-size:20px;
    padding-bottom:40px;
}

.learn-h3{
    font-size:16px;
    border-bottom:2px solid gray;
    margin-bottom:20px;
}

.contents{
    height:500px;
}

.contents-item{
    float:left;
    /*ここのheight*/
    margin-right:30px;
}

.contact{
    padding:30px;
    padding-bottom:30px;
}

.contact h3{
    border-bottom:1px solid rgb(224,231,235);
}

input,textarea{
    width:400px;
    /*答え見た margin*/
    margin-top:10px;
    margin-bottom:30px;

    padding:30px;
    /*答え見た周りがマイルドになる*/
    border:1px solid rgb(224,231,235);

}
.submit{
    background-color:rgb(224,231,235);
    /*答え見た文字が薄くなる*/
    color:rgb(144,161,173);
}



.footer-wrapper{
padding:20px;
height:200px;
background-color:rgb(55,81,101);
color:white;
}

.footer-logo{
    float:left;
    padding:40px 20px;
}

.footer-nav{
    float:right;
    padding:40px;
}

.footer-nav li{
    list-style:none;
    padding-bottom:20px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む