Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML

confirm cancel

Report adult content:

click to rate

Account: (login)

Sponsored Content

More Channels

Showcase

Channel Catalog

Subsection Catalog

Articles on this Page

10/24/19--07:09: _CSSが反映されない理由～背景の色は...
10/24/19--18:21: _Vue.jsでドラッグ＆ドロップができ...
10/24/19--09:41: _要素を中央に配置したいときのサムシング
10/24/19--11:21: _【初心者】営業から転職のために【備忘録６】
10/24/19--19:46: _【CSS】メモ
10/24/19--21:18: _セレクトボックスのCSS適用が意外に難しい
10/25/19--01:36: _Ant DesignでReactを楽に...
10/25/19--01:37: _SASSの導入に今一つ積極的になれない方へ
10/25/19--06:51: _自分用
10/25/19--07:37: _上手な装飾で「誰にでも」見やすいウェブ...
10/25/19--14:39: _爆速レスポンスの「阿部寛のホームページ...
10/25/19--20:45: _HCJCODE - Webコーディングベース
10/25/19--18:33: _【女子受け抜群】CSS:before:...
10/25/19--23:53: _CSSで背景を完全に透明にして、文字は...
10/26/19--06:01: _【クラス命名に迷わない】HTML、CS...
10/26/19--00:22: _CSSでブラーアニメーション円がだん...
10/26/19--01:03: _まずはこれだけ！　HTML
10/26/19--02:03: _Animate.cssで間隔を調整する
10/26/19--05:30: _まずはこれだけ！　テキストエディタの導...
10/26/19--06:27: _ネイティブHTML & CSSでいろい...

Interesting For You

Browse the Latest Snapshot

Browsing All Articles (1376 Articles)

Live Browser

Channel Description:

QiitaでCSSタグが付けられた新着記事

10/24/19--07:09: CSSが反映されない理由～背景の色は白じゃない、透明なんだ～

CSSで方眼を作るぞ！⇒縦横どちらかしか反映されない…

「HTMLページの背景を方眼紙みたいにしたいなあ」と思い、コードを書きました。
＜理想＞

＜最初に書いたコード　※これでは「理想」にならない＞
・HTML(関連部分のみ抜粋)

hougan.html

<div id="page" style="width:100%; height:100%;"></div>

・CSS

hougan.css

