投稿日：2021-01-23T23:39:38+09:00

レスポンシブページの作り方

導入

最近レスポンシブなwebページを作っています。
大まかに言うと1024px未満の横幅を持つデバイスではコンテンツの比率を維持したまま拡縮するように。
1024px以上であれば横幅が変わっても一定のサイズ（例えば1000pxのまま）で見れるようにしています。

そんなページを作る際のテクニックになります。

結論

サイズを指定する際の単位にpxではなくremを使用します。

SPサイズでデザインが上がってきた場合、320px,375px,414pxというサイズになっていることが多いです。
たとえば375pxのデザインが回ってきたとしましょう。
その場合は以下のようにします。
html {
  // 基準サイズ（375pxで1pxになるように設定）
  // 1pxになるようにしているのは、remのときに小数点を打つのが面倒だからです
  font-size: calc(100vw / 375);

  @media screen and (min-width: 1024px) {
    // PCサイズでは常に固定
    font-size: 1px;
  }
}
body {
  // 全体的に多用するフォントサイズが10px想定ならbodyで設定します
  font-size: 10rem;
}
解説

remというのは最上位、つまりhtml要素の文字サイズを基準にした相対な単位です。
htmlでfont-sizeが10pxなら1rem=10px、24pxで設定していたら1rem=24pxになります。

つまりhtml配下の子孫要素に使用する単位をremにすることで、html要素の文字サイズに連動するページが作成できます。
font-sizeは言うに及ばず、width,height,margin,paddingなどにも使えます。
borderにも使えますが、基準にした横幅(375pxとか）より小さいとピクセルで表した際に0.8pxとかになって消えてしまうかもしれません（未検証です）。

相対指定でコンテンツサイズ大きくなりすぎたり小さくなりすぎるときはmin-width,max-width,min-height,max-heightが使えます。
左右余白を調整して真ん中に寄せたい場合はmargin: 0 auto;で調整できます。

~~文字サイズはmin-font-size,max-font-sizeなんてのがあります。~~
わたしの妄想の産物で、実装されていません。
かわりにfont-sizeでmin関数などが使えるブラウザがあるようです。
ちなみにmin関数ってこんなものです。

わたしはこの辺を使うことでどーにかこーにかレスポンシブなページを実現してます。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T20:51:38+09:00

【初心者でもわかる】bordreを2重に引くいろいろな方法

どうも7noteです。2重線を引くいろいろな方法を紹介

基本的にborderの指定は1要素につき上下左右それぞれ1線しか指定できません。
そうなった場合2重にborderを付けることができません。

なので、2重にborderを付けたい場合に使える様々な方法を紹介していければと思います。

方法その① doubleで2重線を引く
index.html
<div class="doubleline">
     
</div>
style.css
.doubleline {
  width: 100px;
  height: 100px;
  border: double 4px #000;  /* 2重線を引く */
}
一番簡単に2重線を引く方法です。

注意点
・指定は必ず2px以上でないと反映されない(2pxもくっついて1本になるので)
・2本とも同じ色にしかできない
・線と線の間は調整できない
・線の太さや右側だけ2重にするなどの多様性はない。

方法その② 影を使う
index.html
<div class="doubleline">
     
</div>
style.css
.doubleline {
  width: 100px;
  height: 100px;
  border: solid 2px #f00;     /* 内側の線 */
  box-shadow: 0 0 0 2px #00f; /* 外側の線に見える影 */
}
影を使った方法です。あまり多様性はない。

注意点
・線と線の間は常にくっつく。
・あまり多様性はない。四角形もしくは直線を2重にしたい時に使うくらい。

方法その③ 疑似要素を使う
index.html
<div class="doubleline">
     
</div>
style.css
.doubleline {
  width: 100px;
  height: 100px;
  border: solid 2px #f00; /* 内側の線 */
  position: relative;     /* 基準値とする */
}

.doubleline::before {
  content: "";              /* 疑似要素には必須 */
  display: block;           /* ブロック要素にする */
  width: calc(100% + 8px);  /* 適度な大きさを指定 */
  height: calc(100% + 8px); /* 適度な大きさを指定 */
  border: solid 2px #00f;   /* 外側の線 */
  position: absolute;       /* 相対位置に指定 */
  top: -6px;                /* 大きさに合わせて微調整 */
  left: -6px;               /* 大きさに合わせて微調整 */
}
注意点
・ソースも短く、多様性があり使いやすい。
・大きさの調整は計算してもいいし、目分量でいい感じにする。

afterも使って3重にすることも可能。

方法その④ 要素を2重にする
index.html
<div class="fst_line">
  <div class="sec_line">
     
  </div>
</div>
style.css
.fst_line {
  width: 100px;
  height: 100px;
  border: solid 2px #f00; /* 外側の線 */
  padding: 3px;
  box-sizing: border-box; /* paddingとborderの計算を簡単にする */
}

.sec_line {
  width: 100%;
  height: 100%;
  border: solid 2px #00f; /* 内側の線 */
  box-sizing: border-box; /* paddingとborderの計算を簡単にする */
}
無理に1つの要素で作らずに、2つのdiv要素を用意する。
この方がタグは増えるが綺麗に作れるし多様性もある

注意点
・ソースが少しだけ長くなる。
・意味のない装飾用のタグになってしまう。

おまけ

線をずらして重ねてオシャレに配置する方法
index.html
<div class="doubleline">
     
</div>
style.css
.doubleline {
  width: 100px;
  height: 100px;
  border: solid 2px #f00; /* 1本目の線 */
  position: relative;     /* 基準値とする */
}

.doubleline::before {
  content: "";            /* 疑似要素には必須 */
  display: block;         /* ブロック要素にする */
  width: 100%;            /* 適度な大きさを指定 */
  height: 100%;           /* 適度な大きさを指定 */
  border: solid 2px #00f; /* 2本目の線 */
  position: absolute;     /* 相対位置に指定 */
  top: 4px;               /* 大きさに合わせて微調整 */
  left: 4px;              /* 大きさに合わせて微調整 */
}

.doubleline::after {
  content: "";            /* 疑似要素には必須 */
  display: block;         /* ブロック要素にする */
  width: 100%;            /* 適度な大きさを指定 */
  height: 100%;           /* 適度な大きさを指定 */
  border: solid 2px #0f0; /* 3本目の線 */
  position: absolute;     /* 相対位置に指定 */
  top: 12px;               /* 大きさに合わせて微調整 */
  left: 12px;              /* 大きさに合わせて微調整 */
}
↓同系色なら

まとめ

単に1本線を引くよりも、ちょっとアクセントがあってオシャレにできるかも。
直線にも応用できるので、使ってください。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T19:51:34+09:00

Webサービスにおけるダークモード対応方法

先日、携わらせていただいているSpotlightというサービスのデザインリニューアルをしました。
その際にダークモードに対応したので、それの知見共有です。

ダークモードの対応方法

CSSでの対応です。
こんな感じで対応したい部分をメディアクエリの中に書き込みます。
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}
それだけ！

