20191026のHTMLに関する記事は8件です。

投稿日：2019-10-26T22:47:47+09:00

n件ずつ表示する「もっと見る」ボタンのシンプル実装

私はなぜか「もっと見る」ボタンを実装することがやたらと多いので、いろいろなやり方を試す中で「これが一番シンプル！」と発見した方法を書いておきます。

要件

今回は以下のような要件の「もっと見る」ボタンを実装します。

一覧があり、最初は6件表示されている

「もっと見る」ボタンをクリックすると6件ずつ表示される

もっと見るものがなくなったら、「もっと見る」ボタンは消える

データのロードは最初に全件行う。「もっと見る」をクリックしたときにロードするわけではない

したがって、速度を速くする目的ではなく、一覧の量が多いので隠しておきたい時に使えるものを実装する

デモ

デモを作成しましたので以下のリンクから動作確認ができます。
もっと見るボタン - codepen

この「もっと見る」ボタンのおすすめポイント

jsがたったの8行！

htmlはn件ごとにdivで区切ったりする必要なし

「もっと見る」をクリックして出現する時、ささやかなアニメーションつき

実装のポイント

詳しい実装はデモのcodepenを見てほしいのですが、jQueryでやっていることは下記のような内容です。

最初の6件以外を非表示にする

「もっと見る」をクリックしたら、非表示になっている項目の頭から6件だけ表示する

表示後、非表示の項目が0件の場合は、「もっと見る」ボタンを非表示にする

実装は以下のようになっています。
JavaScript
var moreNum = 6;
$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
$('.more').on('click', function() {
  $('.list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
  if ($('.list li.is-hidden').length == 0) {
    $('.more').fadeOut();
  }
});
1. 最初の6件以外を非表示にする

「最初の6件以外」をどう取得するかがポイントですが、cssのnth-childという疑似クラスを使用しました。以下のコードの部分です。
$('.list li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
.list li:nth-child(n + 7)とすることで、「listクラス内のliタグの７番目以降」が取得できます。nth-childは大変便利で、jsでロジックを書かなくてもcssのセレクタだけでn番目、n以前、n以降、最初、最後などが取得できます。

2. 「もっと見る」をクリックしたら、非表示になっている項目の頭から6件だけ表示する

こちらは以下のような実装をしました。
$('.list li.is-hidden').slice(0, moreNum).removeClass('is-hidden');
非表示の要素にはis-hiddenクラスが付与されるので、これをセレクタにします。
6件目までを取得するには配列のsliceメソッドを使用しています。sliceは、配列の0から6までの要素をコピーして新しい配列を返すメソッドです。

最初はnth-childでできないか試してみたのですが、この場合では難しかったです。
li.is-hidden:nth-child(-n + 6)とか
li.is-hidden:nth-of-type(-n + 6)とか
これらはうまくいきません。理由はnth-childもnth-of-typeもタグに対して何番目かを選択できるもので、is-hiddenなどのクラス要素内で何番目かは選択できないのでした。

スライドアニメーションの実装方法

アニメーションはcssで実装しています。以下はアニメーション部分のcssの抜粋です。
css
.list li {
    opacity: 1;
    height: 32px;
    margin-top: 10px;
    transition: all 0.4s ease 0s;
}
.list li.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}
.list li {...}に書かれているのが表示状態のスタイルで、
.list li.is-hidden {...}に書かれているのが非表示状態です。
非表示→表示に変わる時の変化の指定をしているのが、transitionプロパティです。transitionはアニメーション関連の設定のショートハンドです。一言で解説すると「0.4秒で変化しろ！」という指定となっています！

「非表示のスタイルはdisplay:none;でいいんじゃないの？」と思う方もいるかもしれませんが、ダメなのです。
transitionできるプロパティとできないプロパティがあるためです。そのため、非表示→表示や表示→非表示にアニメーションを入れたい場合、opacity（透明度）をよく使っています。fadeIn・fadeOutの効果が出せておすすめです。
今回はheightにも変化をつけたため、「fadeInしながらスライド」みたいなアニメーションになりました。

この実装の問題点

初回表示時に全件表示されたあと7件目以降が隠れるところのが一瞬見えてしまいます。もっと良い実装をするなら、アニメーション時だけ特定のクラスを付与すると良いのですが…それはまたの機会に…。
気になる場合はアニメーションをやめると良いと思います。

まとめ

css疑似クラスのnth-childやjs配列のsliceメソッドを使って、n番目以降やn番目以前を取得する方法をご紹介しました。こういうテクを知っていればごりごりロジックを書く必要がなくなって便利ですね！

参考記事

何番目系の便利なCSSまとめ
 【CSS】nth-childとnth-of-typeでもう混乱しない。
【CSS3】Transition（変化）関連のまとめ

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T22:01:16+09:00

ネイティブHTML & CSSでいろいろやってみたシリーズ（随時更新）

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

HTML、CSSの基本書式についてはこちら
※参考：【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！

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でスナップ（引っかかり）のあるスクロールがまったくカン・タン・だ！

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T21:30:25+09:00

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

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

プログラミングを書くにはテキストエディタを使うのはわかったけど
どうやって導入するの？

　わかりやすく解説します。

ペルソナ

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

初めてプログラミングを書こうと思っている方

内容

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

Key Word

テキストエディタ

VScode

目次

1.テキストエディタとは？
2.実際に導入してみる
3.まとめ

Contents

1.テキストエディタとは？

前回のまずはこれだけ！HTML！の記事の最後に、

プロのプログラマー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が開きますのでこちらもダブルクリックをして開いてみましょう！

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

3.まとめ

今回のポイントは

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

VScodeのダウンロード方法

でした！

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T20:42:07+09:00

jQueryを使って遷移先リンクを別タブで開く

リンクをクリックした時、別タブで開く処理をjQueryを使って
書きたいことがあったので書き留めておきます。
script.js
$('.hogehoge').click(function(){
   $url = $(this).attr('href');
   window.open($url,'_blank');
});

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T18:03:33+09:00

Animate.cssで間隔を調整する

少し古いのですが、最近HPを作成する仕事が入ってきました。
そこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、
Animate.cssで動きを付けました。

導入

導入は簡単。
上記サイトの「Download Animate.css」をクリックすれば、CSSが表示されるので、それをlinkタグで読み込むだけ。
 <link rel="stylesheet" href="css/animate.css">
動かしたい要素にクラスを付与
<h1 class="animated flip" id="top_title">Enjoy</h1>
これだけで動きます。
今回はflipにしてみました。
ただし、これだけだといっかいぐるりと回るだけ。

永遠に動き続けるようにする

style当てます。animation-iteration-countをinfiniteにしてあげれば、ずっと動くようになります。
#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;
}
これだと、ひたすら回り続ける上、終了直後に開始され、しつこい動きになってしまいます。
そこで、時間間隔をあけるようにします。

