どうも7noteです。web用に画像を書き出し保存した時に、なんか1pxズレる問題の解決法

「横幅1000pxの画像のはずなのに、書き出すと1001pxになってしまう！」

フォトショップで確認するとこんな感じに薄い1px分の領域ができてしまう。

原因は表示位置にありました。

原因は、画像の配置されている位置が「xx.15px」のように小数点が使われているのが問題でした。

対策方法

X座標とY座標を整数にしてから書き出し保存することで解決できます。

（私はいつも0⇒tab⇒0と入力してから書き出し保存しています。）

まとめ

特にjpgの画像などを書き出すと、淵が1px分白っぽくなるのですが、
書き出すときに対策をすることで解決することができるので、覚えておいて損はないと思います。

おそまつ！

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

備忘録として残しておきます。

HTML

tab.html

<div class="tab">
    <ul class="nav-tabs">
      <li class="active"><a href="#tabs1" data-toggle="tab">あ行</a></li>
      <li><a href="#tabs2" data-toggle="tab">か行</a></li>
      <li><a href="#tabs3" data-toggle="tab">さ行</a></li>                
      <li><a href="#tabs4" data-toggle="tab">た行</a></li>
      <li><a href="#tabs5" data-toggle="tab">な行</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="tabs1">
        <p>あいうえお</p>
      </div>
      <div class="tab-pane" id="tabs2">
        <p>かきくけこ</p>
      </div>
      <div class="tab-pane" id="tabs3">
        <p>さしすせそ</p>
      </div>
      <div class="tab-pane" id="tabs4">
        <p>たちつてと</p>
      </div>
      <div class="tab-pane" id="tabs5">
        <p>なにぬねの</p>
      </div>
    </div>
</div>

CSS

tab.css

ul {
  list-style: none;
}
li {
  margin-top: 10px;
}
a {
  text-decoration: none;
  color: #000000;
  padding: 5px 30px;
  border-radius: 20px;
}
.tab{
  display: flex;
}
.tabs > li > a {
  padding: 11px 25px;
  min-width: 100px;
  text-align: center;
  border: 2px solid #e8e8e8;

}
 li.active a {
  color: #fff;
  border-color: #000000;
  background-color: #000000;
 }
.tab-content{
  padding: 0 80px;
  margin-top: 10px;
}
.tab-content .tab-pane { 
  display: none;
 }
.tab-content .active { 
  display: block;
 }

jQuery

tab.js

$(".nav-tabs a").on("click", function() {
  $(this).parent().addClass("active").siblings(".active").removeClass("active");
  var fade = $(this).attr("href");
  $(fade).addClass("active").siblings(".active").removeClass("active");
    return false;
});

結果

あ行をクリックすると、あ行だけ表示され

か行をクリックすると、か行だけ表示されます。

参考リンク

https://www.design-memo.com/coding/jquery-tab-change

はじめに

前回のreact-hook-formに続き、今回もreactの便利なパッケージのstyled-componentsについてまとめてみました！
自分もよく使うので使うときの参考にしたいと思ってます。

参考：styled-componentsドキュメント

styled-componentsとは

ReactにおけるCSSの当て方の1つで、Reactは他にもCSSModulesやCSSinJSなど色々なCSSの当て方がありますが、その中でも人気があり、個人的に一番気に入っています。特徴として、スタイル付きのコンポーネントを作ることができ、それに値を渡すことができます。

インストール

今回はTypeScriptを使うので、型定義ファイルもインストールします。

## npm
npm install --save-dev styled-components @types/styled-components

## yarn
yarn add -D styled-components @types/styled-components

通常のCSSと同じような使い方

まずstyled-componentsから、styledをインポートします。
基本的な使い方として、styledの後にタグ名を書いて、その中で通常のscssのような感じで記述できます。

下の例では、h1タグにスタイルが当たった物をTitleとして使用しています。
その中のspanにもスタイルを当てたり、擬似要素を使ったりしています。