ダークモード、ライトモードの切り替え方法

これが苦労しました。
Spotlightでは以下仕様でダークモードに対応しています。

未ログインのユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定していないユーザー → 端末のデフォルト設定
ログイン済かつサービス内でテーマ設定しているユーザー → 設定に合わせる

コードにするとこんな感じ。
document.documentElement.setAttribute('theme', getTheme());

function getTheme() {
    const userTheme = localStorage.getItem('user');
    if (userTheme) {
        return userTheme;
    }
    const isDark = matchMedia('(prefers-color-scheme: dark)').matches;
    return isDark ? 'dark' : 'light';
}
@media (prefers-color-scheme: light) {
  :root {
    ...
  } /* 端末設定がライトテーマ */

  :root[theme="dark"] {
    ...
  } /* 端末設定がライトテーマかつサービス設定がダークテーマ */
}

@media (prefers-color-scheme: dark) {
  :root {
    ...
  } /* 端末設定がダークテーマ */

  :root[theme="light"] {
    ...
  } /* 端末設定がダークテーマかつサービス設定がライトテーマ */
}
:rootについてはこの記事みてくれると意味がわかるかと

サービス内でテーマ設定をするとlocalStorageでデータが保持されます。
localStorageの他にも色々ありますが、今回はユーザーの使用する端末ごとに設定変更ができるよう、localStorageにしています。

HTMLに<html theme="">が入って、切り替わる仕組みなのでCSSではコメントアウトのように対応したい部分のCSSを書き込みます。

さらに、テーマ設定でテーマを切り替えなきゃいけないのでそれも実装します
SpotlightはToggleボタンをClass名切り替えで実装しているので、ちょっとややこしいため今回はボタンクリックしたら切り替わるようにします
<button onclick ="changeTheme(event)"></button>
function changeTheme(ev) {
  const currentTheme = document.documentElement.getAttribute('theme');
  const newTheme = currentTheme == 'dark' ? 'light' : 'dark'
  document.documentElement.setAttribute('theme', newTheme);
  localStorage.setItem('user', newTheme);
}
実際どんな感じで動作するかはぜひアカウント登録して確かめてください。

