What's New Qiita

20200301のHTMLに関する記事は5件です。

  • 投稿日：2020-03-01T22:51:10+09:00

背景色によって文字色が変わる、流れる文字のCSSアニメーション実現方法

はじめに

こんな感じのを実現するためのコードです。
slider-demo.gif

コード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>流れる単語</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="color-area">
      <div class="scroll-string scroll-string-white">流れる単語</div>
    </div>
    <div class="scroll-string scroll-string-blue">流れる単語</div>
  </body>
</html>
index.css
html {
  height: 100%;
}
body {
  height: 100%;
}
.color-area {
  width: 100%;
  height: 200px;
  top: 100px;
  position: relative;
  overflow: hidden;
  background-color: darkblue;
  z-index: 2;
}
.scroll-string {
  font-size: 30px;
  visibility: hidden;
  text-align: center;
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.scroll-string-white {
  color: white;
  top: 0;
  animation: scroll-white 5s linear 0s 1 forwards;
  -webkit-animation: scroll-white 5s linear 0s 1 forwards;
  z-index: 3;
}
.scroll-string-blue {
  color: darkblue;
  top: 100;
  animation: scroll-blue 5s linear 0s 1 forwards;
  -webkit-animation: scroll-blue 5s linear 0s 1 forwards;
  z-index: 1;
}
@keyframes scroll-white {
  0% {
    transform: translateY(-100px);
    visibility: visible;
  }
  100% {
    transform: translateY(300px);
  }
}
@keyframes scroll-blue {
  0% {
    transform: translateY(-200px);
    visibility: visible;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(200px);
  }
}

ポイント

白い文字と青い文字を重ねて同時にアニメーションさせています。レイヤー構造は上から順に

  • 白い文字
  • 青い背景
  • 青い文字
  • 白い背景

となっています。その際、青い背景をoverflow: hiddenとすることで白い文字を青い背景の上のみで表示させます。

おわりに

もっと効率的の良い書き方があるかもしれません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-01T22:10:22+09:00

【最新版】Tinderで自動右スワイプできなくなった難民を救うコード

はじめに

2020年3月1日現在、Tinderのいいねボタンを含むコンポーネントのクラス名が変わった為、以前と同じように自動スワイプできなくなる問題が発生しました。これは昨今流行している「新型コロナウィルス」に勝るとも劣らない、日本社会における文化的な交流を妨げる由々しき事態と考え、急ぎ解決策を書き起こした次第です。

コード

御託はいいからさっさと教えろって方、お待たせしました('ω')

『一度LIKEを手動でクリックしてから』

F12でDeveloper Toolを開き、下記のコードをConsoleにコピペしてEnterを叩けば新たな出会いが開かれるでしょう。
ブラウザを更新しなければ、検索距離や年齢等の条件を変更も可能で、再度の手動クリックは不要です。
image.png

Tinder.js
count = setInterval(
function(){
var buttons = document.getElementsByClassName("button Lts($ls-s) Z(0) CenterAlign Mx(a) Cur(p) Tt(u) Bdrs(50%) P(0) Fw($semibold) focus-button-style Bxsh($bxsh-btn) Expand D(b) Bgc(#fff) Trstf(e) Trsdu($normal) Wc($transform) Scale(1.1):h Scale(.9):a");
buttons[2].click()
},1000)

コード解説（開発者向け）

setInterval - 処理を定期実行するメソッド（第一引数：処理内容、第二引数：処理のインターバル（ミリ秒））
getElementsByClassName - クラス名を指定して、そのクラスが持つメソッドなんかを丸々取得
buttons - 4つのボタンのリスト（Dislike, Super Like, Like, Boost）3番目がLike
※上述しましたが、手動クリック前後で各ボタンの挙動が変わる場合がある為注意。

クラス名はボタンを右クリックして、検証を押せば見れます。
image.png
image.png

おわりに

参考になった方は右スワイプ、もとい、いいねをお願いします！
　

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-01T17:31:51+09:00

製薬企業研究者がPHPの基本的な文法についてざっくりまとめてみた

はじめに

ここでは、PHPの基本的な文法をざっくりとまとめてみます。

基本的な記述方法

PHPは.phpという拡張子のファイルに記述します。
HTMLのソースコードの中で<?phpから始まる部分がPHPのコード部分になります。
PHPでは文末にセミコロン;が必要になります。
コメントを書くときは、//を使います。
また、複数行に渡るコメントは/* */を使って書くことができます。
オブジェクトの値を出力するときは、echoを使います。

変数とデータ型

変数は、$変数名 = 値;として宣言します。

variable.php
<?php

$str = '文字列'; // 文字列
echo $str;

$num = 123; // 数値
echo $num;

$isBoolean = true; // 真偽値
echo $isBoolean;

$arr = array('Python', 'R', 'JavaScript', 'PHP'); // 配列
echo $arr;

$dict = array(
    'Python' => 'AI',
    'R' => 'statistics',
    'JavaScript' => 'web',
    'PHP' => 'WordPress'
); // 連想配列
echo $dict;

?>

制御文

条件分岐

if文

if文は、if (条件) {処理}と記述します。
さらに場合分けするときは、elseやelse ifを使います。

if.php
<?php

num = 3;

if ($num == 1) {
    echo '1';
} else if ($num == 2) {
    echo '2';
} else if ($num == 3) {
    echo '3';
} else {
    echo '1でも2でも3でもない';
}

?>

switch文

if文で場合分けが多くなる場合は、switch文を使うと簡単に書けます。
switch文は、switch (変数) {case 値: 処理; ・・・}と記述します。

switch.php
<?php

$num = 3;

switch ($num) {
    case 1:
        echo '1';
        break;
    case 2:
        echo '2';
        break;
    case 3:
        echo '3';
        break;
    default:
        echo '1でも2でも3でもない';
        break;
}

?>

なお、breakを書かないと、条件に合った場合でも後続のcaseの処理が走ってしまうので注意が必要です。

反復処理

for文

一定回数だけ繰り返し処理を実行する（繰り返し回数があらかじめ分かっている）ときは、for文を用います。
for文は、for ($変数名 = 初期値; $変数 <= 最大値; $変数の値の更新)と記述します。

for.php
<?php

for ($i = 1; $i <= 5; $i++) {
    echo $i;
}

?>

ここで、$i++となっているのは、$i = $i + 1すなわち反復処理を繰り返すごとに変数$iを1ずつ大きくしていくことを示しています。これは、$i += 1とも書けますが、変数の値を1ずつ更新していく場合は、この書き方はあまりせず、$i++または$i--と書きます。変数の更新幅が1以外の場合は、$i += 2のように書きます。

また、foreach ($配列 as $変数名) {処理}とすると、配列の要素を一つずつ取り出すことができます。

foreach.php
<?php

$arr = array('Python', 'R', 'JavaScript', 'PHP');

foreach ($arr as $lang) {
    echo $lang;
}

?>

while文

ある条件を満たす間だけ処理を繰り返す場合は、while文を用います。
while文は、while (条件) {処理}と記述します。

while.php
<?php

$i = 1;

while ($i < 5) {
    echo $i;
    $i++; // 変数の値の更新
}

?>

関数

関数は、function 関数名(引数){処理}とすることで作成できます。

function.php
<?php

function copyNumber($num) {
    return $num;
}

echo copyNumber(123);

?>

クラス

クラスは、class クラス名 {プロパティ、メソッドなどの内容}とすることで作成できます。
newを使うことで、新しいインスタンスを生成できます。

class.php
<?php

class Human {
    public $name;
    public $age;
    public function introduceMyself() {
        return 'I am ' + $this->name + ' and ' + $this->age + ' years old. ';
    }
}

$yukiya = new Human();
$yukiya->name = 'Yukiya';
$yukiya->age = 31;


echo $yukiya->name;
echo $yukiya->age;
echo $yukiya->introduceMyself();

?>

まとめ

ここでは、PHPの基本的な文法について解説しました。
ウェブページのソースコードを見るときに役立ちます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-01T15:03:12+09:00

HTML/CSS/JSデモ

HTML/CSS/JSが動くか試してみよう！！

今回は、Visual Studio Codeでプロジェクトを入れるためのフォルダ内にそれぞれのファイルを作り、動くか試して行きたいと思います:relaxed:

今回の記事

  • HTMLでWebページの土台ファイルを作ろう!
  • CSSで見た目の調整をしよう!
  • リセットCSSを入れよう!
  • JavaScriptで動きを付けよう!
  • jQueryでJavaScriptを簡単に導入しよう！

HTMLでWebページの土台ファイルを作ろう！

HTMLとは「Hyper Text Markup Langage」の略で、簡単に言うとWebページの土台となるファイルを作成する言語です。
Webページに表示させたい文章などを「<」「>」で挟まれた「タグ」と呼ばれる文字列で囲んでいきます。
詳しい書き方については別記事にまとめてありますので、今回はHTMLがブラウザーで反映できるか試してみましょう。
※プロジェクトを入れるためのフォルダは作成済みとします。

プロジェクトを入れるためのフォルダの作り方はこの記事参照:point_down_tone2:
Visual Studio Codeの導入と使い方

HTMLのファイルを作ってみましょう！

新規ファイルを作成を選択
スクリーンショット 2020-03-01 11.15.46.png

ファイル名は「～.html」にします。
スクリーンショット 2020-03-01 11.17.40.png

HTMLファイルに試しに書き込んでいきます。
「！」を入れるとVisual Studio Codeでは自動でHTMLの型を作成してくれます。
image.png

ここまで作ってくれます:thumbsup_tone2:
image.png

titleタグの中身を変更したり、bodyタグの中にh1タグ(見出し)やpタグを追加してみます。
コメント 2020-03-01 115942.png

HTMLが反映されているか見てみましょう。
index.htmlファイルの上で右クリック→エクスプローラーで表示する
image.png

クロームのマークが入ったindex.htmlが表示されます。
コメント 2020-03-01 113427.png

クロームで表示されば成功です。
コメント 2020-03-01 113905.png

※うまくいかない場合はVisual Studio Codeでしっかり上書き保存しているか確認しましょう:bangbang:

これでHTMLファイルは反映されました。

CSSで見た目の調整をしよう！

次はCSSファイルを作り、反映させてみます。
CSSとは、「Cascading Style Sheets」の略で、見た目の装飾をするするための言語です。
つまり先ほど作成したHTMLの見た目を華やかに装飾できるのです。

先ほどのHTMLで作成したWebページは白い背景、黒い文字ですが、文字の色を変えたり、大きさを変えたり、レイアウトの変更ができます。

CSSをフォルダ作り、その中にCSSファイルを作成します。
コメント 2020-03-01 124308.png

ファイル名は「～.css」と付けます。
コメント 2020-03-01 124547.png

試しにh1タグ(見出し)の色を変えるコードをCSSファイルに入力します。
image.png

sample.css
h1{
    color: red;
}

しかしこれだけでは、CSSは反映されません。
HTMLファイルにCSSのファイルを読み込ませる必要があります。
コメント 2020-03-01 125523.png

index.html
<link rel="stylesheet" href="">

herfの中にCSSのファイルがある場所を書きます。

エクスプローラーから実行し、CSSが反映されていることを確認しましょう。
image.png

リセットCSSを入れよう

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

リセットCSSを使用すれば、Google ChromeやSafari、Internet Explorerなど異なるブラウザを使っても同じようにWebサイトが表示されます。

リセットCSSは基本的にコピペでOK！:point_down_tone2:
2019年版！おすすめのリセットCSSまとめ

CSSフォルダの中にreset.cssファイルを作成し、コピーしてきたものを張ります。
コメント 2020-03-01 132812.png

先ほどと同じようにHTMLファイルに反映されておきましょう。
コメント 2020-03-01 133039.png

リセットCSSを反映させ、エクスプローラーで表示するとこんな感じになります。
image.png

このようにデフォルトのCSSを打ち消すのでh1の文字の大きさなども自分で設定することが可能です。
今回はリセットCSSを入れた結果どのような表示になるか見てみたのですが、本来はプロジェクトを作成した際に最初にリセットCSSを入れておくことをオススメします。

JavaScriptで動きを付けよう!

JavaScriptは簡単いうとWEBサイトに「動き」を加えるものです。
例えば、目立たせたいボタンやメニューにアニメーションや効果を追加したりできるので、ユーザーが使いやすいサイトを作ることが可能なのです。

jsフォルダーを作り、ファイル「～.js」を作成します。
image.png

HTMLでjsファイルを読み込みます。
コメント 2020-03-01 140602.png

index.html
 <script type="text/javascript" src=""></script>

srcの中にJSファイルがある場所を書きます。

わかりやすいようにHTML内にボタンを配置し、ボタンを押したら何か動きが出るようにしてみましょう。
コメント 2020-03-01 141417.png

ボタンを押したらアラートを出してみます。
image.png

sample.js
function btnClick() {
    alert("ボタンをクリックしましたね。");
}

HTMLのボタンタグの中にもこのように追加しましょう。

index.html
 <button  onclick="btnClick()">ボタン</button>

ブラウザで確認すると、JSが反映されています。
image.png

jQueryでJavaScriptを簡単に導入しよう！

jQueryは、簡単に言うとJavaScriptを使いやすいように拡張してくれているものです。
「JavaScriptのライブラリ」なので、中身事態はJavaScriptです。
余裕がある人はjQueryを導入してみましょう。

jQueryの読み込み
コメント 2020-03-01 144244.png

sample.js
 <script type="text/javascript"src="https://code.jquery.com/jquery-3.4.1.js"></script>

jQueryの公式サイトからのコピペがおすすめです:point_down_tone2:
https://code.jquery.com/

コメント 2020-03-01 144555.png

image.png

先ほどのJavaScriptのコードをjQueryに書き換えてみましょう。

sample.js
$(function() {
    $('button').click(function() {
    alert("jQuery：ボタンがクリック")
    });
  });
index.html
 <button>ボタン</button>

jQueryでの見込みに成功！
image.png

お疲れ様でした:smiley:
HTML/CSS/JSのざっくりとした説明と、読み込み方法でした。
今後は1つ1つじっくり勉強していきましょう:point_up_tone2:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-01T06:46:13+09:00

Font Awesomeのアイコンを導入してみる

目的

サイトを作成するのに無料アイコンが必要だったので導入しました。
備忘録

流れ

1.登録:メール

下記のサイトにアクセスし、スタートをクリック
https://fontawesome.com/
image.png

下記に、自分のメールアドレスを入力し、「Send Kit Code」！
image.png

こんなメールが来るので「Click to Confirm Your Email Address + Set Things Up」！
image.png

2.登録：入力

新しいパスワードを入力
image.png

上から「ファーストネーム」、「ラストネーム」…「最初に使ったのはいつか」
って感じで入力。そのままですね
image.png

3.リンク取得

入力が終わると下記のような画面に移動します。
image.png
ここで表示されているコードをコピーしてホームページにCOPYすればOK

<script src="https://kit.fontawesome.com/{serial}.js" crossorigin="anonymous"></script>

例もダウンロードできます。

      <!doctype html>
      <html>
        <head>
          <!-- Place your kit's code here -->
          <script src="https://kit.fontawesome.com/{serial}.js" crossorigin="anonymous"></script>
        </head>

        <body>
          <i class="fas fa-thumbs-up fa-5x"></i>
        </body>
      </html>

詰まったところ

フォントの最初の文字が異なる場合がある

フォントによって最初に入ってくる文字が異なる場合がります。
これがバージョンによって異なるらしく…注意が必要です。

fa s

<i class="fas fa-map-marked-alt fa-3x"></i>

fa b

<i class="fab fa-linkedin fa-1x"></i>

こちらのサイトにあるような分類になっているようです。
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

image.png

その他

ライセンス

ここにあります。
今日（2020年3月1日）現在はGPLライセンスのようです。
https://fontawesome.com/license/free

設定変更

設定を変更し、過去のバージョンも利用できるようです。
また、SVGかWebフォントも選択可能です。

kitのホーム画面で「your kit settings.」をクリックすると下記の画面に移動します。

image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