#page
{background: linear-gradient(to right, #ffffff 49px, #b0c4de 1px),
             linear-gradient(to bottom, #ffffff 49px, #b0c4de 1px);
 background-size: 50px 50px;}

コードの説明をします。「わかるよ！」という方はお読み飛ばしください
linear-gradientというのは、
・まず色の変化の方向をきめて（to top, to bottom, to right, to leftなど）
・その方向に向かって〇px（あるいは〇%）までの部分を何色にする！
という指定ができるものです。

上のコードではまず１個目のlinear-gradientで、
「左から右に向かう方向で考えてね。一番左から49pxまでを#ffffff（白）で、そこから1pxを#b0c4de（青っぽい色）にしてね！」と指定をしています。
↓こんな感じ↓

それから２個目のlinear-gradientで、
「上から下に向かう方向で考えてね。一番上から49pxまでを#ffffff（白）で、そこから1pxを#b0c4de（青っぽい色）にしてね！」と指定をしています。
↓こんな感じ↓

指定された２つのlinear-gradientは重なりあうので、縦線と横線が交わった方眼のような見た目になるのです。

そして最後のbackground-sizeで、「49pxの白色部分と1pxの青色部分でできた合計50pxの模様を、divの範囲のなかで繰り返してね！」と指定しています。
・・・コードの説明おわり・・・

☟さて、先ほどのコードの実行結果は…

縦線しか反映されてない！！なんで？？？？

上のレイヤーを透明にしないと、下のレイヤーに書いてあるものは見えない

失敗の原因はタイトル通り、線と線の間の余白部分を#ffffff（白）で指定していたためでした。反映されなかった横線は、正しく実装されていたのに、上のレイヤーの白色で塗りつぶされてしまっていたのです。

そこで、今まで#ffffffで指定していた49pxの部分を、透明（transparent）で指定すると、下に隠れていた横線がちゃんと見えるようになり方眼模様を実装できました。

＜正しいコード＞
・CSS

hougan.css

#page
{background: linear-gradient(to right, transparent 49px, #b0c4de 1px),
             linear-gradient(to bottom, transparent 49px, #b0c4de 1px);
  background-size: 50px 50px;}

最初のコードで「#ffffff」だった部分を「transparent」に変更！

実行結果は

理想通りになりました！

以上です。
この記事がもし誰かの助けになれたら幸いです。

10/24/19--18:21: Vue.jsでドラッグ＆ドロップができるプレビュー機能付きフォームを実装してみた

こんなやつ

下のgif画像を見ていただければ大体わかると思います。

「画像をドラッグ＆ドロップしてそのままアップロードできたら便利だよなあ」
「しかもプレビュー機能もあったらシャレオツだよなあ」

ってことで作ってみました。

ソースコード

コーディングにまだ慣れてないので、少々汚い部分もあるかと思いますが、ご了承ください。

test.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- ここからスタイル記述 -->
    <style type="text/css">
    .commonStyle{ padding:30px; text-align:center; margin:30px; width:400px;}
    .styleA{border:3px dotted gray;}
    .styleB{border:3px dotted rgba(0,200,0,0.7);}
    .button{border:1px solid green; padding:3px; border-radius:5px; background-color:white;}
    .button p {color:green; margin-top:10px; margin-left:10px; margin-right: 10px;}
    </style>
<!-- ここまでスタイル記述 -->

</head>

<body>

<!-- ここからフォームの部分 -->
<form action="******" method="post" enctype="multipart/form-data">

<div id="upload" class="form-group commonStyle" v-bind:class="{'styleA':styleA, 'styleB':styleB}" @dragover.prevent="changeStyle($event,'ok')" @dragleave.prevent="changeStyle($event,'no')" @drop.prevent="uploadFile($event)">

    <label for="upload_image" class="button">
    <p>画像を選択</p>
    <input id="upload_image" type="file" name="img" @change="uploadFile($event)" style="display:none;" accept="image/*">
    </label>

    <!-- ここからプレビュー機能の部分 -->
    <p>またはここに画像ファイルをドラッグ＆ドロップ</p>
    <img v-show="preview" v-bind:src="preview" style="width:300px;">
    <p v-show="preview"> {{name}} </p>
    <!-- ここまでプレビュー機能の部分 -->

</div>
    <button class="btn btn-success" style="width:400px; margin-left:30px;">アップロード</button>

</form>
<!-- ここまでフォームの部分 -->


<!-- ここからVue.jsの部分 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
    el:'#upload',
    data: {
        preview:'',
        name:'',
        styleA:true,
        styleB:false,
    },
    methods: {
        uploadFile: function(event){
            this.styleA = true;
            this.styleB = false;
            const files = event.target.files ? event.target.files : event.dataTransfer.files;
            const file = files[0];
            const reader = new FileReader();
            reader.onload = event => {
                this.preview = event.target.result;
            };
            reader.readAsDataURL(file);
            this.name = files[0].name;
            document.getElementById("upload_image").files = files;
        },
        changeStyle: function(event,flag){
            if(flag=='ok'){
                this.styleA = false;
                this.styleB = true;
            }else{
                this.styleA = true;
                this.styleB = false;
            }
        },
    },
});
</script>
<!-- ここまでVue.jsの部分 -->

</body>
</html>

formタグのactionを設定すれば、あとはボタンを押すだけでアップロードされます。

僕は、アップロード後の処理（バリデーション等）はLaravel側に任せております。

次は、このコードで重要な部分を解説します

ざっくり解説

1 : @dragover.prevent

divタグ内に記述されている@dragover.prevent="changeStyle($event,'ok')"の部分です。

dragoverは簡単に言えば、「（画像を枠外からドラッグしてきて、）要素の枠内に入った時に発生するイベント」です。

@dragover.preventの.preventって何？って感じですが、これを付けないとブラウザに画像が表示されて終わります。実際にやってみればわかります。

今回、@dragover.prevent="changeStyle($event,'ok')"は「点線の枠を緑色にする」という処理をしております。

ページ上部のgif画像を見てみて下さい。画像が点線の枠内にドラッグされた時にその点線の枠線が緑色になっていることがわかります。

2 : @dragleave.prevent

@dragleave.prevent="changeStyle($event,'no')"の部分です。

dragleaveはdragoverとは逆で、ドラッグしながら枠内から枠外へと離れて行った時に発生するイベントです。

3 : @drop.prevent

これは文字通り、ドロップした時に発生するイベントです。

@drop.prevent="uploadFile($event)"により、画像がドロップされるとuploadFile関数が実行されます。

4 : ＠change

input内の@change="uploadFile($event)"の部分です。

これは、inputの内容が変更された時にuploadFile関数が実行されるということです。

uploadFile関数は、画像データと画像ファイル名を取得して、それぞれthis.previewとthis.nameに格納しているのがわかりますね。

最後に

・IEへの対応ははできていないと思います。

・僕は正常に動作しましたが、うまく挙動しない場合もあるかもしれません。

・formタグのactionを設定すれば、あとはボタンを押すだけでアップロードされます。

・僕は、アップロード後の処理（バリデーション等）はLaravel側に任せております。他の方はVueでajaxを用いてアップロードしてました。

10/24/19--09:41: 要素を中央に配置したいときのサムシング

HTMLの要素を中央に配置したいときって度々ありますよね

そんなとき私がよく使用する方法を紹介します！

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上！

解説

topやleftは親要素を基準に計算します

left: 50%;

それとは対照的に、transform: translate()は自身を基準に計算します

transform: translateX(-50%);

これを組み合わせることでセンタリングを実現しているわけです！

CodeSandbox

いろいろな制約により使用できない場合はありますが、

お役に立ったら嬉しいです！

10/24/19--11:21: 【初心者】営業から転職のために【備忘録６】

10/20～10/21での復習

上級編の実践練習

＠media(max-width:1000px ){　　～～　 }
　上記のように書く際に、;を付けてしまったのが何度かあったので今のうちから変な癖がつかないように気を付ける。
ページを作成する際に＜.top-wrapper＞や＜main-wrapper＞などで部分分けをしているが、＜.top-wrapper＞の＜btn＞部分だけ、幅を変更したいなどの場合の書き方を今まで認識していなかった。使用するタイミングがあるかと思うのでしっかり漏れなく覚えておく。

[ex]⇒.top-wrapper .btn{width:100%}

10/21～10/23で勉強したこと

Flexbox

まずは基本的に使用しそうな物のみ勉強。
レスポンシブデザインで行ったような、タブレット／スマホでのアイコンの表示分けの際に簡単に書くことができるようなので、使いこなせるようにしていきたい。
基本的には親要素に⇒display:flex;　／　幅を伸ばしたい要素に⇒flex:auto;
折り返しで並べたい場合は親要素に追記で⇒flex-wrap:wrap;　／　折り返したい要素に⇒width:50%;
スマホ表記などで１列表記にする場合親要素に⇒flex-direction:column;＜つづり注意！＞　１列で表したい要素に⇒margin:0 auto;　でしっかり中央寄せに調整する。

ふりかえり

AtomをインストールしたのでGoogleで表示させながら何度か自分でオリジナルでページ作成を試していきたい。もう１つ、GitHubにも登録したのでページの使い方など触って慣れていこうと思う。

10/24/19--19:46: 【CSS】メモ

dev要素をmarginを使って中央配置にする

containerというidを持つdiv要素を画面中央に置きたい場合、次の通りしていする。
margin:0 auto;で上下が0、左右がオート算出で中央に置かれる。

#container {
      width: 960px;
      height: auto;
      margin: 0 auto;
    }

カーソルがリンクに当たった時浮かび上がらせる

    a:hover{
      text-decoration: none;
      color: #c7c7c7;
    }

<li><a href="#">NEWS</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">DISCOGRAPHY</a></li>
<li><a href="#">MEDIA/LIVE</a></li>
<li><a href="#">CONTACT</a></li>

Sponsored Content

10/24/19--21:18: セレクトボックスのCSS適用が意外に難しい

shadowが消えない

↓ クリックすると shadow がつく

やりがちなCSS

common.scss

.select:focus {
  box-shadow: none;
}

input の場合だとこれで消えるが、 select の場合はこれじゃ消えない

実はこうです

common.scss

.select:focus {
  outline: none;
}

border-radius が消えない（矢印も消えない）

矢印は↓ココのこと

やりがちなCSS

common.scss

.select {
  border-radius: 0;
}

input の場合だとこれで十分だけど、なぜか select の場合はこれじゃ消えない

実はこうです

common.scss

.select {
  -webkit-appearance: none; //追加
  -moz-appearance: none;  //追加
  appearance: none; //追加
  border-radius: 0;
}

上記三行を追加して、セレクトボックスのそもそものデザインを初期化する必要があるらしい。
（appearance：プラットフォームにおける標準的なUIの外観にする）

参考

http://www.htmq.com/css3/appearance.shtml
https://hacknote.jp/archives/9505/
http://nakagaw.hateblo.jp/entry/2015/06/18/164021

10/25/19--01:36: Ant DesignでReactを楽におしゃれにする ~セットアップ編~

はじめに

Reactで何か作ろうと思ったけどデザインを一から考えるのはめんどくさいと思ったのでReactコンポーネントセットを探してみたところ気にいったのが「Ant Design」。
アリババが開発したもので、コンポーネントの種類はかなり豊富。
サンプルを見てみてもなかなか、悪くない感じのデザインでカスタマイズできる。
グリッドシステムもBootstrapと同じなのでお手軽。

今回はセットアップ方法の説明。

セットアップ

npm install antd

プロジェクト配下の/srcの中のindex.jsに

import 'antd/dist/antd.css';

を加えるだけ。

試してみる

たとえばコンポーネントのLayout, Content, Row, Col, Titleを使いたいときはこんな感じで書く。

/src/App.js

import React from 'react';
// 使うコンポーネントをインポート
import { Layout, Button, Typography, Row, Col } from 'antd'; 
import './App.css';

// 一部の要素は各コンポーネントを元に定義する必要がある
// 詳しくはドキュメントのソースコードを見ればわかる
const { Content } = Layout;
const { Title } = Typography;

function App() {
  return (
    <div className="App">
      <Layout style={{textAlign: "center" }}>
        <Content style={{ margin: "60px 16px" }}>
          <Title>Ant DesignでReactを楽におしゃれにする ~セットアップ編~</Title>
          <Row style={{ margin: "60px 16px" }}>
            <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={12}>
              <Title level={3}>セットアップ</Title>
              <Button type="primary">Link</Button>
            </Col>
            <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={12}>
              <Title level={3}>試してみる</Title>
              <Button type="danger">Link</Button>
            </Col>
          </Row>
        </Content>
      </Layout>
    </div>
  );
}

export default App;

するとこんな感じ。

簡単にデザインが加えられる。

これからちょくちょく各コンポーネントを紹介する記事を書いて行きます。

10/25/19--01:37: SASSの導入に今一つ積極的になれない方へ

なぜSASSの導入を勧めたいか

まだやったこともない、調べたこともない人向けです。

なぜSASSの導入を勧めたいか…
それはひとえに楽だから！
それ以外に理由はないのです。
どのように楽かと言うと…

入れ子

css

.moge {
    margin: 0 0 10px;
}
.moge a {
    font-size: 10px;
}
.moge a:hover {
    text-decoration: none;
}

いつもならこう書くと思います。
がしかし、SCSSで書くと、

css

.moge {
    margin: 0 0 10px;
    a {
        font-size: 10px;
        &:hover {
           text-decoration: none;
        }
    }
}

簡単！
入れ子最高。
わかると思いますが、いちいち親要素のclassをコピーしなくていいんですね。
.mogeならともかく、長い名前だったりするとコピーします。
このひと手間がないだけでだいぶ楽になります。
でも入れ子のやりすぎはダメだぞ。

この入れ子だけでもやる価値は十分にあると思うのですが、こんなもんじゃない。

変数

css

$mainColor: #333;
.moge {
  color: $mainColor;
}

これがコンパイルされると…

css

.moge {
  color: #333;
}

こうなるわけです。
変数に格納して召喚できてしまうのです。ｶﾞｵｰ
色などいちいちフォトショップ見てからコード取ってきてとかやってたでしょう？
めんどくさいでしょう？
あれがなくなります。

SassMeister
こちらのサイトでSASSが試せます。
SASSを書いたらどうコンパイルされるか色々試してみましょう＾＾
コンパイルって何？とかは今置いておきましょう。

変数はカスタムプロパティが使えれば何にも問題はないんですけどね。

mixin

いつものお決まりのCSSの書き方があると思います。

css

/* 1 */
@mixin ellipsis(){
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 2 */
.hoge {
  @include ellipsis;
}

/* 1 */
@mixin fontset($size,$color){
  font-size: $size + px;
  color: $color;
}
/* 2 */
.moge {
  @include fontset(19,#fff);
}

1を用意しておけば、この記述が必要な時に
2を書くだけ。

なんて簡単！
ほんのほんの少しだけ機能の紹介をしました。
もっとあるんですよ。
if文の使ったのものやらなにやら。

ひとまず導入してすぐに使えそうなものを紹介してみました。
これだけで時短になると思います。
これらを駆使して爆速コーディングめざしましょう。！(‘・ω・́)ゝﾋﾞｼ

10/25/19--06:51: 自分用

本文

読みやすい文字サイズは14~16px
12px以下は読みにくい
marginは余白

10/25/19--07:37: 上手な装飾で「誰にでも」見やすいウェブページをつくろう

情報の多くを「文字」で伝えるウェブページですが、「文字」読みやすいですか？「ページ」見やすいですか？
この記事はフォントとフォントに関する装飾で工夫できる点を中心にまとめました。

1.フォントはどんなのがいい？利点は？方法は？

フォントは「UDフォント」というものが読みやすく、読み間違えにくいと言われています。
逆に、明朝体や飾り文字は読みにくいと感じる人が多いです。

UDフォントとは

UDフォントは元々文字が読みにくいということが理由で開発されたフォントです。
そのため、「読みやすい」が追求された文字で、高齢者や弱視、読字障がいの人にも比較的読みやすいよう設計されています。

フォントを導入するのは金銭的に厳しい・・・

UDフォントを持っていればいいですが、持っていない場合だと、どこからか入手する必要がありますが・・・
フォントすべてに共通することですが、購入するとなるとやはり少々値が張ります。仕事としてならまだしも趣味でやっている場合はハードルは高いでしょう。
そこで、UDフォントには多少劣りますがゴシック体、特に字がつぶれない、線が細すぎないものを使うと読みやすさが上がります。

CSSでの指定方法の例

クライアントのパソコンに指定したフォントがない場合も考えて、 sans-serif などの一般フォント名でも指定しておいたほうが安心です。

指定例.css

body{
    font-family:"ヒラギノ 角ゴ","メイリオ",sans-serif;
}

2.半角カナはなるべく使わない

半角カナは1バイトですらデータ量を削りたかった時代のもの、現在では使っても特によいことはありません。
(半角カナが好きな人ごめんなさい...)
(想像はつくと思いますが)半角カナは特別、設定していなければ文字を押し込んだようなとても見にくくなってしまいます。
何か理由があるならまだしも、「ウェブページのカタカナは全部半角カナ」とか、半角カナを多用するのはあまりよろしくないかな...と。

3.あくまで「分かりやすくするため」の装飾

HTMLやCSSはあくまで分かりやすく伝えるためのものです。
下の画像のようなことをすると、せっかくの文章がボケてしまいます。

また、背景と文字が同化する、背景のコントラストが大きいなども見にくい原因になります。
現在は非推奨の「blink」も見えにくかったり、てんかんを持つ人の発作原因になったりもします。

一番伝えたいところは多めに装飾、あとは少し控えめに・・・なんてやるよりも、スマートフォンなどであるような「リードモード」など、装飾を最低限にしたほうが意外と見やすかったりすると思います。

4.見やすい装飾

文字の大きさ => やや大きめ
文字の間隔 => フォントによっても変わるので注意
行間の高さ => 規定~2倍くらいまでがちょうどよさそう

この3つを意識すると読みやすいようになると思います。
また、人が文章を読むとき、一行当たり38文字が限界ということ(らしい)です。
※具体的なCSSソースは最後に掲載します。

5.個人的によく使うCSS設定

個人的には下のようなCSSをよく？使います。

example.css

body{
    font-size:1.3em;
    line-height:2em;
    font-family:"ヒラギノ 角ゴ","メイリオ",sans-serif;
    color:#000;
    background:#fff5a8; /* クリーム色なかんじ */
}

【まとめ】美しい = 読みやすい

ここまでまとめめてみて思ったのですが、「美しい」、「すっきりしてる」と思えるようなフォント、装飾だと誰にでも見やすいデザインなのかなーなんて思いました。

このごろ、高齢者や障がいを持つ人にも使いやすい、すなわち「ユニバーサルデザイン」が広まりつつある社会。
インターネットでもそのようなクライアントが増えてきている今、「誰にでも」が広まっていけばなと思います。

この記事が開発の参考になれば幸いです。ここまで読んでいただきありがとうございました。

Sponsored Content

10/25/19--14:39: 爆速レスポンスの「阿部寛のホームページ」を爆速でオシャレにしてみた

経緯

今っぽいfont-familyについて調査していた所、Google Fontsの日本語フォント（Noto Serif JP）に辿りつきました。実際に手持ちのコンテンツにいくつか反映してみた所、それまでと比べていとも簡単にオシャレ感がましましになり、その効果と魅力に少し感動しておりました。

その後「このWebフォントの力なら大体のサイトがそれっぽくなるんじゃね？」という衝動に駆られみんな大好き阿部寛さんのホームページに当て込んでみようという流れになりました。ちなみに私が大好きなWebページはこちら

開始

frame

阿部寛さんのホームページは左側（メニュー）frameと右側（メイン）のframeのセットで構成されておりました。

こんな感じ

<html>
<frameset>
  <frame src="menu.htm">...</frame>
  <frame src="top.htm">...</frame>
</frameset>
</html>

ちなみに、framesetはHTML5では破棄され、代わりに<iframe>を使ったり<div>で何とかまかなう。という手法が当たり前になっているようです。

frame（左）

まずは左側から開始です。

準備したスニペット

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100&amp;display=swap" rel="stylesheet">
<style>
body {
    font-family: 'Noto Sans JP', sans-serif; 
    background-image: linear-gradient(-30deg,#00b6f8 0,#0068f0 100%);
    color: #fff;
}
a {
    color: #fff;
    Text-decoration: none;
    font-size: 14px
}
font {
    font-size: 0;
}
</style>

font-family適用〜
背景を青っぽく〜
アンカーは白に〜
<font>タグに隠れてた記号は消しちゃう〜

frame（左）の作業開始

もちろんChromeの検証を開いてスニペットを埋め込みます。左側のiframeをポチポチと展開していき<head>を見つけたら、右クリックで「Edit as HTML」を選択し、準備したスタイル用スニペットをぺろっと貼り付けます。

frame（左）の結果

これが

こうなった。

フラットやな〜。

frame（右）

続いてエリアとしては広い右側。

準備したスニペット

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100&amp;display=swap" rel="stylesheet">
<style>
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-image: none;
    background-color: #fff;
}
h1 {
    font-size: 4em;
    font-weight: 100;
    margin-bottom: 60px;    
}
a  {
    color: #333; 
}
hr {
    border: width: 0;
}
</style>

font-family適用〜
背景画像を消す〜
h1のタイトルはでっかく〜
hrの線消しちゃえ〜

frame（右）の作業開始

これまた検証から埋め込んじゃえ。

ペリっと。

frame（右）の結果

これが

こうなった。

全体

Ctrl + r でページ更新（さよなら適用したスタイル達！）

オシャレになった！！のか。。。笑

お詫び

font-family 以外も少し準備しちゃってますが「ちょっとどうせやるなら」という思いから、ご了承ください。

「Webフォントを読み込むとフォント読み込み作業が発生するから爆速レスポンスじゃなくなっちまうだろう！」

のようなご意見が飛んで来るかと思いますが、はいおっしゃる通りです。

総括

今の阿部寛さんのホームページのが良い。

試したページ

10/25/19--20:45: HCJCODE - Webコーディングベース

HTML base

<!DOCTYPE html>
<html>
<script>
  function demo() {
    var demo = document.getElementById('demo');

    demo.innerHTML = 'Hello World';
  }
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<body>
  <h1>My coding sample</h1>
  <button type="button" onclick="demo()">Click me to show demo</button>
  <p id="demo"></p>
</body>
</html>

Web API library

tool

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_scripts_intro

めちゃめちゃカンタン

backgroundにカラーコードではなく transparent を書くだけです。

コード

.something{
    background: transparent;
}

※somethingは、背景を透明にしたい対象のクラス

10/26/19--06:01: 【クラス命名に迷わない】HTML、CSSのクラス名を決めるための自分用メモ

セクション、大きなまとまり

hero -ヒーローイメージ
about -〜についての紹介
introduction -紹介
service -サービス
news -ニュース
work -仕事
business -事業、業務
mission -任務、使命
concept -概要、考え、
history -歴史、沿革
event -イベント、催しのお知らせ
person -人物紹介
access -アクセス、交通手段
contact -コンタクト
recommended -おすすめ
recruit -人材募集

Block、親要素

inner -インナー
container -コンテナ
wrapper -囲う要素
outer -外側の囲う要素
home -ホーム
content -文章
article -記事
post -投稿
entry -記事

テキスト関係

text -テキスト
description -説明
article -記事
lead -「導く」という意味で、見出しの補足などに使う
summary -要約
title -タイトル
heading -見出し
outline -概要、概説
pickup -目立たせたい部分に
detail -詳細
content -内容

画像関係

image -画像
picture -写真
thumbnail -サムネイル
figure -図形、画像

コンタクトフォーム関係

required - 必須
content -内容
country -国籍
mail -メールアドレス
tel -電話番号
address -住所
course -コース
number -番号、人数
students　-受講者
motivation -動機
Preferred-date -希望日
teaching -指導内容

随時更新

Sponsored Content

10/26/19--00:22: CSSでブラーアニメーション円がだんだんにじむ

ページを読み込むとcssで円がにじむメモです

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"  href="style.css">
<title>タイトル</title>
<style type="text/css">
    .r{
        width: 200px;
        height: 250px;
        border-radius: 50%;
        background: orange;
        -ms-filter: blur(1px);
        filter: blur(1px);
        transition: 3s all;
    }
    .blurAnime{
        -ms-filter: blur(10px);
        filter: blur(10px);
    }
</style>
<body>
<main>
<!-- これ円 -->
<div class="r"></div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(function(){
    $('.r').addClass('blurAnime');
});
</script>
</body>
</html>

10/26/19--01:03: まずはこれだけ！　HTML

まずはこれだけ！HTML

　聞いたことはあるけどHTMLってなんなの？
　わかりやすく解説します。

どなた向けの記事か

これからプログラミングを勉強しようと思っている方。
なんとなく知ってはいるけどよくわからない方。
書いたことあるけどどう書けばいいかよくわからない方。

内容

HTMLの全体像の把握（詳しいコーディングは解説しません）

Key Word

文章の構造化
HTMLの役割

・「この言葉は重要だから「タイトル」として扱おう」などの役割を決める
・「この文章はこのページのここに配置しよう」と場所を決める

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;

}

次に、終了から開始の間隔を調整したいところですが、
animate.cssをみてみるとこんな記載が。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }


  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

40%⇨50％⇨80％⇨to(100%)で動きが調整されています。
この割合のまま動いてくれた上で、終了から開始までの間隔を付けてあげればOKということで、
表計算ソフト登場

duration(s)が2秒の場合の40%,50%,80%,100%の秒数はそれぞれ0.8秒,1秒,1.6秒,2秒ということがわかります。
duration(s)を仮に5秒、6秒、7秒、8秒にした場合も計算してみました。
格duration(s)の際に0.8秒,1秒,1.6秒,2秒が何％に当たるのかも計算。
duration(s)が5秒の場合は0.8秒は16%、1秒は20%.......
今回の場合は5秒と8秒が比較的綺麗な数値になったので、どちらかにしようと思います。
まぁ、5秒に1回動くようなものならOKなので今回は5秒のdurationでやってみます。

ということで、CSSを変更

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

}