ダークモードの色について

最近はいろんなサービスでダークモードが採用されてるので、Spotlightはどんな感じでいこうかな〜と他サービスを調査したのでこれからダークモードを採用される方はぜひ参考にしてください。

iOS
背景: #000000
サブ背景: #1C1C1E
文字: #FFFFFF
サブ文字: #EBEBF5 60%
Android
背景: #121212
サブ背景: #121212 + #FFFFFF 12%
文字: #FFFFFF
サブ文字: #FFFFFF 60%
Twitter
ダークブルー
背景: #15202B
サブ背景: #15212B
文字: #FFFFFF
サブ文字: #8899A6

ブラック
背景: #000000
サブ背景: #15181C
文字: #D9D9D9
サブ文字: #6E767D
Facebook
背景: #18191A
サブ背景: #242526
文字: #E4E6EB
サブ文字: #B0B3B8
Spotlight
背景: #000000
サブ背景: #222222
文字: #FFFFFF
サブ文字: #999999
文字と背景色のコントラスト比の数値は、19〜14くらいがチラつかずに見やすい文字になると思います。

気になる箇所あれば連絡ください。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T18:54:06+09:00

<input type="range"> でつまみを複数表示する

はじめに

初投稿です。お手柔らかにお願いします。

概要

業務で複数のつまみを持つレンジバーが欲しい、という事態が発生したので、この記事(https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/) を参考に実装しました。その備忘録です。

以下のようなものが出来上がります。

See the Pen slidebar-multithumb by takuya115 (@takuya115) on CodePen.

なお、実装にあたり非標準の疑似要素を使っています。
表示の確認にはGoogle Chromeを使っており、ほかのブラウザでは確認していません。
たぶんFireFoxとかだとうまくいきません。

環境(ブラウザ)

Google Chrome バージョン: 88.0.4324.104（Official Build）（64 ビット）

レンジバーを重ねて表示すればつまみは増える

<input type="range"> を使うとレンジバーが表示できます。

しかしこれにはつまみが1つしかありません。
cssも、非標準の要素を含めても増やす方法はなさそうでした。

ではどうするか。

2つのレンジバーを重ねてやればつまみが2つあるように見えます。

実装は以下の通り。
index.html
<div class="slidebar-multithumb">
    <input class="thumb-1" type="range" name="range-1" id="range-1" value="45" min="0" max="100" step="1">
    <input class="thumb-2" type="range" name="range-2" id="range-2" value="55" min="0" max="100" step="1">
</div>
style.css
.slidebar-multithumb {
  display: grid;
  padding: 1rem;
}

.slidebar-multithumb input[type="range"] {
  grid-column: 1;
  grid-row: 2;
}
ここではdisplay: grid;を使って2つの<input type="range">を重ねています。

さて、レンジバーを重ねてつまみが2つある風に表示はできました。
しかし問題が2点あります。

上側のつまみ(ここではid=range-2の方)しか操作できない

下側のつまみが、上側のレンジバーに隠れて見づらい

それを解消していきます。

両方のつまみを操作できるようにする

上側のつまみしか操作できないのは、当たり前ですが、重なっているからです。
そこで、cssのpointer-eventsというプロパティを使って、つまみ部分だけ操作できるようにしてやります。
style.css
.slidebar-multithumb {
  display: grid;
  padding: 1rem;
}

.slidebar-multithumb input[type="range"] {
  grid-column: 1;
  grid-row: 2;
  /* <input type="range">全体の操作を無効にする */
  pointer-events: none;
}

.slidebar-multithumb ::-webkit-slider-thumb {
  /* つまみ部分を示す疑似要素-webkit-slider-thumbで、つまみだけ操作できるようにする */
  pointer-events: auto;
}
これで両方のつまみが操作できるようになりました。

レンジバーのスタイルを調整する

下側のつまみが見づらいので、あとは見た目を整えてやればOKです。
疑似要素-webkit-slider-thumbと-webkit-slider-runnable-track(レンジバーの溝部分)を使ってスタイルを指定してやります。
style.css
/* 色設定 */
:root {
  --bg: rgb(224, 224, 224);
  --bar: rgb(0, 255, 0);
}

.slidebar-multithumb {
  display: grid;
  padding: 1rem;
}

.slidebar-multithumb input[type="range"] {
  grid-column: 1;
  grid-row: 2;
  pointer-events: none;
  /* レンジバーの背景を透明にする */
  -webkit-appearance: none;
  background: none;
  /* わかりやすいのでボーダーつける */
  border: 1px solid;
  /* overflow: hiddenにすると溝に色を付けたとき、その部分が巨大化しない */
  overflow: hidden;
}

