投稿日：2020-02-18T23:50:57+09:00

【HTML&CSS】フッター下部の余白を無くす方法

概要

Webページの画面の高さいっぱいに対して、中身の要素が足りていない場合にはフッターの下に余白ができてしまいます。
この余白を無くしてフッターを最下部にする方法に意外と手こずったことはないでしょうか。
ということで、CSSがどのように反映されるかをしっかり理解してフッター下部の余白を無くす方法を書いていきたいと思います。

フッター下部の余白をなくす方法

早速ですが、解決方法の１つの例が以下になります。
<html>
 <body>
  <div class="wrapper">
   <header>ヘッダー</header>
    <div class="inner">中身</div>
   <footer>フッター</footer>
  </div>
 </body>
</html>
html,body{
     height:100%;
}

.wrapper{
     width: 100%;
     position: relative;
     min-height: 100%;
}

.inner{
     padding-bottom:200px; /*フッターの高さと同じにする*/
}

footer{
     height:200px;
     position:absolute;
     bottom:0;
}
まず、height:100%;の％設定は設定したクラスの親要素に対して適用するものになります。
そのため、htmlから設定していかなければなりません。
htmlをheight:100%;にしているので、bodyをheight:100%;にすればhtmlとbodyの高さが100%になります。

そして、コンテンツを囲んでいるwrapperにmin-heightを設定してあるのが肝です。
私はここをheight:100%;にしていたため、上手く反映されずに時間がかかってしまいました。

もしwrapperをheightで設定した場合は、中身の要素分までしか高さが伸びないので、中身の要素の高さが画面いっぱい分までなければ、footerを最下部にすることができません。
height:100%;にしたとしても中身がなければ、高さは０になります。

しかし、min-heightの場合は最小の高さを指定するので、中身の要素がなくても最小１００％の高さが反映されます。
例えば100pxにした場合は要素の中身が高さ50pxでも100pxまで伸びて、要素の中身が高さ150pxであれば、150pxまで伸びます。

そして、wrapperとfooterにpositionを設定し、footerをbottom:0;にすることで、wrapperの中に含まれているfooterはwrapperの最下部に位置します。
このままだとwrapperの中にfooterが被っているのでpadding-bottomをfooterの高さ分設定して、wrapperからfooterを押し出して最下部に配置します。

以上でフッターの下部に余白は無くなると思います。

こういった簡単に思えることで、時間が取られてイライラしてしまっている方の助けになることを祈ります。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T22:57:27+09:00

Flexboxを使ってレイアウトを作りたい

https://qiita.com/takepon_it/items/694636fc139d9ac1109a
↑の記事の続き的な物を書いていきます。

今回はFlexBoxを使って簡単なレイアウトを作っていきます！

1.プロパティについて

FlexBoxってプロパティめちゃくちゃあって結局何使えばいいんだってなりません？
まぁ多分大半の物は"覚えなくても"大丈夫なんじゃないかなぁって思います。
そこで今回の記事でFlexBoxってこうやって使うんだなぁくらいのイメージが出来たらいいです！

2.完成品のイメージ

こんな感じでブログの記事一覧みたいな物を作っていきます！

3.早速コーティングしていこう！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<title>FlexBox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="group">
    <div class="box">
        <img src="ここに画像">
        <h1>好きなタイトル</h1>
        <p>好きな文</p>
    </div>

    <div class="box">
        <img src="ここに画像">
        <h1>好きなタイトル</h1>
        <p>好きな文</p>
    </div>

    <div class="box">
        <img src="ここに画像">
        <h1>好きなタイトル</h1>
        <p>好きな文</p>
    </div>
</div>
</body>
htmlの記述はこんな感じでいいです！
ここは特に説明する箇所もないので早速CSSの方に移ります！

4.CSSもかいていこう！
style.css
.group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box {
/*ここは自分の好きなようにしてください！*/
}
CSSはこうです！
これを解説していくと

まず.groupっていう箱を作りたいので
display;flex
で.groupを箱にします(親要素という)

①の説明をしますね
これは
flex-wrap: wrap;
というプロパティを使っていて、何故これを使うのかと説明すると
親要素にしたばかりで何もしないと、只々横一列に並ぶだけなんですよね。
しかしこのプロパティを指定して親要素にwidth等を指定すると、下にいくようになります！便利ですね！