さらにこの計算結果にあわせて@keyframes flipも変えてあげます。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  16% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  20% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  32% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

動きのイメージとしては、40％になったら、toと同じ値をぶこんであげれば、それ以降は動かないで残りの60％を過ごしてくれるイメージ

これで、ほぼほぼ完了。

動き出す秒数を考える。

私の場合、bootstrapを使って、読み込み時に画面サイズを調整していました。
読み込み時点で、このアニメーションが動くと、それに合わせて、画面サイズを調整してしまっていたので、
アニメーションが動き出す秒数をanimation-delayで調整。1秒あれば、読み込み完了するでしょうという適当名考えで1sにしました。

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

/* X秒おいてからアニメーションする */
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;

}

以上で終わり。

10/26/19--05:30: まずはこれだけ！　テキストエディタの導入！（VScode）

まずはこれだけ！　テキストエディタの導入！

　Webページを書きたいんだけどテキストエディタってどうやって導入するの？
　わかりやすく解説します。

（主にMac向けにお話ししますが基本的にはWindowsも変わりません）

ペルソナ

プログラミングをこれから勉強しようとしている方
初めてプログラミングを書こうと思っている方

内容

テキストエディタの導入（詳しいコーディングは解説しません）

Key Word

テキストエディタ
VScode

プロのプログラマーHTMLをはじめとするプログラミング言語を書くのに使うツールを「エディタ」と言います。
プログラミングを書くことに特化させた「メモ帳」のようなものです。
このエディタは基本的に無料でダウンロードして使用することができます。

