投稿日：2019-07-14T23:59:06+09:00

marginとpaddingの違いについて説明します！

はじめに

未来電子テクノロジーでインターンをしています。
現在、CSSを少し勉強し始めてつまずいたところがあったので、備忘録として書きます。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください！

padding/marginについて

paddingとmarginの書き方について説明します。
一例を下記に示します。
padding: 10px 20px;
margin: 10px 20px;
padding/marginともに余白の範囲を指定する必要があります。
一例の書き方は上下に10px分の余白を空け、左右に20px分の余白を空ける設定となっています。
CSSでは要素の境界線のことをborderと呼びます。
そして、borderの内側の余白をpaddingで調整し、外側の余白をmarginで設定します。
余白の値の設定方法はたくさんあるので、自分が使いやすい方法を選ぶようにしましょう。

まとめ

今回はpaddingとmarginの違いについてご紹介しました。
これからもフロントエンドを勉強していきます！

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T23:17:45+09:00

CSSの基本文法と基本規則

CSSの基本文法と基本規則

CSSとは？

CSSとはhtmlで作られた文章の装飾や背景の装飾、様々なレイアウトの配置を行うもので、htmlとうまく組み合わせてページを作っていく言語です。

どうやってhtmlに入れるの？

入れ方は3パターンあります。
1. 別でCSSのファイルを作っておいてそのファイルをhtmlに入れ込む
2. htmlファイルの中で< style > ~ < /style >タグで囲ってその中にまとめて書く
3. 直接htmlの記述に混ぜる

通常1.のパターンがほとんどです。コードが複雑化すると管理がままならなくなるのでCSSだけのファイルを用意して組み込む形が一般的です。

CSSの式

CSSの文法は超単純です。
CSS.
セレクタ {プロパティ：値;}

[値の後の ; を忘れずに]
終わりです。文法はひとつしかありません。
それぞれを説明していきます。
セレクタ {プロパティ：値;}


セレクタ　=>どこの見た目を変えるかを決める部分
(< head >,< body >,< p >,< h >,< div >等)


プロパティ　=>何を変えるのか
(色、大きさ、配置、高さ、幅、etc..)


値　=>どう変えるのか、どれくらい変えるのか
(red、10px,etc..)
html
<p>こんにちは</p>
css
p {
  color:orange;
}

< p >タグの color を orange にしてという命令文
こうすると上のhtmlの< p >タグの"こんにちは"がオレンジ色に変化する。

idにCSSをつけるとき

idにCSSをつけるときは以下のように#をつけます
#headline {
  color: orange;
}
classにCSSをつけるとき

classにCSSをつけるときは以下のように[ . ]をつけます
.main {
  color: orange;
}
適用先を複数指定したいとき

適用先を複数指定したいときは以下のように[ , ]で区切ります
#headline, h2 {
  color: orange;
}
特定の場所だけに指定したいとき

特定の場所だけに指定したいときは半角スペースをあけます
.main p span {
  color:orange;
}

main という class の <p> タグの　<span>の文字をオレンジに変える
最後に

CSSの基本文法と基本規則をまとめました。
よく出てくるプロパティについては別記事でまとめてあります。

ぜひ参考にしてください

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T19:40:19+09:00

ライブラリ作ってみました（CSS編）　デザインパターン

自作ライブラリを作った経緯

　ソフトを開発するにあたって、自作のライブラリを使用しています。
理由は、勉強のためと言うこともあるし、自分で作った方が痒い所に手が届くということがあるからです。宜しければ、ご覧ください。

CSSライブラリ(github)

cssライブラリ

　下記、各種cssの説明になります。

　cssクラス名とファイル名は同じです。

　clsCommon.css

　　メインのcss

　　呼び出しは、これだけ。

　clsCommonPopupText.css

　　ポップアップに関するcss
sample.html
   [ <a class="clsCommonPopupText">？
    <span class="clsCommonPopupTextEffect">
    <span>オートインクリメントの場合は、NOT NULLにする必要があります。</span><br>
    <span>テーブル更新時に、オートインクリメント追加は出来ません。</span>
    </span></a>
   ]</p>
　clsCommonTab.css

　clsCommonTabJob.css

　clsCommonTabProperty.css

　　タブ表示に関するcss
sample.html

<div class="clsCommonTab">

  
  <input id="idCommonTab_1" type="radio" name="nameCommonTab" checked>
  <input id="idCommonTab_2" type="radio" name="nameCommonTab">
  <ul>
    <li><label for="idCommonTab_1">メニュー１</label></li>
    <li><label for="idCommonTab_2">メニュー２</label></li>
  </ul>

  
  <div>
    
    <div>
      コンテンツ１
    </div>
    
    <div>
      コンテンツ２
    </div>
  </div>
</div>
　clsCommonTable.css

　clsCommonTableCenter.css

　clsCommonTableGray.css

　　テーブルに関するcss
sample.html
  <table class="clsCommonTable">
    <thead><th>名前</th><th>かな</th><tr></thead>
    <tbody>
      <tr><td>鈴木太郎</td><td>すずきたろう</td></tr>
      <tr><td>山田花子</td><td>やまだはなこ</td></tr>
    </tbody>
  </table>