そして②の説明ですが、これは図が汚すぎて申し訳ないんですが等間隔っていうことを伝えたい矢印です！
justify-content: space-between;
を使うことによって横並びになっているアイテムを等間隔に設置してくれるめちゃくちゃ便利なプロパティです！
一々margin等を使わなくても綺麗に揃えれるということですね！

この二つのプロパティを使うことによって、完成図みたいなブログの記事一覧っぽい画面を作れました！
.boxはご自身の好みで作ってみてください！

4.最後に

どうでしたでしょうか？
FlexBoxを使えば簡単に綺麗にレイアウトを作れることが分かったと思います。
今回紹介したプロパティは本当にごく一部なものですが、それだけでも十分にいい感じの物が作れます！

この記事が自分と同じような初学者の参考になったらうれしいです！

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T22:01:04+09:00

フォントサイズの定義の仕方について

フォントサイズをコードで書いている中で、emやrem、%が出てきたのでその関係について調べました。

定義方法

フォントサイズの定義方法は、絶対値と相対値の2つがあります。

絶対値：他の要素に依存せずに定義される。px

相対値：他の要素によって定義される。%、em、rem、vw、vh

それぞれのフォントサイズの定義について

px

絶対値での指定となるので、どのデバイスでも、同じピクセルサイズで表示されます。

%

考え方：「親要素の◯%」となります。
stylusで書くとこのような感じです。
html
  font-size 20px

p
  font-size 50% /* これは10pxになる */
em

考え方：「親要素の◯」となります。
基本的には%と同じ考え方で、小数点で考える点だけが違う点となります。
emは、アルファベットの大きさのベースとなる「M」に由来しているとのことです。
html
  font-size 20px

p
  font-size 0.5em /* これは10pxになる */
rem

考え方：「もととなっている要素の◯」となります。
emに「root」のrを足したのがこのremで、親要素が複雑でわかりにくくなった場合も基準点を同じにしておくことで簡単に対応できるのがメリットになります。
ルート要素とはhtml要素のフォントサイズのことです。
html
  font-size 100% /* 100%は16pxになる */

div
  font-size 2em /* これは32pxになる */
vw

考え方：「画面幅の◯」となります。
vwは「viewport width」の略で、ビューポートの幅に対してどれくらいの幅にするのかを定義しています。
画面幅によって細かく文字サイズを調整できるので、目立つ文字列に使用されたりします。
p
  font-size 0.05vw /* 画面幅が1000pxのとき、50pxのフォントサイズ。500pxの画面幅のとき、25pxのフォントサイズ */
どのように使うのが良いのか

ブラウザごとにフォントの大きさを変える必要がない場合は、remやemで書くのが良いでしょう。
remかemかはその状況にもよります。

基準となるフォントサイズを font-size = 62.5% とすると、そのフォントサイズを10pxにすることができます。

ですので
html
  font-size 62.5% /* これで基準が10pxになる　*/

h1
  font-size 3rem /* h1は基準の3倍、つまり30pxになる　*/
とすることができます。
これで、かなり使いやすく、かつ変更にも強いフォントサイズを作ることができます。

また一つ学びました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T19:47:50+09:00

textareaの右下のスタイルを1行で消す

目的

textareaのこのチョンチョンを消すcssを毎回忘れるのでメモをソッと残しておきます

解決法
textarea {
  resize: none;
}
結果

無事に消えましたっ

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T18:52:22+09:00

【CSS】フォームのセレクトボックスに角丸などのスタイルを適用する

概要

フォーム要素の<select>のスタイルを変更するため、元のスタイルを非表示にしてからスタイルを適用した。元のスタイルを表示しない場合矢印も消えるため、独自の矢印を表示する方法もあわせて調べた。

デフォルトの<select>は以下のようになる。
HTML
<select name="sample" id="select" class="select">
  <option value="" default></option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
</select>
そのままスタイルを変更してみる

デフォルトのスタイルから、

幅・高さ

枠線の色や太さ・角丸

背景色

文字の色や大きさ

を変更してみる。
SCSS
.select {
  width: 150px;
  height: 50px;
  border: 3px solid #FF0000;
  border-radius: 20px;
  background-color: #FFFF00;
  color: #0000FF;
  font-size: 20px;
}
　　　　　←Chrome　Firefox→

