投稿日：2019-05-30T15:52:00+09:00

CSSのcounterで自動連番

自分用メモです

参考サイト
counter-increment
CSSのcounter-incrementを使って簡単に自動で連番をつける方法
 自動で連番付与できるCSS。counter-incrementの使い方

基本の記述
CSS
ul li {
  counter-increment: title;
}
ul li h2::before {
  content: counter(title);
}
数字が増えない場合
CSS
body{counter-reset:title;}

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T15:38:24+09:00

Bulmaのしたいこと別覚書き

Bulmaを使う環境で「あれしたいんだけど…」って時に探しにくかったので個人的によく使うものだけ抜粋です。

（V0.7.5）

そのほかについては公式ページをご覧ください。
https://bulma.io/documentation/

文字サイズを変える

Class Font-size

is-size-1 3rem

is-size-2 2.5rem

is-size-3 2rem

is-size-4 1.5rem

is-size-5 1.25rem

is-size-6 1rem

is-size-7 0.75rem

文字を寄せる

Class Alignment

has-text-centered センター寄せ

has-text-justified 横いっぱいに広げる

has-text-left 左寄せ

has-text-right 右寄せ

文字の太さを変える

Class Weight

has-text-weight-light light

has-text-weight-normal normal

has-text-weight-medium medium

has-text-weight-semibold semi-bold

has-text-weight-bold bold

上下センターに配置

親要素へ　.is-vcentered

左右センターに配置

親要素へ　.is-centered

デフォルトで設定されてるmargin/paddingを取り除く

マージンを取る　.is-marginless
パディングを取る　.is-paddingless

PCの時は横並び、スマホの時は縦並びになるボックス
<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Class	Font-size
is-size-1	3rem
is-size-2	2.5rem
is-size-3	2rem
is-size-4	1.5rem
is-size-5	1.25rem
is-size-6	1rem
is-size-7	0.75rem

Class	Alignment
has-text-centered	センター寄せ
has-text-justified	横いっぱいに広げる
has-text-left	左寄せ
has-text-right	右寄せ

Class	Weight
has-text-weight-light	light
has-text-weight-normal	normal
has-text-weight-medium	medium
has-text-weight-semibold	semi-bold
has-text-weight-bold	bold

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T12:36:24+09:00

fontawesomeが使えない場合の対応方法

今回の記事では、fontawesomeという超便利なWebアイコンツールを使おうと読み込んだものの、
うまく表示されない場合の解決パターンをご紹介します。

バージョンの確認

まずバージョンの確認をしましょう。
CDNを使用している場合は、リンク内にバージョンが書いてるのでそこを確認して下さい。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
この場合は「v5.8.2」です。
2019年5月時点では、このバージョンが最新になります。

旧バージョンは4から始まるバージョンです。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
「4.7.0」と書いています。

このバージョンの違いで、使用できるアイコンの種類と、cssでの指定方法が変わってきます。

使用できるアイコンの確認

バージョンごとの使用できるアイコンの確認する方法のご紹介です。
まず、普通にfontawesomeのページより検索した結果が、新バージョンで使えるアイコンです。

トップページ下の部分の↓赤枠で囲まれているところから飛んだ先が旧バージョンで使えるアイコン一覧です。

CSS指定の確認

CSSで指定する場合、content: "\f105";という感じで記述してあげます。
さらにfont-familyも指定する必要があるんですが、これがバージョンによって違います。

新バージョン
li::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f105";
}
旧バージョン
li::before {
  font-family: FontAwesome;
  content: "\f105";
}
Freeのアイコンか

PROと書いてあるアイコンは有料版しか使えないので、注意しましょう。

その他

他にも、font-weight の値を変えてみると表示されたりします。
この記事に書いてある方法で表示できるようになれば幸いです！

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T12:36:24+09:00

fontawesomeが表示されず◻︎(四角)になってしまう場合の対応方法

今回の記事では、fontawesomeという超便利なWebアイコンツールを使おうと読み込んだものの、
うまく表示されない場合の解決パターンをご紹介します。

バージョンの確認

まずバージョンの確認をしましょう。
CDNを使用している場合は、リンク内にバージョンが書いてるのでそこを確認して下さい。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
この場合は「v5.8.2」です。
2019年5月時点では、このバージョンが最新になります。

旧バージョンは4から始まるバージョンです。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
「4.7.0」と書いています。

このバージョンの違いで、使用できるアイコンの種類と、cssでの指定方法が変わってきます。

使用できるアイコンの確認

バージョンごとの使用できるアイコンの確認する方法のご紹介です。
まず、普通にfontawesomeのページより検索した結果が、新バージョンで使えるアイコンです。