import React from "react";
import styled from "styled-components";

export const App = () => {
  return (
    <Title>
      hello<span>world!</span>
    </Title>
  );
};

const Title = styled.h1`
  font-weight: bold;
  span {
    color: red;
  }
  &:hover {
    color: blue;
  }
`;

通常	hover

コンポーネントのスタイルを拡張

自分の作成したコンポーネントやUIライブラリのコンポーネントにスタイルを当てたい時は、コンポーネント名を()で囲うように記述します。
以下の例では、上で作成したTitleを拡張しているのでfont-weight: boldになっていて、colorはgreenに上書きされています。

const StyledTitle = styled(Title)`
    color: green;
`;

UIライブラリによって、スタイルの優先度が高かったりして、思った通りにスタイルが当たらないことがあります。
（ドキュメントに載ってたり、調べたら大体すぐ出てくるので調べてみてください。）

他のタグでも使用する

上の方法だけだと、Titleのスタイルがh1タグとしてしか使えないので、divタグやpタグなど他のタグとしても使いたい時は、asを使います。
以下の例では作成したTitleをh1タグではなく、divタグとして使用しています。

    <Title as="div">
      hello<span>world!</span>
    </Title>

同じような機能として、withComponentというのがありますが、asの方が簡潔だからか非推奨になっているみたいです。

一部のスタイルを使いまわしたい

コンポーネントとしてではなく、スタイルを色々なところで使いたい時はcssを名前インポートして使います。

下のような感じで、cssを使ってスタイルを作成し、他のスタイルに埋め込むことができます。また、変数や定数を使うこともでき、スタイルを統一するのに役立ちます。

const justifyContentCenter = css`
  display: flex;
  justify-content: center;
`;

const Container = styled.div`
  background-color: ${COLOR.WHITE};
  ${justifyContentCenter}
`;

const Box = styled.div`
    margin: 20px;
    ${justifyContentCenter}
`;

１、２個スタイルを当てる時にわざわざコンポーネントを作りたくない

csspropというのがあり、下のように記述できるのですが導入がやや面倒です。とても長くなってしまうので導入方法は割愛します。csspropはbabelを使って、classを作ってくれるのでインラインスタイルの優先度の問題は解決できますが、jsx内に多く記述すると見辛くなるので、１、２個程度で使う感じになると思います。

こちらの記事がとても参考になります！
styled-componentsのcss propを、create-react-appで作成したReact & TypeScriptの環境で動かすためのチュートリアル

    <h1 css={`color: white`}>
      hello world!
    </h1>

値を渡して使う

styled-componentsと言ったらこれ！みたいな感じがあります。下のように親コンポーネントから子コンポーネントにpropsを渡すのと同じようにして、値を渡すことができます。

import React from "react";
import styled from "styled-components";

export const App = () => {
  return (
    <Title color="red">
      hello<span>world!</span>
    </Title>
  );
};

const Title = styled.h1<{ color: string }>`
  color: ${(props) => props.color};
`;

この例の場合、color='red'が渡されて、その値を下で参照しているのでcolor: redになります。

複数の値を渡したり、分割代入で記述を減らしたりもできます

import React from "react";
import styled from "styled-components";

export const App = () => {
  return (
    <Title color="red" background="black">
      hello<span>world!</span>
    </Title>
  );
};

const Title = styled.h1<{ color: string; background: string }>`
  color: ${({ color }) => color};
  background-color: ${({ background }) => background};
`;

終わりに

ここまで読んでいただきありがとうございました！少しでもstyled-componentsについて、理解が深まれば嬉しいです。
他にもattrsやthemeなどの機能がありますが、今のところあまり使用していない＆有効的な使い方がわかっていないので今回は書きませんでした。興味がある方は調べてみてください。もし良い使い方があったりしたら教えていただけると嬉しいです。
他にも記事投稿しているので良ければ見てください！

環境

macOS Catalina 10.15.7
Ruby on Rails 6.0.0
RSpec 4.0.1
pry rails 0.3.9