Chromeの場合は角がborder-radiusで指定した値になっていない（他の値を指定しても変わらず）。
Firefoxでは、矢印部分が違和感のあるスタイルになってしまう。

<select>のスタイルを消す

そこで、元々の<select>のスタイルが表示されないようにして、その上から好きなスタイルを適用することにする。
appearance: none;を指定することで元々のスタイルを無効にできる（ベンダープレフィックスが必要）。
SCSS
.select {
  &::-ms-expand {
    display: none; // IE
  }

  -webkit-appearance: none; // Chrome, Safari (Firefoxでも効いた)
  -moz-appearance: none; // Firefox
  appearance: none;

  border: 3px solid #FF0000;
  border-radius: 20px;
  width: 150px;
  height: 50px;
  background-color: #FFFF00;
  color: #0000FF;
  font-size: 20px;
}
　　　　　←Chrome　Firefox→

これで、意図したスタイルを適用できるようになった。

再び矢印を表示する

元々のスタイルを打ち消したことで、矢印が表示されなくなり、セレクトボックスかどうか少し分かりづらくなった。そこで、改めてそれっぽい矢印を表示することにする。
::beforeや::afterで作成するのが簡単だが、<select>には追加できない。そのため、<div>等で<select>を囲み、その<div>に擬似要素を追加する。
SCSS
.select-container { // div要素
  overflow: hidden;
  position: relative; // ::before要素をabsoluteで表示するため

  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "▼"; // これだけでもそれっぽい下三角矢印にできる
  }

  border: 3px solid #FF0000;
  border-radius: 20px;
  width: 150px;
  height: 50px;

  .select {
    width: 100%;
    height: 100%;

    &::-ms-expand {
      display: none;
    }

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background: #FF0000;
    border: none; // noneにしないと見えてしまう
    padding: 0 20px;
    color: #0000FF;
    font-size: 20px;
  }
}
<select>のwidthやheightを指定しない場合、以下のようになってしまう。

borderで三角を作る

::beforeや::afterのborderを利用して、矢印を表示してみる。
要素のwidth・heightを0にしてborderを表示すると、以下のように三角ができる。
SCSS
  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid #555555;
    border-left: 15px solid #FF00FF;
    border-right: 15px solid #ABCDEF;
    border-bottom: 15px solid #000000;
  }