　clsCommonTitle.css

　　見出しに関するcss
sample.html
  <h1 class="clsCommonTitle">見出し</h1>

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T19:01:29+09:00

iOS Safariでinput要素のfocusを簡単に外す方法

始めに

iOS Safariでinput要素を選択してキーボードが出ているとき、何も設定しないと画面をタップしただけではfocusを外してキーボードを閉じることができません。これを何とかするために今まではJSでblurするようにしていましたが、もっと単純な方法があったのでその方法を紹介したいと思います。

結論

親のDOMにonclickイベントを設定したら外せます。めちゃくちゃ簡単ですね(笑)。onclickの処理を書かなくても問題ないです。また、どの階層にいても問題ないので、一番上のdiv要素にonclickを設定すればいいと思います。
iOSでfocusが外れるようにする設定
<html>
<body>
  
  <div onclick="">
    <input text="" />
  </div>
</body>
</html>
なぜこれで上手くいくか

仕様をちゃんと読んだわけではないので憶測ですが、どうやらonclickイベントを設定していないDOMはこのイベント自体を省略してしまうようです。HTMLの挙動的にはどれかをクリックしたらそちらにfocusが移るのですが、イベント自体が省略されているのでfocusが外れないようです。
なので一番親であるdiv要素とかにonclickイベントを設定することで必ずonclickイベントを拾えるようになるので、focusを外せるということです。（bodyタグでいけるかと思ったのですが、どうやらbodyだと拾ってくれなそうです）

サンプルコード

CodePenでサンプルコードを書きましたのでそれをこちらに載せます。

See the Pen iOSでフォーカスを簡単に外す by wintyo (@wintyo) on CodePen.

スマホで動作を確認する方は以下のURLからアクセスしたほうがいいと思います。
https://codepen.io/wintyo/full/wLbqLN

一番上にbodyのクリックイベントをカウントするようにしましたが、カウントされていない場所があると思います。そこはクリックイベントが送られていないのでfocusも外せない状態になっています。
ついでの発見ですが、どうやらonclickイベントを拾った要素にハイライトカラーが当たるようですね。実際はこれは邪魔だと思うのでハイライトカラーを消さないといけなそうですね。

終わりに

iOS Safariでfocusが外せない問題に結構悩まされていましたが、簡単に対応できる方法が見つかってよかったです。ただこのサンプルコードを書いていたら勝手にズームされたり、キーボード表示中にスクロールすると謎の黒い領域が現れたり、iOS特有の挙動に悩まされてしまいました。ズームはなんとかなりましたが、領域のほうは解決できませんでした・・・。もうちょっと普通の挙動をしてくれると嬉しいんですけどねぇ。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T16:38:33+09:00

kaminariのページネーションを中央寄せにする

kaminariを導入しているとビューで pagination メソッドを呼ぶと思いますが、その場合、自動的に ul 要素に pagination クラスが適用されます。

