CSS - yagisawatakuya/Wiki GitHub Wiki

基本可変CSS

CODEPEN https://codepen.io/ccLab/pen/RYWQeq

段組みのCSS - 基本 -

https://lopan.jp/layout2/

Can I use - CSS 対応状況 -

https://caniuse.com/

iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能

body {
  -webkit-text-size-adjust: 100%;
}

天地中央

-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);

-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);

-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);

テキスト両端揃え

text-align: justify;
text-justify: inter-ideograph;

cssで「...」つける

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

複数行あった場合の最後の行に適用（Xはカラムの数、Yはカラムの数+1）

https://github.com/kyaido/knowledge/issues/14

li:nth-child(Xn):nth-last-child(-n+Y) ~ li {
    /* Add style rules */
}

デザインのアクセントに使えるラインやボーダー

https://coliss.com/articles/build-websites/operation/css/css-snippets-for-borders.html

ボーダーいろいろ

https://codepen.io/ibrahimjabbari/pen/ozinB https://codepen.io/ibrahimjabbari/pen/ozinB https://codepen.io/ibrahimjabbari/pen/ozinB

レース

https://kukuruku.co/post/lace-patterns-in-css/

ジグザグ

https://codepen.io/argo49/pen/ztpvb https://codepen.io/HollowMan/pen/uwstc https://codepen.io/joeyhoer/pen/EraAu

両脇にライン

https://codepen.io/jackbrewer/pen/yOPege https://theorthodoxworks.com/web-design/transparent-both-ends-of-the-border-css/

タイトル背景にグラデーション

https://codepen.io/murphyrandle/pen/bAjBi

グラデーションのボーダー

https://codepen.io/elifitch/pen/dorXeB

CSSで三角形

https://saruwakakun.com/html-css/reference/speech-bubble http://uchimiku-web.blog.jp/archives/64403317.html

囲み枠サンプル

https://saruwakakun.com/html-css/reference/box https://codepen.io/SirDaev/pen/dYprKz

ボタンサンプル

https://saruwakakun.com/html-css/reference/buttons

リボンサンプル

https://saruwakakun.com/html-css/reference/ribbon

蛍光ペンサンプル

http://plustrick.com/css_marker/

strong {
  background: linear-gradient(transparent 40%, #FFB96D 40%); 
  position: relative;
} 
strong:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 16px solid #FFB96D;
    border-left: 6px solid transparent;
    position: absolute;
    bottom: 0;
    left: -6px;
}
strong:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid #FFB96D;
    border-right: 6px solid transparent;
    position: absolute;
    bottom: 0;
    right: -6px;
}

CSSで最後の行にだけスタイルを適用する公式

https://github.com/kyaido/knowledge/issues/14

グラデーションで隠したテキストを「もっと見る」でスライド表示

http://metrograph.jp/gradation_paragraph/ http://metrograph.jp/css_gradation_paragraph/ http://gimmicklog.main.jp/jquery/823/

IE用ハック

:root .shorei_mov ul {
  margin-top: 30px\0/; /* IE9 */
}
@media all and (-ms-high-contrast: none){
  .shorei_mov ul {
    margin-top: 30px; /* IE10 */
  }
}
_:-ms-lang(x), _::-webkit-meter-bar,.shorei_mov ul {
     margin-top: 30px; /* Edge */
}

minmax()

Media Queries無しでレスポンシブ https://coliss.com/articles/build-websites/operation/css/how-to-use-minmax.html https://bitsofco.de/how-the-minmax-function-works/

calc()

width: calc(33.333% - 20px);
width: calc(子要素 / 親要素 * 100%);

http://unitopi.com/css3-calc/ https://codepen.io/dashboard/

文字詰め

自動カーニング

font-feature-settings: "palt";

https://ics.media/entry/14087

Android4.4以上で実装可能CSS

https://qiita.com/m-shinozaki/items/85645f72655e142d05eb

■ CSS background-position edge offsets

background-position: right 5px bottom 5px; 

■ CSS Filter Effects

/* グレースケール50% + ブラー5px */
filter:grayscale(0.5) blur(5px);

■ calc() as CSS unit value

// 横100%のコンテンツだけど左右20pxずつ短くしたい時
width : calc(100% - 40px);