これを利用して、下三角矢印を表示する。
SCSS
.select-container {
  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid #555555;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}
2つ組み合わせて上下矢印を作成することもできる。
SCSS
.select-container {
  &::before {
    position: absolute;
    top: 27%;
    right: 15px;
    content: "";
    width: 0;
    height: 0;
    border-bottom: 10px solid #00FF00;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }

  &::after {
    position: absolute;
    top: 54%;
    right: 15px;
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid #00FFFF;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }
}
矢印部分をクリックできるようにする

現状では、矢印部分をクリックしても<select>が反応しない。

そこで、pointer-events: none;を指定して擬似要素のクリックを無効にする。
SCSS
.select-container {
  &::before {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    content: "▼";
    pointer-events: none;
  }
}
矢印部分もクリックできるようになった。

まとめ

appearance: none;で元の<select>のスタイルを表示しないようにして、新たにスタイルを適用した。

擬似要素で矢印を表示した。

最終形態

See the Pen
select by mmmmk (@mmmmmmk)
on CodePen.

参考

https://copypet.jp/797/

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T15:40:50+09:00

ネイティブアプリっぽいCSSフレームワーク

https://ionicframework.com/jp/docs/

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T12:48:43+09:00

Electronでの印刷時に余白をピッタリ調整する

モチベーション

ElectronではwebContents.print()関数やwebContents.printToPDT()関数を使って簡単に印刷やPDF作成ができます。この時、CSSで印刷サイズをmm等の実物長さで指定することで、実際の印刷時の各種要素の大きさを指定できるので便利です。が、注意しないと余分な余白が入ってしまいます。経験則からくる注意点を情報共有します。

注意点

CSSでpaddingやmarginを正しく設定する。特に設定しない時は、明示的に0mmを設定すること。デフォルトでは0mmでないことがある。

body要素にもpaddingとmarginを明示的に設定する事。実際に余分な余白が消えずに悩みましたが、body要素のmarginがデフォルトで0mmではなかったことが原因でした。

印刷時だけ設定したいCSSは@media print項目で設する

例

body要素の中にdiv要素があり、その中に文章が書かれている場合のCSS記述は次のようになります。
@media print{
  body{
    padding: 0mm;  
    margin: 0mm;   /* これが無いと余分な余白が入る */
  }
  div{
    padding: 0mm;
    width:180mm;   /* 用紙幅はA4(210mm)を仮定して余白を引いたもの*/
    margin-left: 15mm;   /*左右の余白15mm*/
    margin-right: 15mm;
    margin-top: 20mm;   /*上下の余白20mm*/
    margin-bottom: 20mm;
  }
}
雑感

Electronの印刷はとても楽でいいですね。CSSで微調整できるところも素敵です。すごい時代になってますね。

子供の頃、親父にPCを買ってもらった際、弟と協力して年賀状印刷ソフトを作ったのを思い出しました。当時はVisual Basic6で印刷物の位置合わせをするのに苦労しました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T12:48:43+09:00

モダンブラウザとElectronでの印刷時に余白をピッタリ調整する

モチベーション

ElectronではwebContents.print()関数やwebContents.printToPDT()関数を使って簡単に印刷やPDF作成ができます。この時、CSSで印刷サイズをmm等の実物長さで指定することで、実際の印刷時の各種要素の大きさを指定できるので便利です。が、注意しないと余分な余白が入ってしまいます。経験則からくる注意点を情報共有します。

※2020/2/19：色々試行錯誤して、@pageとの関連、print()とprintToPDF()の違いなど大幅に改定しました。

最重要注意点

ChromeおよびChromium系ブラウザ、Electron(7.1.9～8.0.1で確認)において、@page内に記述したmargin, margin-left, margin-right,margin-top,margin-bottomについては、単位の変換におそらくbugがあり、設定値よりも1.5～1.8倍程度大きく設定されてしまう。

確認したversion(これ以外も確認していないだけでおそらくbugがある)

Chrome: 80.0.3987.106

Electron: 7.1.9～8.0.1

Edge (Chromium): 80.0.361.54

回避策として、@page内ではmargin系の設定値の単位として%を使う。

Firefox、Edge(Legacy)では%以外の単位も問題なく動く。

margin-top、margin-bottomに%を使う際は、ブラウザによって解釈が異なる

Chrome, Firefox, Edge(Chromium)：ページ横幅に対する割合を設定する

Edge(Legacy)：ページ縦幅に対する割合を設定する

注意点（試行錯誤の結果）

CSSでpaddingやmarginを正しく設定する。特に設定しない時は、明示的に0mmを設定すること。デフォルトでは0mmでないことがある。

body要素にもpaddingとmarginを明示的に設定する事。実際に余分な余白が消えずに悩んだが、body要素のmarginがデフォルトで0mmではなかったことが原因だった。

印刷時だけ設定したいCSSは@media print項目で設する。

ブラウザ上の表示はどれだけ長くても縦に長い1枚ページであるのに対し、印刷時は縦幅も固定で複数ページに分割される。

印刷時のページ毎のマージンは、HTML要素のプロパティーではなく、@pageのプロパティーとして設定するべき。さもなくば、改ページ部分での上下マージンが反映されない。

webContents.print()はElectron 7.xではmarginType:"custom"を設定するとクラッシュする。

webContents.print()のmarginTypeに"default"以外の値を設定しても、"default"と表示が変わらない。（バグとも思える。Electron version 8.0.1)。

webContents.printToPDF()でmarginsType:0(デフォルトマージン)にすると CSSの@pageに設定したmargin, margin-left, margin-right,margin-top,margin-bottomが適用される。 marginsType:1(マージンなし)にすると、これらのCSS設定も無視される。

webContents.printToPDF()のmarginsType:0と、webContents.print()のmarginType: "default"はCSSの適用と表示に関して(おそらく)同じ挙動。

例

body要素の中にdiv要素があり、その中に文章が書かれている場合のCSS記述は次のようになります。
@page{
  size: A4;
/*  本来は以下の記述で良いはずが、Chromium系バグで設定値より大きくなってしまう
  margin-left:   15mm;
  margin-right:  15mm;
  margin-top:    20mm;
  margin-bottom: 20mm;
回避策として以下のように%で指定する
*/
  margin-left:   7.143%;   /* = 15mm / 210mm */
  margin-right:  7.143%;
  margin-top:    9.524%;      /* = 20mm / 210mm "横幅"に対する割合*/
  margin-bottom: 9.524%;
}
@media print{
  body{
    padding: 0mm;  
    margin: 0mm;   /* これが無いと余分な余白が入る */
  }
  div{
    padding: 0mm;
    margin: 0mm;
    width:100%;
  }
}
上記の様なCSSに対して、印刷のJavascriptコードはprint()関数のoptionとして次のようにmarginType:"default"を指定する。
  const wc = browserWindow.webContents;
  wc.print({margins:{marginType:"default"}},
    (success, error) => {
        if(success){
            console.log('Print successfully.');
        }else{
            console.log(error);
        }
    });
また、PDF出力時のJavascriptコードはprintToPDF()関数のoptionとして次のようにmarginsType:0を指定する。
  const wc = browserWindow.webContents;
  wc.printToPDF({pageSize:"A4", marginsType:0}).then(data => {
     fs.writeFile(result.filePath, data, (error) => {
       if (error) throw error;
         console.log('Write PDF successfully.');
       })
     }).catch(error => {
       console.log(error);
     });
雑感

Electronの印刷はとても楽でいいですね。CSSで微調整できるところも素敵です。すごい時代になってますね。

子供の頃、親父にPCを買ってもらった際、弟と協力して年賀状印刷ソフトを作ったのを思い出しました。当時はVisual Basic6で印刷物の位置合わせをするのに苦労しました。

雑感（改定時）

Chrome,Chromiumのバグと気づくまで今回は時間が掛かりました。Firefoxがあってよかった。Edge(Legacy)が無くなってしまった弊害として、今回の様なブラウザエンジンのバグに気づきにくくなりますね。そういう意味で復活して欲しいなぁ、EHTMLエンジン。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T10:54:21+09:00

IM-FormaDesignerでテキストボックスの入力可否をチェックボックスで制御する

はじめに

intra-martのIM-FormaDesignerでは、ローコード開発を行うことが可能です。
画面上の制御が必要な場合は、JavaScriptでスクリプトを実行することも可能です。

やったこと

IM-FormaDesignerでテキストボックスの入力可否をチェックボックスで制御した。
if( document.getElementsByName("checkbox")[0].value == 1){
    // テキストボックスの背景色をグレーに変更する
    $('input[name="textbox"]').css({
        'background-color': '#CCCCCC'
    });
    // 透明の箱をテキストボックスに重ねて入力不可にする
    document.getElementById('clearbox').style.left = '20px';
} else {
    // テキストボックスの背景色を白に変更する
    $('input[name="textbox"]').css({
        'background-color': '#FFFFFF'
    });
    // 透明の箱を元の位置に戻して入力可にする
    document.getElementById('clearbox').style.left = '520px';
}
わかったこと

JavaScriptを使用してCSSの要素を制御することで、パッケージ製品やフレームワークの制約がある中でも、カスタマイズなしで画面制御を行うことが可能である。なぜならば、要素の取得と書き換えがプログラムで制御できれば、自由に制御ができるからです。

つぎにやること

パッケージ製品やフレームワークとの結合度を意識しながら、他の実装を検討する

メリット

バージョンアップによる影響を最低限に抑えられる

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T10:51:51+09:00

印刷時に表示されるURLを消す方法

Bootstrapが使われたwordpressでテーマを作成する際、アーカイブページをプリントアウトすると、意図しないURLが表示されていた。

解決方法

解決方法は以下のcssを組み込めはオッケー。
@media print {
 a[href]:after {
 content: "" !important;
 }
}
また、abbrタグのtitle属性を非表示にしたいときは、以下を組み込むと良い。
@media print {
 abbr[title]:after {
 content: "" !important;
 }
}
原因

bootstrap.cssには以下のcssが組み込まれていたことが原因であった。
そのため、打ち消すcssを作るか以下のコードを削除すれば良いことになる
bootstrap.css
a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T10:51:16+09:00

Sass 基礎文法　1

はじめに

フロント実装を学んでいく上で、Sassを用いておりますので、用語等を中心に整理していきます。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

Sass(サス)とは

cssを効率的に書く言語（cssを拡張した言語）

cssの中で変数を使え、計算を行うことができる。

Sassファイル

cssファイルに記述はできない

Scssファイルにcssを記述することはできる。

Sassを扱うファイルの拡張子は２種類

sass拡張子（SASS記法を用いるが、cssの記法と差があり、普及しなかった。）

scss拡張子（cssの記法によく似たSCSS記法)

Sassのメリット

記述の簡略化

プログラムのような処理

複数のcssファイルを1つにまとめることができる

同じ値を使い回すことができる

記述の簡略化

CSSをネスト（入れ子）して記述できる。

親要素を複数記述しなくてもよくなった。

　　　　

プログラムのような処理

変数や条件分岐といったプログラミング処理ができる
qiita.scss
$変数名: 値;

//例）ピクセル数やカラーコードなどを何度も使用する値を変数定義
$section-color: rgb(30,30,30);
 section {
 background-color: $section-color;
}
複数のcssファイルを1つにまとめることができる

パーシャル

複数のSassファイルを1つのCSSファイルとしてまとめることができる。

また、パーシャルを使えば、機能ごとにファイルを分割し、管理することができる。

パーシャルファイル作成方法

ファイル名を　_ から始める。(例えば、reset.scss)
_reset.scss
   //処理を記載する。
パーシャルファイルを別ファイルで読み込む。
qiita.scss
   @import "reset";
同じ値を使い回すことができる

変数を用いる。 ($変数名: 値;)

例）FFEC00という色をmainYellowColorという変数名で定義する。
color.scss
$mainYellowColor: #FFEC00; 
mixin　　

まとまったスタイルを定義することができる。

変数は値を定義するものだったが、mixinはスタイルを定義するもの。
qiita.scss
//mixinを定義
@mixin mixin名() {}   

//mixinを呼び出す。
@include
例）.clearfoxをよく使うので、パーシャルファイルを作成し、ファイル内にmixinを定義する。
_clearfix.scss
@mixin clearfix() {
 &:after{
 content: '';
 display: block;
 clear: both;
 }
}
&(アンパサンド) とは

コードを簡易にできる。
_sample.scss
//例）_sample.scssにmixinを呼び出す。
.menu {
 @include clearfix();
  ...
 .menu__list {
  float: left;
  ...
  }
 }

//例２）mixinを使わなければ・・・冗長になる。
 .menu {
  &:after {
  content: '';
  display: block;
  clear: both;
  }

  .menu__list {
  float: left;
  ... 
  }
 }
さいごに

日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T05:07:06+09:00

初心者によるプログラミング学習ログ 242日目

100日チャレンジの241日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

242日目は、

おはようございます
242日目
・youtubeで、webサイト模写#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 17, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T03:47:53+09:00

CSSのみで円柱形ボタンを作る

完成形

ボタン本体の作成

※説明順にCSSを追加していくので一部読みにくいCSSになっているかと思います。

HTML
HTML
<div class="bt">
  <div class="bt-top"></div>
  <div class="bt-body"></div>
</div>
ボタン全体の大きさを決める

なるべく細部のCSSは固定したいので各パーツはこの値に対する%で指定していく。
今回はw=300px,h=300pxとする。
CSS
.bt{
  width: 300px;
  height: 300px;
}
各パーツのheightを決める

下の図を参考に全体のheightに対する上面(top)と側面(body)のheightを決める。
色は上面に対して側面をやや濃くするとそれっぽく見える。
CSS
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043; 
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
}
イメージ図：各パーツのheight