.slidebar-multithumb ::-webkit-slider-thumb {
  pointer-events: auto;
  /* つまみ部分を長方形にする */
  -webkit-appearance: none;
  width: 0.8rem;
  height: 1.5rem;
}

/* 最初のつまみを上にする(順番をわかりやすくするため) */
.thumb-1 {
  z-index: 1;
}

/* つまみの溝の背景。thumb-1をnoneにすることで後ろのthumb-2が表示される */
.thumb-1::-webkit-slider-runnable-track {
  background: none;
}

.thumb-2::-webkit-slider-runnable-track {
  background: var(--bg);
}

/* それぞれのつまみの設定。box-shadowでつまみの左側を埋める色を設定できる。 */
.thumb-1::-webkit-slider-thumb {
  background: rgb(255, 139, 139);
  box-shadow: -100vw 0 0 100vw var(--bg);
}

.thumb-2::-webkit-slider-thumb {
  background: rgb(77, 169, 255);
  box-shadow: -100vw 0 0 100vw var(--bar);
}
レンジバーの背景を一旦すべてnoneにして、そのあとつまみと溝部分にそれぞれ背景を設定します。これで、つまみとつまみの間に色付きの部分を表示できるようにしています。

参考にした記事では:afterとcalc()を使って表示するようにしてましたが、なんとなく複雑だったので採用しませんでした。

ただしこの方法では、下側のthumb-2のつまみが、上側のthumb-1のつまみより左にいくと隠れてしまうので、その辺はJavaScriptとかでよしなにしてやってください(なお参考記事の方法ではそうなりません)

いずれにせよ、これで上で示したような2つのつまみを持つレンジバーが作成できました。
inputタグをそのまま利用しているので、JavaScriptでvalueを取得するときも簡単です。

以上、<input type="range"> でつまみを複数表示する方法でした。

参考

Multi-Thumb Sliders: Particular Two-Thumb Case | CSS-Tricks
https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

pointer-events - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

::-webkit-slider-thumb - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-slider-thumb

::-webkit-slider-runnable-track - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-slider-runnable-track

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T16:00:44+09:00

CSS/JSでおしゃれなタブを実装！

こちらを参考に、
おしゃれなタブ切り替えをポートフォリオサイトに実装しました。

タブをクリックすると、タブの下線が移動して切り替わる、非常にシンプルなタブです。
各タブの内容がディレイ表示されます。

HTMLを記述

HTML

<h1>Lava lamp multiple tabs</h1>
<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'>Button 1</span>
    <span class='content2'>Button 2</span>
    <span class='content3'>Button 3</span>
    <div id='lamp' class='content1'></div>
  </div>
  <div class='tab-content'>

    <div class='content1'>
        This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.
    </div>

    <div class='content2'>
        This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.
    </div>

    <div class='content3'>
        This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.
    </div>

  </div>
</div>
<div class='credit'>
</div>

tab-buttonsでタブに表示させる名前、
tab-contentでタブ内に表示させるコンテンツを表示しています。

CSSを記述

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body{
  padding:0;
  margin:0;
  background:#fff;
}
h1{
  text-align:center;
  font:300 40px 'open sans',sans-serif;
  color:#666;
  text-transform:uppercase;
}
.tabs{
  width:50%;
  margin:10px auto;
  position:relative;
}
.tab-buttons span{
  font:400 14px 'open sans',sans-serif;
  color:#333;
  background:#eee;
  cursor:pointer;
  border-bottom:2px solid #ddd;
  display:block;
  width:33.3%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
}
.tab-content{
  border-bottom:3px solid #ddd;
  padding:15px;
  background:#eee;
  display:inline-block;
  font:400 13px 'open sans',sans-serif;
  color:#333;
}
#lamp{
  width:33.3%;
  height:2px;
  background:#333;
  display:block;
  position:absolute;
  top:40px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content2{
  left:33.3%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content3{
  left:66.6%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}

自身のサイトに実装するときは、bodyあたりの記述はいったん削除しました。

JavaScriptを記述

JavaScript

$('.tab-content>div').hide();
$('.tab-content>div').first().slideDown();
  $('.tab-buttons span').click(function(){
    var thisclass=$(this).attr('class');
    $('#lamp').removeClass().addClass('#lamp').addClass(thisclass);
    $('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      }
      else{
        $(this).hide();
      }
    });
  });

まとめ

Javascriptの記述が簡単なので、とても簡単に実装できました！
jQueryの読み込みをしていないと動かないのでそこだけ注意です◎

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T01:41:38+09:00

