投稿日：2019-02-28T23:45:49+09:00

はみ出たtableを横スクロールで滑らかに表示するCSS

たったの4行だけ

<table></table>に下記CSSを当てるだけ。
table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
2行目：隠れた部分をx方向（=横）にスクロールして表示する
3行目：自動で改行しない（←必要であれば）
4行目：滑らかにスクールする

ただ、セルの幅が効かない

<table></table>に上記CSSを一括で当てると、予期せぬレイアウト崩れが起きる。
スクロールが必要ないテーブルの場合、セルは中身の幅にフィットした横幅までしか広がらないので、右側に空白が生まれてしまう・・・

解決策その１：tableをdivで囲む

スクロールが必要なテーブルだけに、CSSが当たるようにする。
.scroll-table table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
解決策その２：tbodyをテーブル要素とする

table下のtbodyをdisplay:table;でtable要素にすることで、幅を指定することができる。
table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
table tbody {
  width: 100%;
  display:table;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-28T20:18:25+09:00

40.【transform】

1.transform

要素に対して移動、回転、伸縮、傾斜の変形をすることが可能
translate・・・・・・移動
rotate・・・・・・回転
scale・・・・・・伸縮
skew・・・・・・傾斜
セレクタ　{
  transform: translate(X軸,Y軸);
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-28T18:16:10+09:00

【静的サイト】AWS独自ドメインでhttpsにするやり方

目的

独自ドメインにてhttpsにする。

使う機能

ASWの以下サービスを使います。
S3
AWS Certificate Manager(ACM)
CloudFront
Route 53

前提

S3にてアップ済み。
独自ドメインを取得している。

やり方

①AWS Certificate Manager(ACM)にてSSL/TLSの証明書を取得する。

(1)AWSのサービス検索でcmと打ったら出てきます。
(2)ACMの中に入ったら、必ず、リージョンを米国東部（バージニア北部）に変更しましょう。
　かなり重要です。私もここでハマりました。。
(3)パブリック証明書のリクエストを選択して、「証明書のリクエスト」をクリック
(4)ドメイン名の空欄に独自ドメインを入れましょう。
　例）*.example.com
　米印をつけて入れると、ワイルドカードになります。
　「次へ」をクリック
(5)「DNSの検証」を選択して、「確認」をクリックし、「確定とリクエスト」をクリック。
(6)すると、証明書の画面になり、状況が保留になっていると思います。
　　名前のところをクリックすると広がり、「route53でのレコードの作成」があると思いますので、クリックします。
　　route53以外で、独自ドメインを取得された方は、別の方法でレコードを作成する必要があります。
(7）しばらく待つ（長いと１時間以上）と状況が「発行済み」に変わります。

②CloudFrontの設定をする。

(1)AWSのCloudFrontへアクセスして、「create distribution」をクリックします。
(2)「Get Started」をクリックします。
(3)「Origin Domain Name」の空欄をクリックすると、S3のドメインが上がってくるので、選択します。
(4)Alternate Domain Names(CNAMEs)に独自ドメイン（サブ）を記載します。
　（例）www.example.com
(5)SSL Certificate
Custom SSL Certificate (example.com)を選択します。
　空欄をクリックすると先ほど登録した証明書が出てくると思いますので、選択します。
　この時、もしリージョンを東京で登録した場合は、出てきません。。
他は全てデフォルトのままで問題ないです。「create distribution」をクリックします。
(6)暫く待ち、Statusが『In Progress』から『Deployed』になれば完了です。

③route53の設定をする。

サブドメインのレコードセットでtypeAでAlias「yes」ですると、
『Alias Target』には作成したCloudFrontディストリビューションが選択できるようになっているので、
選択します。
これで、完了です。

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-28T12:48:48+09:00

CSS animation で遊び倒す - Useful Buttons -

CSS animation day38 となりました。
毎日記事を投稿しているせいで、画像アップロード制限(100MB月)されました。
大変申し訳ないのですが、解除されるまで、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。

今日で2月が終わりますね。
本日も、マイクロインタラクションで使える、ボタンを作っていきます。
前回のボタンは確かに綺麗ですが、機能的に美しいとは言えません。

1. 完成版

See the Pen Next Button by hiroya iizuka (@hiroyaiizuka) on CodePen.

2.なぜか？

Medium や、impress の記事によると
ハンバーガーメニューがあるとユーザーはクリックしなかったり、再訪問やPV数が落ちることがあるそうです。

なぜかというと、ハンバーガーメニューを見るだけでは、どんな情報が隠れているか、どんなアクションが次に起こるかがわからず、わざわざ重い腰を上げてクリックする気にならないからと思います。(ハンバーメニューは完全に悪だ！という意見に対し擁護する声も散見されますが、確かにUserにとって、あまり優しくないデザインと個人的に思ってます。)

ボタンに当てはめて考えてみると。
ベストなボタンとは、押す前から、どんなボタンかが一目でわかり、かつ押した(触れた)瞬間に、想像通りの動きをしてくれるボタンです。(むやみやたらに豪華で派手な演出をつける必要ないです。)こういう時に予想外な奇天烈のアニメーションは、人を驚かせてしまい、その0コンマ数秒がおそらく、ユーザーにとって負の感情を産ませてしまう可能性があります。

デザイナーのエゴをすて、単一の動きでマイクロインタラクションを表現する必要があり、今日はそこを意識して作っていきましょう。

3. 参考文献

Button Hover Effects | Html CSS
Button hover effects with box-shadow

4. 分解してみる

❶.
マークアップしましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="button">
        Button
      </div>
    </div>
  </body>
</html>
styles.scss
body {
  background: #000;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.button {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #ff7f82;
  font-size: 24px;
  border-radius: 30px;
  border: 2px solid #ff7f82;
  background-size: 400%;
}
これで、背景が黒いところに、ボタンが中央に配置されました。
(画像なくて申し訳ありません m(__)m)

❷.
では、どんなアニメーションをつけると良いでしょうか？　
ボタンを押した時に、次のページへ進む、機能を持つものとします。

「次に進む」、
1. 左から右に、ボタンの背景の色が変わる 2. 文字がNext、次へなどと、みただけでボタンの機能がわかるものとなっている 3. →が付いている

などが考えられます。(他にもアイデアがあったら教えてください。)

注意点として、左から右の一方向の流れを設定しているため、
逆方向や回転、跳ねる、広がるなどの動きは、microinteractionの流儀から外れてしまいます。デザイナーのエゴを捨てましょう。

上記3つのアニメーションを取り入れます。
styles.scss
.button {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #ff7f82;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #ff7f82;
  background-size: 400%;

  &:hover {
    animation: insetChange 0.5s ease both;

    &:before {
     animation: arrowChange 0.2s ease-in both;
    }
  }
}

@keyframes insetChange {
  100% {
    box-shadow: 240px 0px 0px 0px #ff7f82 inset;
    color: #fff;
  }
}

@keyframes arrowChange {
  30% {
    color: #fff;
  }
  100% {
    transform: translateX(15px);
  }
}

.button:before {
  position: absolute;
  content: ">>>";
  top: 0px;
  right: 10px;
}
See the Pen Next Button by hiroya iizuka (@hiroyaiizuka) on CodePen.

ポイントは、
・animation の設定に both をつけ、hover終了時のアニメーションを維持でき、hoverを外すと、最初に戻るとこ。
・beforeクラスをつけて、矢印を作り、アニメーションを設定。
ただし、マイクロインタラクションを意識して、左から右に、色も統一感を出しました。
・ease-in をつけることで、はじめゆっくり動き、Buttonのbox-shadowが広がっていくのを待ってから動くことを意識しました。

いい感じですね！　
では、また明日〜！

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-28T11:02:22+09:00

displayいろいろメモ

display:table

カラムの中身の折り返しを抑制する

長い単語の途中で改行を許すにはword-wrapプロパティを使って、値にbreak-wordを設定する。
テーブルセルの中の文字を改行させるには、テーブル全体に幅を指定して、幅を固定する必要がある。
CSS
.table {
  display: table;
  /* 幅を指定して固定する必要がある
    width: 300px;
    table-layout: fixed;
  */
}

.table-cell {
  display: table-cell;
  word-wrap: break-word; /* 単独では効果がない */
}
display:flex

要素をflexboxでレンダリングするには、displayプロパティを利用して値にflexを設定する。
flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ。
☆flexboxとは、コンテンツをレイアウトするために導入された、比較的新しい新しいプロパティ
☆歴史順でだとtable→float→flexboxらしい

flex-wrap

Flexアイテムを所定の幅で折り返す

プロパティには次の値が利用できる
●nowrap
　改行しない
●wrap
　改行する
●wrap-reverse
　wrapと同じだが、並び順が逆。
※初期値はnowrapが設定されている

flex-direction

Flexアイテムの並び順を逆順にする

プロパティには次の値が利用できる

●row
　左から右に配置
●row-reverse
　rowと同じですが、順番が逆
●column
　上から下に配置
●column-reverse
　columnと同じだが、順番が逆
※初期値はrowが設定されている

justify-content

Flexアイテムを左右中央に配置

プロパティには次の値が利用できる

●flex-start
　Flexアイテムを始端配置
●flex-end
　Flexアイテムを終端に配置
●center
　Flexアイテムを中央に配置
●space-between
　Flexアイテムを均等に配置。最初のアイテムは始端に、最後のアイテムは終端に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースの1/2になる
●space-evenly
space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースと同じになる
※初期値はflex-startが設定されている

align-items

Flexアイテムを上下中央に配置
プロパティには次の値が利用できる

●flex-start
　Flexアイテムを上部配置
●flex-end
　Flexアイテムを下部配置
●center
　Flexアイテムを中央配置
●stretch
　Flexアイテムはコンテナいっぱいに広がる
※初期値はstretchが設定されている

align-content

Flexアイテム全体の縦の配置を変更する
※align-contentは、Flexコンテナーに余白がある場合のみ有効

●flex-start
　Flexアイテムを上部に配置。
●flex-end
　Flexアイテムを下部に配置。
●center
　Flexアイテムを中央に配置。
●space-between
　Flexアイテムを均等に配置し。最初のアイテムは上部に、最後のアイテムは下部に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースの1/2になる。
●stretch
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースと同じになる。
※初期値はstretchが設定されている

orderプロパティ

配置の順番を変更することができる。初期値は0
負の値を設定することで先頭に配置することができる。

flex-growプロパティ

Flexアイテムが占有する幅を調整することができる。
flex-growで調整できる幅は、要素の絶対的な幅ではなく、Flexコンテナーが持つ余白。

　 Tweet
Qiitaで続きを読む

20190228のCSSに関する記事は5件です。

はみ出たtableを横スクロールで滑らかに表示するCSS

たったの4行だけ

ただ、セルの幅が効かない

解決策その１：tableをdivで囲む

解決策その２：tbodyをテーブル要素とする

40.【transform】

1.transform

【静的サイト】AWS独自ドメインでhttpsにするやり方

目的

使う機能

前提

やり方

①AWS Certificate Manager(ACM)にてSSL/TLSの証明書を取得する。

②CloudFrontの設定をする。

③route53の設定をする。

CSS animation で遊び倒す - Useful Buttons -

1. 完成版

2.なぜか？

3. 参考文献

4. 分解してみる

displayいろいろメモ

display:table

カラムの中身の折り返しを抑制する

display:flex

flex-wrap

flex-direction

justify-content

align-items

align-content

orderプロパティ

flex-growプロパティ

日付別

タグ一覧