現時点での形

丸みを加える

上面は単純に楕円形にすれば良い。
側面は右下と左下のみ丸みを加えるが、上面と同じ曲率にしなければならない。widthが同じなので水平方向は同じく50%で良いが、heightは違うので少し計算が必要。

上面のheightをtopH、側面のheightをbodyH、側面の垂直方向のradius半径をbodyVR[%]とすると、
bodyVR = ( topH / bodyH ) × 50%
で求められる。
※今回だとbodyVR = ( 50% / 75% ) × 50% = 2500% / 75 = 33.333…%
CSS
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043;
  /* ここから新規項目 */
  border-radius: 50%;
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
  /* ここから新規項目 */
  border-radius: 0 0 50% 50% / 0 0 33.3% 33.3%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 75) calc(2500% / 75); /*より厳密な数値*/
}
現時点での形

上面と側面を重ねる

positionを使用。
CSS
.bt{
  width: 300px;
  height: 300px;
  /* ここから新規項目 */
  position: relative;
}
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043;
  border-radius: 50%;
  /* ここから新規項目 */
  position: relative;
  z-index: 1;
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
  border-radius: 0 0 50% 50% / 0 0 33.3% 33.3%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 75) calc(2500% / 75); /*より厳密な数値*/
  /* ここから新規項目 */
  position: absolute;
  bottom: 0;
  z-index: 0;
}
現時点での形