まずは、一回の動きが何秒かけて動かしたいかを考えます。
いろいろ試したところ2秒だと綺麗な動きをたもてたまま、焦った印象もなく期待通りの1回の動きをしてくれましたので、animation-durationを2sにしました。
#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;

}
以上で終わり。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T16:45:48+09:00

まずはこれだけ！　HTML

まずはこれだけ！HTML

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

どなた向けの記事か

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

なんとなく知ってはいるけどよくわからない方。

書いたことあるけどどう書けばいいかよくわからない方。

内容

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

Key Word

文章の構造化

HTMLの役割

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

目次

1.HTMLとは？
・ Hyper Text Markup Language
・ HTMLの役割とは？
・ HTMLが「Webページ」になる理由
・実際にどう書くの？

2.まとめ

Contents

1.HTMLとは？

・ Hyper Text Markup Language

　HTMlとは「Hyper　Text　Markup Language」の略でマークアップ言語に分類されます。
そしてマークアップ言語とは「文章を構造化」する言語のことです。

（正直わかりづらいですよね・・・？）

文章を構造化とはなんでしょうか？

・ HTMLの役割とは？

例えば

新聞を想像してみてください。
新聞は重要なところは「大きな見出し」、次に大事なところは「中見出し、小見出し」、
普通の文章は小さい文字でブロック分けされて書かれていますよね？

「文章の構造化」とはまさにこのことで、
HTMLの役割は以下の２つを決めることと言えます。

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

では実際のHTMLをみてみましょう！

おなじみのグーグル先生の検索画面です。
なにやら右に難解な文字がいっぱい書いてありますね？

これがHTMLです（一部抜粋）。

・ HTMLが「Webページ」になる理由

ここでは詳しく解説しませんが、「こんな感じか」程度の認識でOKです！

HTMLはそれだけでは普段私たちがみているWebページにはなりません。
ブラウザ(※)が読み込むことで人間にわかりやすい形で
おなじみの「Google」サイトとして見ることができるわけですね。