pagination クラスのCSSを以下のようにカスタマイズすると、ページネーションを中央寄せにすることができます。
app/assets/stylesheets/application.scss
.pagination {
  justify-content: center;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T15:24:03+09:00

印刷用CSSを使用する

CSSのメディアクエリを使う場合

@media print{
    /* 印刷時に適用させたいスタイルを定義する */
}

参考

レスポンシブの基本、メディアクエリの書き方

別CSSをインポートして使う場合

@import url("print.css") print; /* インポートで指定して、印刷時のみ適用されるようにする */

参考

CSSの@importを使って別のCSSファイルを読み込む方法を徹底解説!!

HTMLのlinkタグに指定する場合

<!-- media属性に指定して、印刷時のみ読み込まれるようにする -->
<link rel="stylesheet" type="text/css" media="print" href="sample.css">

参考

HTMLのlinkタグとは？基本的な書き方とrel属性まとめ

bootstrapの場合

bootstrap.cssには以下のスタイルが定義されている
- ver: 3.2.0の場合

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 2cm .5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

例えば、navbarをHTML側のclass要素に指定してる場合、印刷時にdisplay: none;が適用される

参考

CSS · Bootstrap

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T15:00:19+09:00

画像を並べた際に出来る謎の隙間を解決！

はじめに

画像を隙間なく並べて表示する際に、謎の隙間が出来てしまったことはありませんか？
例えば以下のような感じ！縦に画像を並べたいのですが、画像と画像の間に隙間があいてしまっています！

こちらを表示させる為のHTMLファイルも載せておきます。
test.html
<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="../style/test.css">
    <title>テスト</title>
  </head>
  <body>
　　 
    <img src = '../sample.jpeg' class = 'image1'><br>
    <img src = '../sample.jpeg' class = 'image2'>
  </body>
</html>
今回はこの謎の隙間について調べた内容をまとめます！

隙間の正体

この隙間を作っている正体は、インライン要素に設定されているベースラインです！

インライン要素というとわかりづらいですが、テキストの文字、特に英語を考えるとわかりやすいです。
以下の画像をご覧ください。

(参考画像元URL： https://www.tagindex.com/stylesheet/frame/vertical_align.html)

qやp、yなどはベースラインに対して配置が下にはみ出るのが普通です。
英語を書く際の常識ですね。
文字等のインライン要素も、ベースラインに対してこの"下にはみ出る部分"を余白として設定しています。
そのため、画像を並べるとその分の隙間が空いた状態になってしまいます。
画像を表示させる為のimgタグもインライン要素なので、隙間が空いてしまうんですね。

隙間を埋めるには

謎の隙間を埋めるための方法を２つ紹介します！どちらも1行で書けるので簡単です！
ゴールとしては以下のように、画像と画像の間の隙間が無くなればOKです！

方法１：インライン要素をブロック要素にする

インライン要素だから空白が空くだけなので、ブロック要素に変えてしまえば良いです！
(※この場合ブロック要素にしているので、htmlのbrタグは不要なので消してくださいね！)
test.css
.image1 {
  display: block;
}
方法２：vertical-alignをbottomに設定する

vertical-alignは、ベースラインの位置を変更することができるプロパティです！
このvertical-alignをbottomにすることで、謎の余白を消すこと出来ます。
test.css
.image1 {
  vertical-align: bottom;
}
さいごに

隙間をなくす方法として２つ紹介しましたが、インライン要素のままにしたいかブロック要素にしたいかで使い分ければ良いかと思います！
プログラミングを始めた当初、ベースラインについて把握していなくて少しだけ詰まってしまったのでまとめてみました！
お役に立てれば幸いです

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T11:01:56+09:00

HTML の要素を変更する

目的

HTMLファイルの要素を変更する方法をまとめる。

押さえるポイント

HTMLの要素は3種類存在する。

ブロック要素
width,heightの設定→〇
margin,paddingの設定→〇
配置→縦並び

インライン要素
width,heightの設定→×
margin,paddingの設定→左右のみ〇
配置→横並び

インラインブロック要素
width,heightの設定→〇
margin,paddingの設定→〇
配置→横並び

インライン要素にwidth.heightを設定したいときは要素を変更する。

要素の変更にはdisplayプロパティを使用する。　

書き方の例

下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
  display: 変更したい要素;
}
より具体的な例(blockからinline-block)

h1要素をinline-blockに設定する。

下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
下記にCSSファイルの内容を記載する。
h1 {
  display: inline-brock;
}
より具体的な例(inlineからblock)

p要素をblockに設定する。

下記にHTMLファイルの内容を記載する。
<p>おはようございます。</p>
下記にCSSファイルの内容を記載する。
h1 {
  display: brock;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-14T10:47:21+09:00

HTML のテキストの文字間隔を設定する

目的

HTMLファイルのテキストの文字間隔を設定する方法をまとめる。

押さえるポイント

文字間隔を調整したい要素やクラス名を指定してletter-spacingプロパティで設定する。

文字間隔の設定はピクセル数を用いて設定する。

書き方の例

下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
  letter-spacing: 文字間隔のピクセル数;
}
より具体的な例

h1要素に記載されている「おはようございます。」の文字間隔を10ピクセルに設定する。

下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
下記にCSSファイルの内容を記載する。
h1 {
  letter-spasing: 10px;
}

　 Tweet
Qiitaで続きを読む

20190714のCSSに関する記事は9件です。

marginとpaddingの違いについて説明します！

はじめに

padding/marginについて

まとめ

CSSの基本文法と基本規則

CSSの基本文法と基本規則

CSSとは？

どうやってhtmlに入れるの？

CSSの式

idにCSSをつけるとき

classにCSSをつけるとき

適用先を複数指定したいとき

特定の場所だけに指定したいとき

最後に

ライブラリ作ってみました（CSS編） デザインパターン

自作ライブラリを作った経緯

cssライブラリ

iOS Safariでinput要素のfocusを簡単に外す方法

始めに

結論

なぜこれで上手くいくか

サンプルコード

終わりに

kaminariのページネーションを中央寄せにする

印刷用CSSを使用する

CSSのメディアクエリを使う場合

参考

別CSSをインポートして使う場合

参考

HTMLのlinkタグに指定する場合

参考

bootstrapの場合

参考

画像を並べた際に出来る謎の隙間を解決！

はじめに

隙間の正体

この隙間を作っている正体は、インライン要素に設定されているベースラインです！

隙間を埋めるには

方法１：インライン要素をブロック要素にする

方法２：vertical-alignをbottomに設定する

さいごに

HTML の 要素 を 変更 する

目的

押さえるポイント

書き方の例

より具体的な例(blockからinline-block)

より具体的な例(inlineからblock)

HTML の テキスト の文字間隔 を 設定する

目的

押さえるポイント

書き方の例

より具体的な例

日付別

タグ一覧

ライブラリ作ってみました（CSS編）　デザインパターン

HTML の要素を変更する

HTML のテキストの文字間隔を設定する