とお伝えしました。
本記事ではテキストエディタの導入方法をお伝えします！

テキストエディタの種類

テキストエディタはWindowsやMacにもともと入っているものから、
Web上で無料でダウンロードできるもの、ブラウザ上で操作するものまで
多種多様にあります。

今回はその中でも、私が愛用しているVScodeの導入方法をご紹介します。

余談ですが、なぜもともと入っているエディタを使わずにわざわざダウンロードするのでしょうか？

それはWebで公開されているテキストエディタは
プログラミング開発に特化したカスタマイズができるからです。
例えば、以下はVScodeの実際の画面の一部です。

（使用言語はここでは気にしなくていいです）
色がついていますね？

ではもともと入っているエディタも見てみましょう

驚くことにこれは全く同じコードです！
見やすさの違いが一目瞭然だと思います！

言語の中にはインデント（段落の深さ）が半角スペース一個ぶんだけずれるだけでもエラーになるものもあります。
それを２番目のエディタの中から探すのは実に効率が悪いです。

これだけでもVScodeなどのテキストエディタの価値を何となくわかっていただけると思いますが、
これは機能の一部で、自分好みにカスタマイズすることができて非常に便利なのです！

（というよりこっちの方がプロも使っているからかっこいい！・・・という理由でも全然OKです！）