世界一わかりやすいグリッドデザイン入門

前提知識

HTMLの基礎

CSSの基礎

概要

複雑そうなグリッドデザインもコツを掴めれば簡単に実装できます！
今回はそんなグリッドデザイン超入門初心者向け講座です！！

早速やってみよう

とりあえずindex.htmlとstyle.cssを作成

最初は超入門
index.html
  <div class="oya">
    <div class="red-box"></div>
    <div class="blue"></div>
  </div>
style.css
body {
  margin: 0;
}
.oya {
  display: grid;
  grid-template-rows: 400px;
  grid-template-columns: 50% 50%;
  width: 100%;
}

.red-box {
  background-color: red;
}
.blue-box {
  background-color: blue;
}
この場合columnが横に50%ずつ
rowが縦に400pxって感じになります！

ちょっと応用
index.html
<div class="oya">
    <div class="red-box"></div>
    <div class="blue-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
  </div>
style.css
.oya {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 200px 100px;
}

.red-box {
  background-color: red;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  /* 1から2  */
}
.blue-box {
  background-color: blue;
  grid-row: 2/3;
  grid-column: 1/2;
  /* rowは2から３、columnは1から2 */
}

.yellow-box {
  background-color: yellow;
  grid-row: 1/3;
  grid-column: 2/3;
  /* rowは1から3, columnは2から３  */
}

.green-box {
  background-color: green;
  grid-row: 3/4;
  grid-column: 1/3;
  /* rowは3から4
  columnは1から3 */
}
まず始めに親要素に
display: gredを宣言します。
そのあとrowとcolumnの配置をそれぞれ決めていきます！

あとは簡単！
grid-rowとgrid-columnで各要素の場所を指定するだけです！

今回は超入門と言うことで簡単な構成でしたがもっと応用すると複雑なデザインができると思います！

お疲れ様でした！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-23T00:36:43+09:00

(自分用)フロントエンドメモ

項目

コンテナにトリミングせず良い感じに画像をはめ込む

アンカー使ったリンクでPOSTしてvalueを渡す

PDFを表示する

縦中央寄せ(毎回検索してる気がする)

コンテナ内改行

リンクの下線消す

区切り線を引く

1.コンテナにトリミングせず良い感じに画像をはめ込む

object-fit: contain;
css
img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
2.アンカー使ったリンクでPOSTしてvalueを渡す
html
<form  name="form_ex" action="/index method="post">
 <input type="hidden" name="test_send" value=0>
 <a href="javascript:フォームのname.submit()">リンク名</a>
</form>
3.PDFを表示する

embed
html

<embed src="file_name.pdf" width="800px" height="2100px" />
4.縦中央寄せ(毎回検索してる気がする)
css
.test {
  height: 150px;
  line-height: 150px;
}
5.コンテナ内改行
css
.test{
  word-wrap: break-word;
}
6.リンクの下線消す
css
.test{
  text-decoration: none;
}
7.区切り線を引く

hrタグ

alignにleft,center,rightが入れられる
html
<hr size="1px" width="600px" color="gray" align="center">

　 Tweet
Qiitaで続きを読む

20210123のCSSに関する記事は7件です。

レスポンシブページの作り方

導入

結論

解説

【初心者でもわかる】bordreを2重に引くいろいろな方法

どうも7noteです。2重線を引くいろいろな方法を紹介

方法その① doubleで2重線を引く

方法その② 影を使う

方法その③ 疑似要素を使う

方法その④ 要素を2重にする

おまけ

まとめ

おそまつ！

Webサービスにおけるダークモード対応方法

ダークモードの対応方法

ダークモード、ライトモードの切り替え方法

ダークモードの色について

iOS

Android

Twitter

Facebook

Spotlight

<input type="range"> でつまみを複数表示する

はじめに

概要

環境(ブラウザ)

レンジバーを重ねて表示すればつまみは増える

両方のつまみを操作できるようにする

レンジバーのスタイルを調整する

参考

CSS/JSでおしゃれなタブを実装！

HTMLを記述

CSSを記述

JavaScriptを記述

まとめ

世界一わかりやすいグリッドデザイン入門

前提知識

概要

早速やってみよう

ちょっと応用

(自分用)フロントエンドメモ

項目

1.コンテナにトリミングせず良い感じに画像をはめ込む

2.アンカー使ったリンクでPOSTしてvalueを渡す

3.PDFを表示する

4.縦中央寄せ(毎回検索してる気がする)

5.コンテナ内改行

6.リンクの下線消す

7.区切り線を引く

日付別

タグ一覧