円柱はこれで完成。

ボタンを押し込む

今回はボタン全体に対してクリックを受け付ける(側面をクリックしても動作する)。

上面は高さが固定で位置だけの移動となる。
今回は上面のheightが50%なので、top<100%-50%にする。
※top>=100%-50%になると側面より下にめり込む位置になる。

側面は位置が固定で高さが以下のように変更となる。
bodyH = 100% - ( topH / 2 + (上面のtop) )
※今回は bodyH = 100% - ( 50% / 2 + (40%) ) = 35%
注意点としてはheightが変わるのでそれに伴いborder-radiusも再計算する必要があること。
CSS
.bt:active > .bt-top{
  top: 40%;
}
.bt:active > .bt-body{
  height: 35%;
  border-radius: 0 0 50% 50% / 0 0 71% 71%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 35) calc(2500% / 35); /*より厳密な数値*/
}
ボタンのメイン部分の完成

.btのサイズのみを変更してみる

土台の作成

HTML
HTML
<div class="bt-outer">
  <div class="bt">
    <div class="bt-top"></div>
    <div class="bt-body"></div>
  </div>
  <div class="base-top"></div>
  <div class="base-body"></div>
</div>
ボタン部分のCSS修正

widthとheightを.bt-outerに対する割合に変更。
CSS
.bt{
  /* width: 300px; 変更前*/
  width: 60%;
  /* height: 300px; 変更前*/
  height: 60%;
  margin: 0 auto;
  position: relative;
}
全体と土台のCSS