※ブラウザとは「グーグルクローム」や「safari」、
「internet explorer」のことです。

実はブラウザの機能の一つに、「HTML言語を人間に見やすいように変換する」
というものがあることで普段私たちは「Webページ」を見れているんです！

もし興味があれば、適当なWebページにアクセスして右クリックして、
「検証」、または「ページのソース」をクリックしてみてください。
そのページのHTMLをみることができますよ！

・実際にどう書くの？

プロのプログラマーHTMLをはじめとするプログラミング言語を書くのに使うツールを
「エディタ」と言います。

プログラミングを書くことに特化させた「メモ帳」のようなものです。

このエディタは基本的に無料でダウンロードして使用することができます。

次回は実際にエディタをダウンロードして、HTMLを書いてみましょう！！

2.まとめ

　
HTMLとは

Webページを作るためのマークアップ言語

マークアップ言語とは文章の構造化をする言語のことで

「この言葉は重要だから「タイトル」として扱おう」などの役割を決める

「この文章はこのページのここに配置しよう」と場所を決める

今回の記事では簡単にHTMLの概要について触れました。
奥が深い言語の一つなので説明しきれませんが、基本的な概略としては以上の
2点を覚えておいてください。

それでもやっぱりよく言っていることがわからないということもあると思います。
プログラミングで重要なことは「手を動かすこと」です。

次回は実際に手を動かしながらHTMLについての理解を深めていきましょう！

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

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T09:27:24+09:00

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

https://developer.mozilla.org/ja/docs/Web/Guide/API

https://developer.chrome.com/multidevice/user-agent

https://github.com/GoogleChrome/chrome-app-samples

tool

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

関連知識

エンジン

HTMLレンダリングエンジン

Microsoft EdgeがChromeと同じエンジンを採用した理由とは？　日本マイクロソフトに直接聞いてみた

⭐️Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた

https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%B8%80%E8%A6%A7

https://www.jianshu.com/p/03b70c89934b

HTML

CSS

JS

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-26T06:39:23+09:00

爆速レスポンスの「阿部寛のホームページ」を爆速でオシャレにしてみた

経緯

今っぽい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フォントを読み込むとフォント読み込み作業が発生するから爆速レスポンスじゃなくなっちまうだろう！」

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

総括

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

試したページ

いとうまいこのホームページ

立高20期同期会

ふいちゃんの中国日記：ご挨拶

これはWebページです

　 Tweet
Qiitaで続きを読む

20191026のHTMLに関する記事は8件です。

n件ずつ表示する「もっと見る」ボタンのシンプル実装

要件

デモ

この「もっと見る」ボタンのおすすめポイント

実装のポイント

1. 最初の6件以外を非表示にする

2. 「もっと見る」をクリックしたら、非表示になっている項目の頭から6件だけ表示する

スライドアニメーションの実装方法

この実装の問題点

まとめ

参考記事

ネイティブHTML & CSSでいろいろやってみたシリーズ（随時更新）

HTML

figure要素

カスタムデータ属性

CSS

擬似クラス

擬似クラス:target

擬似クラス:not()

擬似要素

pointer-events

display

display:list-item

display: flexのflex-basis

CSS Grid

テキスト

columns

CSSの文字詰め

縦書きCSS

formのリセット設定

画像

object-fit

サイズ

vw、vh、vmin、vmax

background

background-clip: text

カラー

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

グラデーション

linear-gradientで斜線

conic-gradient（放射状）

transform

transformのrotate()

CSSアニメ

transition

スクロール

scroll-snap

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

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

ペルソナ

内容

Key Word

目次

Contents

1.テキストエディタとは？

テキストエディタの種類

2.実際に導入してみる

3.まとめ

jQueryを使って遷移先リンクを別タブで開く

Animate.cssで間隔を調整する

導入

永遠に動き続けるようにする

動き出す秒数を考える。

まずはこれだけ！ HTML

まずはこれだけ！HTML

どなた向けの記事か

内容

Key Word

目次

Contents

1.HTMLとは？

・ Hyper Text Markup Language

・ HTMLの役割とは？

・ HTMLが「Webページ」になる理由

・ 実際にどう書くの？

2.まとめ

HCJCODE - Webコーディングベース

HTML base

Web API library

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

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

まずはこれだけ！　HTML

・実際にどう書くの？