2.実際に導入してみる

では、早速導入しましょう！

①　VScode　HPにアクセスする(https://code.visualstudio.com/)
上記リンクまたはVScodeで調べる

②ダウンロードする。

1.「Download for Mac」または矢印を押してダウンロード

矢印を押すと

この画面が開くので

自分のPCのOSにあったものでStableと書いてある矢印を押してダウンロードしてください。

ダウンロードが完了したら
基本的に「ダウンロードフォルダ」に格納されますので、
ダウンロードフォルダを開きましょう！

（ダウンロードフォルダの場所がわからない人は検索しましょう！
Macの場合はcommandキー + スペースキーで検索ボックスが開きます）

ブラウザによっては下のバーにダウンロードしたファイルが表示されるのでクリックすると
そのファイルのある場所に直接いくことができます。（Gif画像左下参照）

ダウンロードファイルを開くと以下のようになるので、「VSCode-darwin-stable.zip」を
ダブルクリックしてください

するとVScodeが開きますのでこちらもダブルクリックをして開いてみましょう！

するとテキストエディタが開くと思います！

2.まとめ

今回のポイントは

テキストエディタをダウンロードするのは使い勝手がいいから！かっこいいから！
（漠然とこれを使うものだという認識でOK！徐々に実戦で覚えられますので安心してください！）
VScodeのダウンロード方法

でした！

今回はまずはPCにテキストエディタを導入するフローをお伝えしました！
次回はテキストエディタを入れたらまず入れるべきカスタマイズの紹介と
実際にHTMLを書いてみましょう！

最後までありがとうございました！！

10/26/19--06:27: ネイティブHTML & CSSでいろいろやってみたシリーズ（随時更新）

ネイティブのHTMLやCSSのやったことがない技術を触ってみるシリーズ。随時更新中です！

HTML

figure要素

HTML5で追加されたfigureタグは「画像」専用のタグではなく「注釈」という意味なので、画像だけでなくvideoタグなども囲おう。セマンティックなサイトになる。しかもfigureタグはCSSのdisplay: blockなのでスタイル的にも使いやすい。

※参考：video要素はfigure要素で囲った方がセマンティック的にもスタイル的にもいいよ、というお話

カスタムデータ属性

HTML5で追加された「カスタムデータ属性」にテキストを入れることで、CSSやJSの中に固有のテキストを書かずに済む方法。

※参考：カスタムデータ属性をCSSやJSで読み込む（テキストをHTMLに集中させる）

CSS

擬似クラス

擬似クラス:target

ハンバーガーメニューをJSを使わずにCSSだけで作る。擬似クラス:targetを使う方法。

※参考：【擬似クラス:target】CSSのみでハンバーガーメニューを作る

擬似クラス:not()

擬似クラス:not()を使うと、「○番目以外は」という指定ができるようになり、これまで「一番最初だけ」「一番最後だけ」という二重の擬似クラスで指定したいたスタイルが一つで完結できる！

※参考：【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ！

擬似要素

pointer-events

inputタグに擬似要素を加えると、その擬似要素の上だけホバーアクションが効かなくなる。それを効かせるためにCSSのpointer-eventsプロパティを使う必要があった。

※参考：【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

display

display:list-item

リストのlist-styleがどうやっても表示されなくなり、あれこれと調べたり試したところ、6年前の記事によってリストにはdisplay:list-itemが設定されていることを知る！

※参考：list-styleが表示されない！原因はdisplayにあった！6年前の知恵袋に救われた話

display: flexのflex-basis

横並びに便利なflexbox。サイドメニューは固定で残りのブロックは成り行き、みたいな設定をしたいと思い、いろいろ試したらflex-basisが便利だった！（calc()との比較も）

※参考：固定幅と可変幅の組み合わせにはflex-basisがまったくカン・タン・だ！

CSS Grid

CSS Gridを使うと2分割のグリッドシステムが簡単に作れた！

※参考：CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）

テキスト

columns

CSSのcolumns機能を使うと印刷物でよくあるような2段組を表現できる。これによってPCは2段組、スマホは1段組と切り替えれば、意図通りの行長での文字の折り返しが実現できる！

※参考：CSSのcolumns（段組）でPCとスマホの読みやすさを統一

CSSの文字詰め

印刷物のように約物（句読点、カギカッコなど）を詰めることができるのか！？Yaku Han JP、letter-spacing、font-feature-settingsの方法を比較

※参考：【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較

印刷物のように左右幅いっぱいに両端揃えすることができるのか！？text-align: justifyを使う

※参考：【続・CSSの文字詰め】letter-spacingとfont-feature-settingsとYaku Han JPに両端揃えのtext-align: justifyは効くのか

縦書きCSS

和風表現に使えそうな縦書きCSS（writing-mode、text-orientation、text-combine-upright）がどんなものか試してみた。

※参考：縦書きCSSやってみた（writing-mode、text-orientation、text-combine-upright）

formのリセット設定

formのCSS設定はブラウザごとに固有のスタイルが予めて入っており、なかなか変えにくい。そのスタイルを解除して一からスタイルを当てるリセット設定をいくつか試して比較してみた。

※参考：【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較）

画像

object-fit

私が愛してやまない画像の外接リサイズobject-fitの魅力！タテヨコ比を保ったまま画像枠いっぱいにトリミングしてくれる。IEでも使えるようになる方法も！

※参考：私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ！！

サイズ

vw、vh、vmin、vmax

vw、vhを使うとレスポンシブ設定をせずに1つの設定だけでPCとスマホのレウアウト設定ができるのではないか、という実験。当ブログで一番読まれている記事！

※参考：もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの？（オマケにvmin、vmaxも）

background

background-clip: text

Apple WebサイトのiPhone Xsページで見かけた文字の形で背景画像を切り抜く表現。調べたらbackground-clip: textという技術を使っていたのでやってみた。

※参考：【CSS】background-clip: textで背景を文字形に切り抜いてさらにグラデのアニメにする

カラー

CSSの色設定（真っ白、真っ黒からの細かい階調）

真っ白の次（#fff〜#eee）、真っ黒の次（#111〜#000）の色指定を安易に3桁で書いていたが、6桁でもっと細かく刻むとどのくらいの階調の違いがあるのか確認。真っ白の方は見た目にも違いがわかりやすい。

※参考：【CSS】#fffと#eee、#111と#000 の間はどのくらいグラデーションになるか

グラデーション

linear-gradientで斜線

CSSのグラデ設定linear-gradientだが、設定値によってはストリプのようなクッキリした表現もできる。さらに実験で白背景に斜線のような太さの異なる繰り返しをやってみた。

※参考：linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】

conic-gradient（放射状）

以前は画像で表現していた放射状の光線がCSSのみで表現できるようになった！conic-gradientを試してみる。

※参考：【CSS】conic-gradientで放射状の光線を放つ太陽を作る

transform

transformのrotate()

擬似クラス:afterをtransformのrotate()で回転させて、画像なしにリンクの「＞」アイコンを作る。

※参考：リンクでよくある「＞」アイコンを画像じゃなくてCSSだけで作る

CSSアニメ

transition

CSSとjQueryの合わせ技。アニメ設定はCSSのtransitionで設定して、jQueryはスクロールの感知とclassの追加、削除をするという分担

※参考：スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロール

scroll-snap

スナップ（引っかかり）のあるスクロールscroll-snapを試す。簡単な記述で作れた！

※参考：【CSS】scroll-snapでスナップ（引っかかり）のあるスクロールがまったくカン・タン・だ！

Sponsored Content

CSSタグが付けられた新着記事 - Qiita

https://qiita.com/tags/css/feed

More Channels

Showcase

Channel Catalog

Articles on this Page

Channel Description:

CSSで方眼を作るぞ！⇒縦横どちらかしか反映されない…

上のレイヤーを透明にしないと、下のレイヤーに書いてあるものは見えない

こんなやつ

ソースコード

ざっくり解説

1 : @dragover.prevent

2 : @dragleave.prevent

3 : @drop.prevent

4 : ＠change

最後に

解説

10/20～10/21での復習

上級編の実践練習

10/21～10/23で勉強したこと

Flexbox

ふりかえり

dev要素をmarginを使って中央配置にする

カーソルがリンクに当たった時浮かび上がらせる

shadowが消えない

やりがちなCSS

実はこうです

border-radius が消えない（矢印も消えない）

やりがちなCSS

実はこうです

参考

はじめに

セットアップ

試してみる

なぜSASSの導入を勧めたいか

入れ子

変数

mixin

本文

1.フォントはどんなのがいい？利点は？方法は？

UDフォントとは

フォントを導入するのは金銭的に厳しい・・・

CSSでの指定方法の例

2.半角カナはなるべく使わない

3.あくまで「分かりやすくするため」の装飾

4.見やすい装飾

5.個人的によく使うCSS設定

【まとめ】美しい = 読みやすい

経緯

開始

frame

frame（左）

準備したスニペット

frame（左）の作業開始

frame（左）の結果

frame（右）

準備したスニペット

frame（右）の作業開始

frame（右）の結果

全体

お詫び

総括

試したページ

HTML base

Web API library

tool

関連知識

エンジン

HTML

CSS

JS

めちゃめちゃカンタン

コード

セクション、大きなまとまり

Block、親要素

テキスト関係

画像関係

コンタクトフォーム関係

まずはこれだけ！HTML

・実際にどう書くの？

まずはこれだけ！　テキストエディタの導入！