perspectiveについては勉強不足なので結果を見つつ値を調整。
CSS
.bt-outer{
  width: 400px;
  height: 300px;
  transform-style: preserve-3d;
  perspective: 500px;
}
.base-top{
  width: 100%;
  height: 50%;
  background-color: #BDBDBD;
  transform: rotateX(45deg);
  transform-origin: 50% 100%;
  position: absolute;
  bottom: 35%;
}
.base-body{
  width: 100%;
  height: 35%;
  background-color: #9E9E9E;
  position: absolute;
  bottom: 0;
}
土台付きボタン完成

.bt-outerのサイズのみを変更してみる

おまけ

側面をグラデーションにしたver.
CSS
.bt-body{
  /* 略 */
  /* background-color: #F4511E; */
  background: linear-gradient(to right,#FF7043,#E64A19 70%,#E64A19 80%,#FF7043);
  /* 略 */
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T00:28:50+09:00

flexboxを使用してグリッドレイアウトを実装することになった僕

今日の内容について

これは、2ヶ月前くらいの話です。
IE対応でflexboxを使用してグリッドレイアウトを実装することになった僕がいました。

自分で考えてやってもできるが
「考えるの面倒くさいし調べてコピペしよー」と思い、
「flexbox grid layout」「display:flex grid layout」と検索していたがflexboxとcss gridの使い分けの記事ばかりでした。

なので、
「自分と同じ、めんどくさがり屋の人にこの記事を残そう」ってことです。
(つまり、「flexbox grid layout」「display:flex grid layout」で検索したら見つかるといいね)

書いてみた。

See the Pen grid-layout by pokocy (@pokocy) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-18T00:09:51+09:00

初心者のうちに知っときゃよかったCSSセレクター

今回の話って誰向き？

この記事の内容は、CSSセレクターを初めて使う人、初心者にはぜひ見てほしい...
(初心者じゃなくても復習がてら見ていただきたいです。)

今になって、初めてCSSセレクターを使用したときに、
知っていればよかった
知っていたがこんなに使用するものだと思っていなかった
と感じたものを紹介していきます。

CSSセレクター３つ紹介

今回、紹介するものは３点！
1..A.B
2..A:nth-child()
3..A + .B

では、さっそく...

1..A.B

こいつ、すごい出てきたんですけど、そんなに重要なものだと思っていなかった。
君の存在は知っていたんだよ....

何がめちゃめちゃ使えるポイントかって？
とりあえず使用例を見てみようー.........
.button {
  width: 200px;
  background-color: red;
  border-radius: 4px;
}

.button.is-small {
  width: 100px;
}

.button.is-large {
  width: 300px;
}

.button.is-blue {
  background-color: blue;
}
.buttonにクラスを一つ追加するだけで大きさや背景色を変更することができる。
また、.button.is-smallとクラス名が２つ続いていたら、.button.is-smallのwidth: 100px;が適用される。(.buttonのwidth: 200px;は上書きされてるよ。ディベロッパーツールで見たら~~width: 200px;~~ってなってる。)

2..A:nth-child()
<div class="box">
  <p>サンプルテキスト<p>
  <p>サンプルテキスト<p>
  <p>サンプルテキスト<p>
</div>


<style>
.box:nth-child(2) {
  font-size: 20px;
}
</style>
上記の例では.boxの2番目の子要素のみにスタイルを適用することができる。

:nth-child()　←( )内に記載する値によって、該当箇所のスタイルを変更することができる。

詳しくはこちら

3..A + .B

こいつを知ったときはマジですごいと思った。
使用例は
<ul class="box-list">
  <li class="box-list-item">
    <div class="box"></div>
  </li>
  <li class="box-list-item">
    <div class="box"></div>
  </li>
</ul>

<style>
.box-list-item + .box-list-item {
 margin-top: 30px;
}
</style>
.box-list-itemの後に.box-list-itemが書かれてたら、margin-top: 30pxをとる。

CSSを勉強し始めの時に、覚えておけばもっと楽に実装できた箇所があったかもしれない。。。。

　 Tweet
Qiitaで続きを読む

20200218のCSSに関する記事は15件です。

【HTML&CSS】フッター下部の余白を無くす方法

概要

フッター下部の余白をなくす方法

Flexboxを使ってレイアウトを作りたい

1.プロパティについて

2.完成品のイメージ

3.早速コーティングしていこう！

4.CSSもかいていこう！

4.最後に

フォントサイズの定義の仕方について

定義方法

それぞれのフォントサイズの定義について

px

%

em

rem

vw

どのように使うのが良いのか

textareaの右下のスタイルを1行で消す

目的

解決法

結果

【CSS】フォームのセレクトボックスに角丸などのスタイルを適用する

概要

そのままスタイルを変更してみる

<select>のスタイルを消す

再び矢印を表示する

borderで三角を作る

矢印部分をクリックできるようにする

まとめ

参考

ネイティブアプリっぽいCSSフレームワーク

Electronでの印刷時に余白をピッタリ調整する

モチベーション

注意点

例

雑感

モダンブラウザとElectronでの印刷時に余白をピッタリ調整する

モチベーション

最重要注意点

注意点（試行錯誤の結果）

例

雑感

雑感（改定時）

IM-FormaDesignerでテキストボックスの入力可否をチェックボックスで制御する

はじめに

やったこと

わかったこと

つぎにやること

メリット

印刷時に表示されるURLを消す方法

解決方法

原因

Sass 基礎文法 1

はじめに

Sass(サス)とは

Sassのメリット

記述の簡略化

プログラムのような処理

複数のcssファイルを1つにまとめることができる

パーシャル

パーシャルファイル作成方法

同じ値を使い回すことができる

変数を用いる。 ($変数名: 値;)

mixin

&(アンパサンド) とは

さいごに

初心者によるプログラミング学習ログ 242日目

100日チャレンジの241日目

CSSのみで円柱形ボタンを作る

完成形

ボタン本体の作成

HTML

ボタン全体の大きさを決める

各パーツのheightを決める

イメージ図：各パーツのheight

現時点での形

丸みを加える

現時点での形

`<select>`のスタイルを消す

`border`で三角を作る

Sass 基礎文法　1

mixin　　

`.bt`のサイズのみを変更してみる

`.bt-outer`のサイズのみを変更してみる

1.`.A.B`

2.`.A:nth-child()`

3.`.A + .B`