トップページ下の部分の↓赤枠で囲まれているところから飛んだ先が旧バージョンで使えるアイコン一覧です。

CSS指定の確認

CSSで指定する場合、content: "\f105";という感じで記述してあげます。
さらにfont-familyも指定する必要があるんですが、これがバージョンによって違います。

新バージョン
li::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f105";
}
旧バージョン
li::before {
  font-family: FontAwesome;
  content: "\f105";
}
Freeのアイコンか

PROと書いてあるアイコンは有料版しか使えないので、注意しましょう。

その他

他にも、font-weight の値を変えてみると表示されたりします。
この記事に書いてある方法で表示できるようになれば幸いです！

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T11:44:40+09:00

cssアニメーション

下からすすーっと出てくる奴

メモ帳か何かに.htmlで張り付ければ見れる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
/* 下から上にススーっとフェードイン */

span{
    display: block;
}
.aaa{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;

    background:#2561c1;
    color: #fff;
    width: 400px;
    height: 100px;
    text-align: center;
}
.sample-text1 {
    font-size: 20px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

</style>
<body>
    <div class="aaa">
        <p class="sample-text1">
            『自由』にモノづくりを。

            <span>なんかもう一文</span>
        </p>
    </div>
</body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T11:20:32+09:00

aタグをホバーしたときに矢印カーソルを表示したい

こうすればできるけど#は使いたくない。
<a href="#">リンク</a>
カーソルプロパティがあるみたい。
<a href="#" class="hoge-link">リンク</a>
.hoge-link {
  cursor: pointer;
}
これでいけた。

cursor - CSS: Cascading Style Sheets | MDN

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T11:09:05+09:00

素人によるWeb制作のいろは

少しづつ更新していく予定。
間違い等ありましたらご指摘いただけると幸いです。

Webページ制作について

Web制作は大原則、Webサーバから提供されるもの。Webサーバ上にあるWebページに必要な情報(HTML、CSS、JavaScript)を使う。
Web上で利用するサービスによってはデータベース等のミドルウェアを利用する。

Webページとミドルウェアだけではあるだけの為利用できない。これらに情報を橋渡しするためにpython(パイソン)やPHPと呼ばれるものを利用する。

Webページを制作するにあたり必要なもの

Webサーバ

Webページを表示する為の言語 → 「Webページに必要な情報とは」に記載

ミドルウェア

Webページに必要な情報とは

Webページはgoogleなどから検索し必要なサイトをユーザが選び、選んだ先のものを表示させている。
この表示をさせるために必要なものが「Webページに必要な情報」である。

これらを構成するためには3つの専用言語が必要になる。

HTML(HyperText Markup Language)

CSS(Cascading Style Sheets)

JavaScript

HTML : Webページを表示させる最低限必要なもの
CSS : HTMLで作ったWebページのデザインを作るために必要なもの
JavaScript : 作ったWebページ上でYoutubeなどを再生させたりするためのもの

WebページとしてはHTMLは必須だが、他CSS、JavaScriptは無くても作成することができる。
※ただし、今日のWebページ全てはCSS、JavaScriptが導入されている。

Webサーバについて

Webサーバは主に専用アプリケーションを導入し構築する。

主なメジャー製品は以下の模様。

Server Application

Windows系 IIS

Linux系 Apatch

Windows系のサーバはIISを利用する。
IISはWindowsServer2012R2まではサーバ用アプリケーションであったが、WindowsServer2016/Windows10
サーバOS、クライアントOS共に利用できるようになった模様。

HTMLとは

HTMLとはHyperText Markup Languageの略、今日に至るWebページの基礎を作った。
2019年現在、HTMLはVer.5。

HTML5について(Wikipedia)

HyperTextというのは1つの文書(webページ等)から各文書へのハイパーリンクや動画の表示等するもののこと。
HTMLはその専用コンピュータ言語のこと。

HTMLの目的は情報構造を定義するためのもの
このページにどういったものが必要になるか。
材料の用意になる。

HTMLはファイル名に[ファイル名.html]にする。

※HTMLとは(Wikipedia)

基本的に作成するHTMLファイルの中身は以下のようになる。
HTML-Base
<!DOCTYPE html>
<html>
    <head>
        <title>Web Title Name</title>
    </head>
    <body>
    </body>
</html>
CSS

各サイトの見た目をどのようにするか、文字の位置や枠の幅、画像の配置を定義するもの。

CSSはHTML上、または専用のCSSファイルを作成すれば作ることが可能。
ただしCSSは記述しても機能しない
そのためHTML上から宣言し、ファイルを呼び出す必要が有る。
HTML側の定義
<link rel="stylesheet" href="xxx.css">
資料リンク

CSSの基本的な書き方【初心者向け】

Server	Application
Windows系	IIS
Linux系	Apatch

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T03:30:52+09:00

【SEO関連】独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみても、おそらく検索エンジンには認識されない。

はじめに

本日ふと思ったのだが、CSS擬似要素のcontentでも、HTMLに記述していれば、SEO的にオッケーなんじゃね？と思ったので、独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみ他場合に、タグのスタイリングを継承するのか(継承という言葉で良いのかは置いておいて、、)また、検索エンジンには認識されるのか、実験してみた。正しい実験になっているかどうかは不明笑

実験方法

色々調べていると、擬似要素はブラウザ上でドラッグした場合に、選択範囲に入らないことが分かった。つまり、擬似要素とわかる=検索エンジンに認識されないと判断できる。ということであると考えられる。ということで今回の実験はこう。

もし、h1タグに対して独自データ属性を使ってcontentを取得した場合に、
1. h1タグで通常囲んだ文字列と同じスタイリングであれば、h1を継承されていると判断
2. ブラウザ上でドラッグした場合に選択範囲に入らなければ検索エンジンに認識されないと判断

ということで実験してみた。

実験結果

結果は、
1. 同じスタイリングだったので、h1のスタイリングは継承されたと判断
2. 選択範囲に入らなかったので、検索エンジンに認識されないと判断

つまり、

見かけ上、検索エンジンに認識されているように見えるものの、おそらく検索エンジンには認識されない。

やはり、cssでcontentsを指定するときと同じく、大事なテキストなどは、擬似要素で表示させるべきではないと言えると思われる。

実験結果詳細

下記画像の通りである。
index.html
<body>
    <div class="box">
        <div class="img"><img src="./img/emiko.jpg" alt="上沼恵美子" width="159" height="212"></div>
        <h1 class="geininn" data-subtitle="~えみちゃんねるでお馴染み~">上沼恵美子</h1>
    </div>
</body>
index.css
.geininn::after{
    display: block;
    content: attr(data-subtitle)"";
}
参考

擬似要素を使いこなそう！CSSのbefore/afterの使い方【初心者向け】

関連バックナンバー

独自データ属性(カスタムデータ属性)を使ってみた
 擬似要素と擬似クラス

【全く関係ない宣伝】

YouTube始めました?毎朝プログラミングを始める前にどうぞ?
お山のまいにちタロット

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-30T00:12:49+09:00

入力時にプレースホルダーを入力欄上部に移動させる

概要

Googleアカウントのログインフォームみたいに入力時のアニメーションの作り方を紹介します。

作成するログインフォーム
 Github

Formの作成

<div class="login_form">
  <h2>Log In</h2>
  <form>
    <div class="field">
      <!-- プレースホルダーの機能をラベルで行う -->
      <label for="email">Email</label>
      <input type="email" id="email" />
    </div>
    <div class="field">
      <label for="password">Password</label>
      <input type="password" id="password" />
    </div>
    <input type="submit" value="Log in" />
  </form>
</div>

プレースホルダーをinput要素のplaceholder属性で表現するのではなく、label要素で表現します。

Label要素をプレースホルダーっぽくする。

今のままでは、普通のラベル付きフォームですので、Label要素をinput要素上に配置します。要素の配置にはpositionを用います。
また、labelにcursor: text;と指定してあげて、ラベルにカーソルが乗っても違和感のないように(あたかもプレースホルダーだと思わせるように)してあげます。

form .field {
  margin: 24px 0;
  position: relative;
}
form label, form input {
  display: block;
  font-size: 16px;
}
form label {
  padding: 0 8px;
  cursor: text;
  position: absolute;
  top: 11px;
  left: 13px;
  background: #fff;
  color: silver;
}
form input[type="email"], form input[type="password"] {
  width: 100%;
  height: 45px;
  padding: 0 12px;
  border: 1px solid #ddd;
}

入力時にJavascriptで要素にClassを加えてアニメーションさせる

ラベル要素がプレースホルダーっぽくなったので、あとは入力時にラベル要素が入力欄上部に来るようにアニメーションをさせるよう設定します。

以下のCSSを加える。

form label {
  /* 省略 */
  transform-origin: left;
  transform: translateY(0);
  transition: all .15s;
}

form label.move {
  transform: translateY(-25px) scale(.8);
}

重要なのは、ラベルの移動や文字の縮小のアニメーションをtopやfont-sizeを用いずに、全てtransformで実現している点です。
このようにすることでスマホで見た時にアニメーションがスムーズになります。詳しくは以下の記事をご覧ください。
ブラウザレンダリング入門〜知ることで見える世界〜

Javascriptでフォーム入力時にlabel要素にmoveクラスを加える。

var inputs = document.querySelectorAll('.field input')

for (var i = 0, len = inputs.length; i < len; i++) {
  var input = inputs.item(i)

  input.addEventListener('click', (e)=>{
    var target = e.target
    var label = target.previousElementSibling
    target.classList.add('focus')
    label.classList.add('move', 'focus')
  })

  input.addEventListener('blur', (e)=>{
    var target = e.target
    var label = target.previousElementSibling
    if (target.value.length === 0) {
      label.classList.remove('move')
    }
    target.classList.remove('focus')
    label.classList.remove('focus')
  })
}

コード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>form_animation</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif
      }
      input {
        -webkit-appearance: none;
        border: none;
        border-radius: 0;
        outline: none;
      }
      .login_form {
        width: 350px;
        max-width: 100%;
        padding: 24px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
      }
      form {
        padding: 24px 0;
      }
      form .field {
        margin: 24px 0;
        position: relative;
      }
      form label, form input {
        display: block;
        font-size: 16px;
      }
      form label {
        padding: 0 8px;
        cursor: text;
        position: absolute;
        top: 11px;
        left: 13px;
        transform-origin: left;
        transform: translateY(0);
        background: #fff;
        color: silver;
        transition: all .15s;
      }
      form label.move {
        transform: translateY(-25px) scale(.8);
      }
      form label.focus {
        color: #1B74E8;
      }
      form input[type="email"], form input[type="password"] {
        width: 100%;
        height: 45px;
        padding: 0 12px;
        border: 1px solid #ddd;
        transition: all .15s;
      }
      form input[type="email"].focus, form input[type="password"].focus {
        border: 2px solid #1B74E8;
      }
      form input[type="submit"] {
        padding: 12px 0;
        margin: 0 auto;
        width: 150px;
        border: none;
        border-radius: 999px;
        background: #1B74E8;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="login_form">
      <h2>Log In</h2>
      <form>
        <div class="field">
          <label for="email">Email</label>
          <input type="email" id="email" />
        </div>
        <div class="field">
          <label for="password">Password</label>
          <input type="email" id="password" />
        </div>
        <input type="submit" value="Log in" />
      </form>
    </div>

    <script>
      var inputs = document.querySelectorAll('.field input')

      for (var i = 0, len = inputs.length; i < len; i++) {
        var input = inputs.item(i)

        input.addEventListener('click', (e)=>{
          var target = e.target
          var label = target.previousElementSibling
          target.classList.add('focus')
          label.classList.add('move', 'focus')
        })

        input.addEventListener('blur', (e)=>{
          var target = e.target
          var label = target.previousElementSibling
          if (target.value.length === 0) {
            label.classList.remove('move')
          }
          target.classList.remove('focus')
          label.classList.remove('focus')
        })
      }
    </script>
  </body>
</html>

　 Tweet
Qiitaで続きを読む

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

CSSのcounterで自動連番

基本の記述

数字が増えない場合

Bulmaのしたいこと別覚書き

文字サイズを変える

文字を寄せる

文字の太さを変える

上下センターに配置

左右センターに配置

デフォルトで設定されてるmargin/paddingを取り除く

PCの時は横並び、スマホの時は縦並びになるボックス

fontawesomeが使えない場合の対応方法

バージョンの確認

使用できるアイコンの確認

CSS指定の確認

Freeのアイコンか

その他

fontawesomeが表示されず◻︎(四角)になってしまう場合の対応方法

バージョンの確認

使用できるアイコンの確認

CSS指定の確認

Freeのアイコンか

その他

cssアニメーション

下からすすーっと出てくる奴

メモ帳か何かに.htmlで張り付ければ見れる

aタグをホバーしたときに矢印カーソルを表示したい

素人によるWeb制作のいろは

Webページ制作について

Webページを制作するにあたり必要なもの

Webページに必要な情報とは

Webサーバについて

HTMLとは

CSS

資料リンク

【SEO関連】独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみても、おそらく検索エンジンには認識されない。

はじめに

実験方法

実験結果

実験結果詳細

参考

関連バックナンバー

【全く関係ない宣伝】

入力時にプレースホルダーを入力欄上部に移動させる

概要

Formの作成

Label要素をプレースホルダーっぽくする。

入力時にJavascriptで要素にClassを加えてアニメーションさせる

コード

日付別

タグ一覧