エラー内容

RSpecで visit root_path を実行したタイミングでエラーが発生した。

console

Failure/Error: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

     ActionView::Template::Error:
       Invalid CSS after "...kground-color: ": expected expression (e.g. 1px, bold), was "##253141;"



     # (sass):8
     # ./app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb__1634657128219108166_70256618570500'
     # ------------------
     # --- Caused by: ---
     # Sass::SyntaxError:
     #   Invalid CSS after "...kground-color: ": expected expression (e.g. 1px, bold), was "##253141;"
     #   (sass):8

デフォルトで app/views/layouts/application.html.erb に記述されている、外部スタイルシートを指定するリンクタグを生成するメソッドを読み込んだタイミングでエラーが発生している。

対処

エラー内容をみると、Invalid CSSとなっている。##253141;というtypoがあるようなので、VSCodeの文字列検索で探してみる。

messages.css

.side-bar {
  width: 300px;
  height: 100vh;
  background-color: ##253141;
}

あった。
#を一つ消し、visit root_pathが正しく動作することを確認できた。
今回、VSCodeの検索機能を初めて使用したが、めちゃくちゃ便利なので、今後も使っていきたい。

justify-contentの種類

justify-contentは大きな分類として「位置による配置」と「均等配置」があります。
それぞれの配置方法で値を列挙します。

【位置による配】
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

【均等配置】
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

これだけあります。ただ実際に良く使うものとしては以下になります。

【よく使う値】
justify-content: center;
justify-content: flex-start;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

今回はこのよく使う5つに焦点を当てて解説していきたいと思います。

そもそもjustify-contentとは

簡単に言ってしまうと。
flexboxにおける、コンテナ内のアイテムの整列をするプロパティです。
整列というのは、ExcelやWordにもある、文章の中央揃えや文字の間隔を空ける機能をイメージに近いです。

一応大前提として、flexboxの親クラスをコンテナ、子クラスをアイテムと言います。
これがわからないと理解出来ないのでしっかり区別しましょう。

それぞれの特徴

justify-content: space-between;

１番目のアイテムと最後のアイテムを両端に設置し、残りのアイテムを等間隔に配置します。
値の部分の英語の意味を理解するとより分かりやすくなります。

space→空白
between→間

アイテムとアイテムの「間」に「空白」を入れる。と考えといいでしょう。
また「空白」は当分された値が配置されます。以下参照。

一番イメージしやすい値だと思います。使用頻度も高いです。

justify-content: space-around;

ちょっと考え方が難しいです。まずは英語の意味を理解します。

space→空白
around→周り

アイテムの「周り」に「空白」が均等に配置されます。
言葉だけだと難しいので画像と図を作りました。

アイテムの周りに同じサイズのmarginをつけてる感じです。使用頻度としては、これも結構使われます。

justify-content: space-evenly;

一見「space-around」に近いですが、全ての「空白」が「均等」に配置されます。
英語の意味通りです。

space→空白
evenly→均等

空白が全て均等なので非常に分かりやすい値です。使用頻度としては、これも結構使われます。またspace-aroundとどっちを使うかよく迷います。

justify-content: center;

これは簡単です。コンテナの中心にアイテムが配置されます。

justify-content: flex-start;

これも簡単なのですが、使い所に関しては悩むところがあります。コンテナの「左」から配置が始まります。
ちなみにflex-endだと「右」から配置されます。
正直今のところ「justify-content:normal;」「justify-content:start;」と違いが分からないです。(わかる人いたら教えて)
ただしレスポンシブで値を上書きする時によく見かけます。

最後に

今回はだいぶ内容が薄くなってしまいました。
ただjustify-contentはdisplay:flex;とセットでよく使うので復讐になってよかったです。
それぞれ実際に使う際に気をつけないと行けない点があってそれも記事にしたかったのですが時間の関係でまとめられませんでした。手が隙次第まとめていきます。