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

投稿日：2020-12-12T23:02:05+09:00

テキストエリアの文字列を置換して、欲しい形に処理する

背景

本業で広告運用をしながら、勉強でプログラミングをしています。
indeedで運用する際に一部の手作業が面倒だと感じていた為、
アウトプットも兼ねて自動化してみました。

問題点

indeedで広告運用すると、どの求人をアカウントに紐付けるかの設定が必要になります。
何も設定しなければ、公開してる求人全てが対象となります。
ただ、ほとんどの企業から要望があります。
その時に、依頼される求人数が多ければ、手作業が増えます。
（除外の設定のみで済むときもあります。）

デフォルトで用意されてる機能

直書きもできる

依頼求人が２０件なら、まだ手作業でも頑張れるけど、
それ以上になるとポチポチ入れるのが面倒でしかないです。

必要な形を一瞬で作成して、直書きの欄にコピペするのを作成しました。

ソースコード

https://kwateru.github.io/indeed_job_ID_replace/

HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>indeed 求人紐付け</title>
</head>
<body>
        <textarea name="kyujin" class="input" cols="30" rows="10" placeholder="12345&#13;54321&#13;98765"></textarea>
        <button type="submit" value="送信" class="btn">送信&コピー</button>
        <textarea name="seikei" class="seikei" cols="30" rows="10"></textarea>
</body>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="main.js" type="text/javascript"></script>
</html>
簡単に入力する①テキストエリアと②ボタンと③出力先のテキストエリアを作成しました。
placeholderで例を提示してみたけど、デバイス？によっては改行してくれないことに気付きました。

CSS
style.css
.kyujin, .btn, .seikei{
    display: block;
}
最低限のみです。苦手すぎて・・・。今は、使えれば良いかなってことで。
後々、修正する予定です。

js
main.js
$(function(){

    var input = $('.input');
    var button = $('.btn');
    var result = $('.seikei');

    button.on('click', function(){

        var inputVal = input.val();

        // textareaの内容を改行で分割して配列に格納
        var inputValArray = inputVal.split('\n');

        // 各行に対して処理する
        var display = "";
        for(i = 0; i < inputValArray.length; i++){
            display += '"' + inputValArray[i] + '"' + "\n";
        }

        // 改行を「 OR 」に置換する
        var str = display.replace(/\r?\n/g, ' OR ')
        result.val('refnum:(' + str + ')');

        // copyする
        result.select();
    })

});
不明なところ

末尾に余分なORが出る

1234
4321
↑テキストエリアに入力して、処理すると、
refnum:("43141" OR "41241" OR "41412" OR )

for文の理解

①display += '"' + inputValArray[i] + '"' + "\n";
②display = '"' + inputValArray[i] + '"' + "\n";
２だと１行目しか処理されないこと。

他にも色々あるが、上手く言語化出来ないので、
アウトプットを重ねていくしかない。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T21:43:19+09:00

Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

はじめに

BootstrapはTwitter社が提供するフロントエンドUIフレームワークで、モバイルファーストのレスポンシブサイトを素早く設計・構築できることを強みとしています。
非常に多機能で一貫したシステムとなっている反面、デザインや実装にもさまざまな制約が生まれるため、Webサイト制作の実案件ではなかなか取り入れにくい存在です。

そこで今回は、そんなBootstrapが備えているさまざまな機能のうち「必要なものだけ」を効率的に利用する手法と、Webサイト制作に利用できるボイラープレートを紹介します。

※本記事ではBootstrap v5.0.0-alpha1を取り扱います。

基本的なBootstrapの利用法とそのデメリット

公式サイトにも掲載されている通り、基本的な利用方法としては下記のようにHTMLソース内にCDNの記述を追加するか、コンパイル済みのファイルをダウンロードして自分のサーバにアップするかのどちらかになります。
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<link rel="stylesheet" href="/path/to/css/bootstrap.min.css">
この場合、Bootstrapが持つすべての機能を読み込むことになるため、そのWebサイト上では必要のないUIコンポーネントなども含むこととなり、ファイル容量も大きくなってしまいます。

ソースファイルをコンパイルして独自CSSを生成する

Bootstrapのソースファイル（Sass）を自前でコンパイルすることで、必要な機能だけを抽出した独自のCSSを生成し、サイト上で利用することができます。

詳細は公式サイトにも掲載されていますが、今回は簡単にカスタマイズを試せるようNode.js/gulpを利用したボイラープレートを作成したので、そちらをもとに解説をおこないます。

https://github.com/shouchida/boilerplate-with-bootstrap

インストールや開発コマンドの実行方法についてはREADME.mdを参照してください。

ディレクトリ構成（抜粋）は下記のようになっています。
開発時には原則 src/ ディレクトリ内のファイルを編集します。
dist/ はコンパイル後の出力先、static/ は画像やJSライブラリなど静的ファイルの格納先となりますが、本記事では説明を省略します。
ディレクトリ構成（抜粋）
.
├── dist/
├── src/
│   ├── assets/
│   │   ├── css/
│   │   │   ├── _partials/
│   │   │   │   ├── _base.scss
│   │   │   │   └── _variables.scss
│   │   │   ├── bootstrap.custom.scss
│   │   │   ├── main.scss
│   │   │   └── sub.scss
│   │   └── js/
│   │       └── main.js
│   └── index.html
└── static/
HTMLファイル内では下記のように2つのCSSを読み込んでいます。
/assets/css/main.css はそのサイトの共通CSSを想定しています。
src/index.html
<link rel="stylesheet" href="/assets/css/bootstrap.custom.css">
<link rel="stylesheet" href="/assets/css/main.css">
bootstrap.custom.scss

src/ ディレクトリ内の bootstrap.custom.scss にて、Bootstrap側で用意されている機能ごとのSassファイルをimportしています。
不要な機能やコンポーネントをコメントアウトしてコンパイルすることで、そのサイトに最適化されたCSSを生成できます。

例えば、

Reboot（要素ごとの標準スタイル）

グリッドシステム

ヘルパーやユーティリティ（汎用class）

のみを使用したい場合は下記のようになります。
src/assets/css/bootstrap.custom.scss
// Override default variables
@import "_partials/variables";

// Configuration
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
// @import "../../../node_modules/bootstrap/scss/type";
// @import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/grid";
// @import "../../../node_modules/bootstrap/scss/tables";
// @import "../../../node_modules/bootstrap/scss/forms";
// @import "../../../node_modules/bootstrap/scss/buttons";
// @import "../../../node_modules/bootstrap/scss/transitions";
// @import "../../../node_modules/bootstrap/scss/dropdown";
// @import "../../../node_modules/bootstrap/scss/button-group";
// @import "../../../node_modules/bootstrap/scss/nav";
// @import "../../../node_modules/bootstrap/scss/navbar";
// @import "../../../node_modules/bootstrap/scss/card";
// @import "../../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../../node_modules/bootstrap/scss/pagination";
// @import "../../../node_modules/bootstrap/scss/badge";
// @import "../../../node_modules/bootstrap/scss/alert";
// @import "../../../node_modules/bootstrap/scss/progress";
// @import "../../../node_modules/bootstrap/scss/list-group";
// @import "../../../node_modules/bootstrap/scss/close";
// @import "../../../node_modules/bootstrap/scss/toasts";
// @import "../../../node_modules/bootstrap/scss/modal";
// @import "../../../node_modules/bootstrap/scss/tooltip";
// @import "../../../node_modules/bootstrap/scss/popover";
// @import "../../../node_modules/bootstrap/scss/carousel";
// @import "../../../node_modules/bootstrap/scss/spinners";

// Helpers
@import "../../../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../../../node_modules/bootstrap/scss/utilities/api";
もし、新たに利用したい機能が出てきた場合は、該当するimport文のコメントアウトを外して再度コンパイルします。

_variables.scss

Bootstrap側で定義された各コンポーネントのスタイルを調整したい場合は、src/ ディレクトリ内の _variables.scss にてSass変数を上書きします。
src/assets/css/_partials/_variables.scss
$red: #cc1414;
$orange: #ec5f1f;

$font-family-sans-serif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
$font-size-root: 62.5%;
なお、Bootstrap側のデフォルト変数は node_modules/bootstrap/scss/_variables.scss で定義されています。

おわりに

Bootstrapは一貫したレイアウトやUIコンポーネントを提供するフレームワークのため、複雑で個性的なデザインや機能が求められるWebサイト制作の現場ではあまり利用されているイメージはありません。
一方で、Bootstrapのよく練られたグリッドシステムや幅広く用意されたユーティリティclassは魅力的であり、それらと同等のものをイチから作るのはかなりの手間がかかります。
Sassの仕組みを上手く利用することで、Bootstrapの必要な機能だけをWebサイト制作に活用することが可能になります。

参考リンク

Bootstrap5

Bootstrap（安定版）

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T20:52:35+09:00

【初学者向け】floatの解除方法

floatの解除方法についての記事です。後続の要素にclear:both;をすることは皆さんご存知かと思いますが、そもそも後続要素がない場合などがあると思います。その場合の方法を紹介します。
※一応初学者向けに書いてます。

コード紹介

初学者さんは一緒にコードをいじりながらやると、floatの理解もできていいかと思います。使用画像を以下に置いておきます。
html
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
body{
  background: beige;
}
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  position: relative;
}
h2{
  margin: 0;
  margin-bottom: 50px;
  text-align: center;
  font-family: "Nico Moji";
}
img{
  width: 200px;
}
section p:first-of-type{
  background: chocolate;
  padding: 10px 0;
  color: white;
  font-weight: bold;
}
コードと素材が用意できたら、画面を確認します。ちなみにリセットCSSなしです。

そしたら画像とテキストを横並べにします今回は題材でもあるfloatを使います。
css(追加箇所のみ表示)
img{
  width: 200px;
  float: left;
  margin-right: 50px;
}
そうするとどうでしょう？段落要素が画像の後ろへ回り込んでいるのがわかりますか？
floatをかけた画像は要素そのもが浮いていると言う状態です。
この浮いてるっていう表現が非常に初学者泣かせな表現なのですが、数学で言うところのZ軸です。理系の方この表現でわかりますよねｗ？

図を頑張って作りました。縦と横、そして奥行きの方向があることがわかりますのでしょうか？
floatをかけるとこの奥行きの方向に要素が動ようなイメージになります。
もう１つイメージを紹介します。

これは画像にアニメーションを追加して、float要素が浮いてることを表現しました。
アニメーションの途中で、段落要素の背景（茶色）が見えるのがわかりまりますか？これは段落要素が画像の後ろへ回り込んだことを示しています。

さてここからが本題です。浮いてしまったが故に、画像が要素の外にはみ出てしまってます。これを解消する方法を次の章で紹介します。

floatの解除

clearfixを使う。

まず昔からの手法で、clearfixというCSSの合わせ技みたいなのを使います。
擬似要素と言うのを使います。今回の場合clear:both;をかければ、はみ出た部分を元に戻すことができそうですが、肝心のclear:both;をかける要素がありません。
なので擬似的に要素を作成します。

やり方としては、sectionにクラスを追加し、追加したクラスにclearfixを書いていきます。
html
<section class="cf">
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
.cf:after{
  content: "";
  display: block;
  clear: both; 
}
図解化するとこんな感じになります。

これで枠内に収まりました。

overflow:hidden;を使う。

多少制限はありますが、これが一番楽なやり方です。
※先程のclearfixは消して下さい。
html
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
</section>
css
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  overflow: hidden;
}
clearfixが後続の要に対して使うのに対し、overflowは親要素に対して使用します。
overflow:hidden;は、はみ出た要素を隠すのに使いますが、実はもう１つ特性があります。

こちらの説明で、Z軸つまり奥行きがあると言うことを説明しましたが、overflow:hidden;には付けた要素の奥行きを作成することができます。

sectionが平面から立体的な箱になったというとわかりやすいでしょうか？これを図解化しました。

このようにoverflow:hidden;をかけた要素が変化していったことがわかるかと思います。

最後に

floatの解除方法の応用編みたいになりましたが、どちらも非常によく使われている手法なので覚えておくといいでしょう。

今回はおまけとして、アニメーションを加えた最終的なコードを載せておきますので、是非参考にして下さい。お疲れ様でした。
html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>float-animation</title>
  <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
  
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section>
  <h2>ハトくん、おそらをとぶのまき</h2>
  <img src="./img/chara1.jpeg" alt="ハトくんの画像">
  <p>floatをしていないテキストは地面びっしりとくっついているイメージです。 </p>
  <p class="comment">ふわ<br>ふわ</p>
  <p class="comment">びし！</p>
</section>
</body>
</html>
css
@charset "UTF-8";
body{
  background: beige;
}
section{
  background: aquamarine;
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  position: relative;
  overflow: hidden;
}
/* .cf:after{
  content: "";
  display: block;
  clear: both; 
} */
h2{
  margin: 0;
  margin-bottom: 50px;
  text-align: center;
  font-family: "Nico Moji";
}
@keyframes fly{
  0%{transform: scale(0.9);}
  100%{transform: scale(1.1);}
}
img{
  width: 200px;
  float: left;
  margin-right: 50px;
  animation: fly 1s infinite alternate;
}
@keyframes sound-effect{
  0%{
    top: 150px;
    left: 250px;
    transform: rotate(30deg);
    opacity: 0;
  }
  50%{
    top: 150px;
    left: 240px;
    transform: rotate(30deg);
    opacity: 1;
  }
  51%{
    top: 150px;
    left: 250px;
    transform: rotate(30deg);
    opacity: 0;
  }
  52%{
    top: 100px;
    left: 0px;
    transform: rotate(-30deg);
    opacity: 0;
  }
  100%{
    top: 100px;
    left: 10px;
    transform: rotate(-30deg);
    opacity: 1;
  }
}
section p.comment:nth-of-type(2){
  position: absolute;
  animation: sound-effect 3s infinite;
  font-family: "Nico Moji";
  font-size: 30px;
  color: gray;
  text-shadow: 1px 1px 5px white, -1px -1px 5px white, 0 0 10px white;
}
@keyframes shaking{
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  1% {transform: translate(2px, 2px) rotateZ(1deg)}
  2% {transform: translate(0px, 2px) rotateZ(0deg)}
  3% {transform: translate(2px, 0px) rotateZ(-1deg)}
  4% {transform: translate(0px, 0px) rotateZ(0deg)}
  5% {transform: translate(2px, 2px) rotateZ(1deg)}
  6% {transform: translate(0px, 2px) rotateZ(0deg)}
  7% {transform: translate(2px, 0px) rotateZ(-1deg)}
  8% {transform: translate(0px, 0px) rotateZ(0deg)}
  9% {transform: translate(2px, 2px) rotateZ(1deg)}
  10% {transform: translate(0px, 2px) rotateZ(0deg)}
  11% {transform: translate(2px, 0px) rotateZ(-1deg)}
  12% {transform: translate(0px, 0px) rotateZ(0deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
section p:first-of-type{
  background: chocolate;
  padding: 10px 0;
  color: white;
  font-weight: bold;
}
section p.comment:last-of-type{
  position: absolute;
  top: 65px;
  right: 20px;
  font-size: 40px;
  color: red;
  text-shadow: 1px 1px 5px yellow, -1px -1px 5px yellow, 0 0 10px yellow;
  font-family: "Nico Moji";
  animation: shaking 1s infinite;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T18:56:30+09:00

AWSを利用してWebページを作ってみよう

目次

1.はじめに
 2.全体スケジュール
 3.AWS全体学習
 4.構成図
 5.インフラチーム学習内容-Part1
6.インフラチーム学習内容-Part2
7.フロントチーム学習内容-Part1
8.フロントチーム学習内容-Part2
9.完成したサイト
 10.まとめ

1.はじめに

株式会社エニプラでは、社内のチームごとにテーマを決め、
毎月行われるチーム会でテーマに沿った活動を行っています。
チーム会で行った内容は、年末に「エニプラアワード」という場で
全社員や来期の新卒に向けて発表を行っています。

今年度松田チームでは「AWS学習&Webページ作成」をテーマに活動してきました。
テーマを検討、決定した背景として以下の4点あります。

1．AWSに関する資格取得を目指す人が増えてきたこと
2．AWSというサービス自体は聞いたことがあるが、具体的なイメージが湧かない
3．Web・HTMLについて学習してみたい
4．取り組んだ成果を発表する上で実際に見られるものを作りたい

上記の4点をまとめた結果、「AWSを利用してWebページを作ってみよう」ということになりました。

2.全体スケジュール

約半年のチーム会活動全体を通して
図のようなスケジュールでエニプラアワードに向けて取り組みました。

まず、5-7月の期間でチーム全体でAWSそのものについての座学や、
Webページ作成に必要なインフラ・フロントの基礎知識を学習しました。
8月以降は自分の興味がある分野を選び、インフラチームとフロントチームに分かれ、
Webサーバ構築やWebページのコーディングに向けて、座学と実作業をそれぞれチームにて実施しました。

3.AWS全体学習

次に、実際にどのような内容の座学や実作業を行っていたのかについて紹介します。
まず、各チームに分かれる前にAWSについての学習を行いました。
下記にある画像は、『AWSome Day』と呼ばれる公式オンラインセミナーです。
セミナーの内容をベースに、AWSのビジネスモデル(従量課金制等)であったり、
システムを構築するうえでのオンプレとパブリッククラウドの考え方の違いや、
今回触ることになるAWS上の主要なリソースについて学習しました。

実際に皆が使えるようにAWS上にユーザーを作成していたので、
ログインしてAWSのWebコンソールを見てみるといったことも併せて行いました。

AWSome Dayとは

『AWSome Day』は定期的に実施されている公式オンラインセミナーです。
内容としては、AWS入門者向けにAWSの概要や基礎知識について解説するもので、
社内で実際に参加した人からは非常に解りやすい内容であったという感想が挙がっています。
これからクラウドを学ぶ人には、オススメです。

セミナー開催情報：AWSome Day

4.構成図

実際に作成したAWSの構成図がこちらになります。
要件として、無料枠の範囲内、つまり、お金がかからない範囲でやること、
Webサーバは1台で、Webページに掲載する画像はS3と呼ばれるAWSのストレージサービスに
配置してサーバから参照させるといった構成です。

5.インフラチーム学習内容-Part1

ここからはインフラチーム・フロントチームが、それぞれ行った学習・実作業について
説明させていただきます。
まず初めに、インフラチームは『Webサーバを構築する』というのが目標です。
実際に、構築業務経験があるメンバーが少ないため、
なるべく実際の構築業務に近い流れで行うことをコンセプトに、下記の要件を提示しました。

要件の確認

ミドルウェアとしてApacheを利用する

通信に使用するポートは80

ドキュメントルートは/var/www/html/＜作成したフォルダ名＞にする

インスタンス起動時にApacheが自動実行するようにする

これらを踏まえて、実際にWebサーバとして動作させるためには、
どういった作業が必要になるのかを洗い出しました。
メンバー間で協力しながら『Apacheとは何か』というところから、
インストール方法や設定方法、コンフィグの変更箇所などを洗い出しました。

Tips：Apacheとは

Webサーバ用ミドルウェアの一つ。
オープンソースソフトウェアとして公開され、無償で利用できる。

6.インフラチーム学習内容-Part2

要件の確認と作業の整理をしたのち、構築時に必要になるコマンドを調査し簡単な手順書を用意しました。
今回、OSはAmazon Linux2と呼ばれるAWS EC2インスタンス上で利用できるLinuxベースのOSです。
構築の流れとしては、デフォルトパッケージのアップデートから始まり、
Apacheのインストールと設定変更、それを反映するためのサービス再起動です。
手順として整理したコマンドは、下記記述の通りです。

コマンド整理
 1. パッケージアップデート
# yum update
 2．Apacheのインストール
# yum install httpd
 3．ポートが80となっていることを確認する
# cat /etc/httpd/conf/httpd.conf | grep Listen
 4．ドキュメントルートを"/var/www/html/＜作成したフォルダ名＞"配下に作成
# vi /etc/httpd/conf/httpd.conf
 5．サービス再起動
# systemctl restart httpd
# systemctl status httpd
 6．Apacheが自動起動するよう設定
# systemctl enable httpd.service
EC2インスタンスに接続して実際に構築

WebブラウザからグローバルIPにアクセスし、サンプルページが表示されることを確認

最終的にWebブラウザからAWS上のサーバにアクセスし、
デフォルトのサンプルページが表示されることを確認する。

以上がインフラチームで行った内容となります。

7.フロントチーム学習内容-Part1

続いて、フロントチームの学習内容を紹介いたします。
Webページを作成するために、まずWebページが何の言語を使用して
作成されているかを調査しました。
調査の結果、主にHTML,CSS,JavaScriptが使用されていることが分かりました。

HTMLとは

HTMLはウェブページを作成するために作られた言語です。

HTMLの学習内容としては、主に各HTMLタグの役割について学習しました。
HTMLタグはブラウザがWebページの構造を理解するために使用されています。
各ブラウザ毎に、表示に差が出るSelectbox等のHTMLタグを使用して
HTMLに従ってブラウザがWebページを理解し、表示していることを確認しました。

CSSとは

CSSはウェブページのスタイルを指定するための言語です。
HTMLと併せて文字や枠の色を変更したり、図形を作成したりと、装飾をするために使用されています。
CSSの学習内容としては、各プロパティの意味や使い方を学習しました。

JavaScriptとは

JavaScriptはプログラミング言語の一つで、Webページに動的な表現を付けるために使用されています。
今回は時間の都合上使用することができなかったのですが、次の機会があれば使いたい要素の一つです。
調査後、サンプルページを参考にレイアウトについて学習を進めました。
これはヘッダーやメインコンテンツ等、何処にどの要素があるかを理解しておくことが、
HTMLを書いていく上で非常に重要なためです。

8.フロントチーム学習内容-Part2

レイアウトの確認が終わった後、まずはVisualStudioCodeの使い方を学びました。
フロントチームでは、VScodeを触れたことがあるメンバーがあまりいなかったためです。
VScodeは予測変換や拡張機能が優秀なため、便利な機能をできるだけ使用する方向で進めました。

その後、実際にコーディングを行いました。
コーディング中は記載したHTML要素の配置やCSSの適用状況など、適宜ブラウザで確認しつつ行いました。
想定外の画面になっている箇所は、ブラウザのデベロッパーツール等で確認と修正を行い、
Webサーバに乗せるソースを完成させました。

以上がフロントチームで行った内容となります。

9.完成したサイト

インフラチームが作成したWebサーバに、フロントチームが作成したソースを配置し、
実際に完成したサイトがこちらになります。

※上記画像は、スマートフォンの操作画面となります。

実際のチーム会での活動風景や、実施内容が掲載されています。
スマートフォンで表示させた際にも自動的にリサイズされるような作りになっています。

10.まとめ

2020年エニプラアワードテーマは『AWS学習&Webページ作成』でした。
AWSオンラインカンファレンスの内容をベースにチーム全体でAWS基礎を学習しました。
インフラチームでWebサーバを、フロントチームでWebページのソースを作成しました。

半年間の活動を通して

AWSへの理解が深まり、個人でも触ってみようと思った。

HTMLとCSSでWebページが表示されていることが理解できた。
というご意見もありました。
自分もAWSのセミナーは興味あるものなので、機会がある際に参加してみたいです。

以上で、ご紹介を終わります。ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T18:50:14+09:00

jQueryとjQuery Mobileでcloneしてみた

はじめに

この記事の筆者はひよっこWebエンジニア（２年目）で、jQueryとJavaScriptはほぼ未経験です。
温かい目で見ていただけると幸いですm(_ _)m
コード例はPHPで動的に書いたものを説明しやすくするためにHTMLに書き直し、なおかつ読みやすいように調整したものですので、間違っているかもしれません。

背景

自社サービスにおいて、cloneを使う機会があったので、
また使う事になったときのためにまとめておくことにしました。

使った技術

PHP
JS
- jQuery
- jQuery Mobile
CSS
- jQuery
- jQuery Mobile

jQuery編

コード例

<table>
    <tr id="like_fruits_1">
        <th>
            <label>好きなフルーツ</label>
            <input type="hidden" id="like_fruits_count" value="1">
        </th>
        <td>
            <select name="fruits[1]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
            <button type="button" id="add_like_fruits_button" class="button button-pill button-primary" style="width: 100px;"><i class="fa fa-plus-square"></i> 追加</button>
            <button type="button" id="delete_like_fruits_button" class="button button-pill button-caution" style="width: 100px;"><i class="fa fa-trash"></i> 削除</button>
        </td>
    </tr>

    <tr id="clone_like_fruits_template" style="display: none">
        <th></th>
        <td>
            <select name="fruits[xxx]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
        </td>
    </tr>
</table>

<script type=text/javascript>
    $(document).ready(function() {
        // 削除ボタンを無効化する
        $('#delete_like_fruits_button').prop('disabled', true);
    });

    // 追加ボタンをクリックしたときの処理
    $(document).on('click', '#add_like_fruits_button', function() {
        // 追加ボタンが押下されたら削除ボタンを有効化する
        $('#delete_like_fruits_button').prop('disabled', false);

        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 追加したあとの要素数を保存
        $('#like_fruits_count').val(creation_times + 1);

        // clone_like_fruits_templateのクローンを作成
        let copy = $('#clone_like_fruits_template').clone(true);

        // xxxを置換
        copy.html(function(i, oldHTML) {
            return oldHTML.replace(/xxx/g, creation_times+1)
        });

        // styleを外す。
        copy.prop('style', false);

        // 属性を付加する
        copy.attr('id', 'like_fruits_'+(creation_times+1));

        // 現要素の一番最後に格納
        copy.insertAfter('#like_fruits_'+creation_times);
    });

    // 削除ボタンをクリックしたときの処理
    $(document).on('click', '#delete_like_fruits_button', function() {
        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 削除した後の個数を保存する
        $('#like_fruits_count').val(creation_times - 1);

        // 項目の一番最後の行を削除する
        $('#like_fruits_'+creation_times).remove();

        // 一番最初の要素は消せないように削除ボタンを無効化する
        if (creation_times <= 2) {
            $('#delete_like_fruits_button').prop('disabled', true);
        }
    });
</script>

で定義して、「追加」を押すと、

<table>
    <tr id="like_fruits_1">
        <th>
            <label>好きなフルーツ</label>
            <input type="hidden" id="like_fruits_count" value="2">
        </th>
        <td>
            <select name="fruits[1]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
            <button type="button" id="add_like_fruits_button" class="button button-pill button-primary" style="width: 100px;"><i class="fa fa-plus-square"></i> 追加</button>
            <button type="button" id="delete_like_fruits_button" class="button button-pill button-caution" style="width: 100px;"><i class="fa fa-trash"></i> 削除</button>
        </td>
    </tr>

    <tr id="like_fruits_2">
        <th></th>
        <td>
            <select name="fruits[2]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
        </td>
    </tr>

    <tr id="clone_like_fruits_template" style="display: none">
        <th></th>
        <td>
            <select name="fruits[xxx]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
        </td>
    </tr>
</table>

<script type=text/javascript>
    $(document).ready(function() {
        // 削除ボタンを無効化する
        $('#delete_like_fruits_button').prop('disabled', true);
    });

    // 追加ボタンをクリックしたときの処理
    $(document).on('click', '#add_like_fruits_button', function() {
        // 追加ボタンが押下されたら削除ボタンを有効化する
        $('#delete_like_fruits_button').prop('disabled', false);

        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 追加したあとの要素数を保存
        $('#like_fruits_count').val(creation_times + 1);

        // clone_like_fruits_templateのクローンを作成
        let copy = $('#clone_like_fruits_template').clone(true);

        // xxxを置換
        copy.html(function(i, oldHTML) {
            return oldHTML.replace(/xxx/g, creation_times+1)
        });

        // styleを外す。
        copy.prop('style', false);

        // 属性を付加する
        copy.attr('id', 'like_fruits_'+(creation_times+1));

        // 一番最後に格納
        copy.insertAfter('#like_fruits_'+creation_times);
    });

    // 削除ボタンをクリックしたときの処理
    $(document).on('click', '#delete_like_fruits_button', function() {
        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 削除した後の個数を保存する
        $('#like_fruits_count').val(creation_times - 1);

        // 一番最後の行を削除する
        $('#like_fruits_'+creation_times).remove();

        // 一番最初は消せないように削除ボタンを無効化する
        if (creation_times <= 2) {
            $('#delete_like_fruits_button').prop('disabled', true);
        }
    });
</script>

みたいな感じに展開されるように作った。
jQueryは初心者でも結構あっさり実装できた。

jQuery Mobile編

コード例

<table>
    <tr id="like_fruits_1">
        <th>
            <label>好きなフルーツ</label>
            <input type="hidden" id="like_fruits_count" value="1">
        </th>
        <td>
            <select name="fruits[1]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
            <button type="button" id="add_like_fruits_button" class="button button-pill button-primary" style="width: 100px;"><i class="fa fa-plus-square"></i> 追加</button>
            <button type="button" id="delete_like_fruits_button" class="button button-pill button-caution" style="width: 100px;"><i class="fa fa-trash"></i> 削除</button>
        </td>
    </tr>

    <tr id="clone_like_fruits_template" style="display: none">
        <th></th>
        <td>
            <my-select name="fruits[xxx]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </my-select>
        </td>
    </tr>
</table>

<script type=text/javascript>
    $(document).ready(function() {
        // 削除ボタンを無効化する
        $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link disabled');
    });

    // 追加ボタンをクリックしたときの処理
    $(document).on('click', '#add_like_fruits_button', function() {
        // 追加ボタンが押下されたら削除ボタンを有効化する
        $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link');

        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 追加したあとの要素数を保存
        $('#like_fruits_count').val(creation_times + 1);

        // clone_like_fruits_templateのクローンを作成
        let copy = $('#clone_like_fruits_template').clone(true);

        // xxxを置換。my-selectを置換
        copy.html(function(i, oldHTML) {
            return oldHTML.replace(/xxx/g, creation_times+1).replace(/my-select/g, 'select')
        });

        // styleを外す。
        copy.prop('style', false);

        // 属性を付加する
        copy.attr('id', 'like_fruits_'+(creation_times+1));

        // 一番最後に格納
        copy.insertAfter('#like_fruits_'+creation_times).trigger('create');
    });

    // 削除ボタンをクリックしたときの処理
    $(document).on('click', '#delete_like_fruits_button', function() {
        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 一番最初の要素しか無いときは何も処理をさせない
        if (creation_times === 1) {
            return;
        }

        // 削除した後の個数を保存する
        $('#like_fruits_count').val(creation_times - 1);

        // 一番最後の行を削除する
        $('#like_fruits_'+creation_times).remove();

        // 一番最初は消せないように削除ボタンを無効化する
        if (creation_times <= 2) {
            $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link disabled');
            return;
        }
    });
</script>

で定義して、「追加」を押すと、

<table>
    <tr id="like_fruits_1">
        <th>
            <label>好きなフルーツ</label>
            <input type="hidden" id="like_fruits_count" value="2">
        </th>
        <td>
            <select name="fruits[1]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
            <button type="button" id="add_like_fruits_button" class="button button-pill button-primary" style="width: 100px;"><i class="fa fa-plus-square"></i> 追加</button>
            <button type="button" id="delete_like_fruits_button" class="button button-pill button-caution" style="width: 100px;"><i class="fa fa-trash"></i> 削除</button>
        </td>
    </tr>

    <tr id="like_fruits_2">
        <th></th>
        <td>
            <select name="fruits[2]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </select>
        </td>
    </tr>

    <tr id="clone_like_fruits_template" style="display: none">
        <th></th>
        <td>
            <my-select name="fruits[xxx]" class="select">
                <option value="">--</option>
                <option value="apple">りんご</option>
                <option value="orange">オレンジ</option>
                <option value="water_melon">スイカ</option>
                <option value="melon">メロン</option>
            </my-select>
        </td>
    </tr>
</table>

<script type=text/javascript>
    $(document).ready(function() {
        // 削除ボタンを無効化する
        $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link disabled');
    });

    // 追加ボタンをクリックしたときの処理
    $(document).on('click', '#add_like_fruits_button', function() {
        // 追加ボタンが押下されたら削除ボタンを有効化する
        $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link');

        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 追加したあとの要素数を保存
        $('#like_fruits_count').val(creation_times + 1);

        // clone_like_fruits_templateのクローンを作成
        let copy = $('#clone_like_fruits_template').clone(true);

        // xxxを置換。my-selectを置換
        copy.html(function(i, oldHTML) {
            return oldHTML.replace(/xxx/g, creation_times+1).replace(/my-select/g, 'select')
        });

        // styleを外す。
        copy.prop('style', false);

        // 属性を付加する
        copy.attr('id', 'like_fruits_'+(creation_times+1));

        // 一番最後に格納
        copy.insertAfter('#like_fruits_'+creation_times).trigger('create');
    });

    // 削除ボタンをクリックしたときの処理
    $(document).on('click', '#delete_like_fruits_button', function() {
        // 今ある要素数を取得
        let creation_times = +$('#like_fruits_count').val();

        // 一番最初の要素しか無いときは何も処理をさせない
        if (creation_times === 1) {
            return;
        }

        // 削除した後の個数を保存する
        $('#like_fruits_count').val(creation_times - 1);

        // 一番最後の行を削除する
        $('#like_fruits_'+creation_times).remove();

        // 一番最初は消せないように削除ボタンを無効化する
        if (creation_times <= 2) {
            $('#delete_like_fruits_button').attr('class', 'button button-pill button-caution button-large ui-btn-inline ui-shadow ui-link disabled');
            return;
        }
    });
</script>

これでほぼjQueryと同じ感じに展開された。

名前は似ているが、実は結構違った「jQuery」と「jQuery Mobile」

「jQuery Mobile」は「Mobile」とつくだけだから、「jQuery」で書いたコードがそのまま動くでしょ。なんて軽く思っていたら違う部分が結構あった。
jQuery Mobileでは、cloneで追加されたセレクトボックスを選択しても、画面上に反映されなかった。
これの解消に２日くらい時間を要した。

理由は、DOMとしてレンダリングされたとき、すでに「jQuery Mobile」によってselectがui-selectに変換されていたからだった。
今回は対処法としてDOMの段階ではmy-selectみたいな「jQuery Mobile」に勝手に変換されないようにして解決させた。

さすがに「Java」と「JavaScript」のように全く違う言語とまではいかないけど、それでも結構違った。

最後に、今回作成した成果物をご紹介

jQuery

追加ボタンを押す前

追加ボタンを押した後

jQuery Mobile

追加ボタンを押す前

追加ボタンを押した後

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T16:16:43+09:00

消費税を納税しようと、毎回e-Taxにアクセスして、ログインがとかリーダーがとかはまってしまう自分が、次回からe-Taxに行ってもすぐに気づくように語りかける Stylus用 css レシピ。

消費税を納税しようと、毎回e-Taxにアクセスして、ログインがとかリーダーがとかはまってしまう自分が、次回からe-Taxに行ってもすぐに気づくように語りかける Stylus用 css レシピ。

Stylusをインストールしたブラウザで
https://www.e-tax.nta.go.jp/
にアクセスして「次のスタイルを書く: wwwe-taxntago.jpこのURL」をクリックして、以下のcssをペースト。
.l_contents_item,.l_main{

    display:none;
}
header:after {
content: "あなたの心に語りかけています…納税したいだけなら…ここではありません…国税クレジットカードお支払サイトに行くのです。https://kokuzei.noufu.jp/";
    font-size:36px;
    margin:36px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T15:55:50+09:00

WEBにおける言語表示・フォントセレクトの例示

Life is Tech! メンバーアドカレ　12/13です！！！今回３記事目だよ！みんな書いて！

みなさんは日本語以外でサービスを提供することはあるでしょうか?
世界にはいろいろな言語があり，エスノローグ（SILという団体の作っているオンライン及び書籍の言語目録）では6,800の言語があるとされています．
例えば日本語では日本語/日本手話/アイヌ語のほか通常では琉球方言（琉球語）に分類される{喜界語/北奄美大島語/南奄美大島語/徳之島語/沖永良部語/与論語/国頭語/中央沖縄語/宮古語/八重山語/与那国語}が言語として挙げられています．
私の場合筆記したり電子で表記したりした経験があるのは英語ほかラテン言語（英，仏，独やマレー語など），中国語（簡・繁・香港），ヒンディー語，ギリシャ語，ロシア語，クメール語（カンボジア），タイ語，アラビア語などメジャー言語からマイナー言語までいろいろ使ったことがあります．
この記事では世界中の様々な言語を表示するうえでどんなようにフォントを設定すればよいのかをお伝えします．また同時に，WEBフォントの表示について海外を気にするとどうしないといけないのかとかも書いておきます．

まず第一に

たいていの言語の表示には，sans-serifって書いておけば大丈夫です．要するにゴシック体やサンセリフ，それに近いフォントで表示しろっていう指示です．
日本語の場合はMSゴシック，メイリオ，ヒラギノ角ゴシック，Osaka，Noto Sans JPおよびその他各端末・ブラウザの標準ゴシック体が表示されます．私のMacの場合はヒラギノ角ゴシックです．また，英語やギリシャ語ではSanFrancisco（Mac）, Roboto（Android）, Segoe UI, Arial（Windows）, Inter, Samsung Sans（一部の端末）あたりが適用されます．中国語でも苹方, ヒラギノ角ゴシック簡体中文（Mac）, YaHeiやHeiti（Windows）, Noto Sans SC/TC/HK（Android）がそれぞれの文字に適した形で，韓国語でもApple Gothicあたりが，表示されます．これについては書き続けるだけで一年かかると思うのでOSとかの仕様書をご確認ください．

CSSおよびWEBフォントをつかった言語表示について，気にしておかないといけないこと：国家規制

WEBフォントをつかうとなって最初に思い浮かぶのはどこでしょう?おそらくこの記事を読む人で答えれる人の答えは90%以上Google Fontsだと思います．Adobe Fontsって言ったやつは深く反省するか中国国内からのご利用なのでしょう．
閑話休題，中国では国家規制の都合上Googleの各種サービスが使えません．これはGoogleの検索結果とかに検閲をかけられないからなのですが，googleと名の付くものほぼすべてが使えません．使えるのはAndroid OS（ストアなし）くらいです．そのため，普通にGoogle Fontsを使うだけではいけません．
これについては，中国本土向けにサービスを展開するときはcssの@font-faceを使って自分のサーバーから配信してください．
また，表示する文字について国家規制を設けている場合があります．中国の場合はGB（国家基準）というのがあって，通過した文字しか商品パッケージなどに使えないことになっています．詳細は台湾ダイナコムウェア社（センター試験とかのフォント作ってる会社です）のサイトに詳しく乗ってるので見てください．国によってはこういう規制があることもあるので，そのあたりを上手に調整して使用せねばなりません．

問題を回避する一番の方法は，上に書いておいた「sans-serif」を使う，「@font-face」を使う，また「他社（Adobe Fonts, Typesquare, Fontplus, DFOなど）」を使うの3パターンがあります．要するにGoogleの規制を回避して国家基準に適した文字を持ってるフォント会社と契約しろってことです．

font-familyの最適解

では本題，@font-familyをいい感じに設定する方法をご案内します．
まず，参考になるのはAndroidデベロッパーかと思います．WhatfontというツールでCSSから使用されているフォントを取り出したところ次のようになりました．
{
  font-face: Roboto, "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Naskh Arabic", "Noto Sans Thai", "Noto Sans Hebrew", "Noto Sans Bengali", sans-serif;
}
GoogleとAdobeが共同開発したNoto Sansシリーズを多言語では適用してます．Noto Sansというのはこの世のほぼすべての言語を表示できるようにしようという試みです．ここにあるすべてのフォントはここに載っています．というかここのサイトはほぼすべての言語のフォントが1つは載っています．

ローマ字，ギリシャ文字にRobotoおよびNoto Sans（これにはRobotoにない文字を補う機能がある），CJ（日中　これに韓国語を合わせてCJKといいます．）にNoto Sans JPを，韓国語にNoto Sans KRを，アラビア語にNoto Naskh Arabic（ナスフ体はゴシック体みたいなモダンな書体）を，タイ語にNoto Sans Thaiを，ヘブライ語にNoto Sans Hebrew，ベンガル語（インド方面）にNoto Sans Bengaliを適用しています．

Google社のドキュメントとしては珍しく完全WEBフォント化されているのですが，これがおそらく最適解かと思います．たしかOSS版Androidもほぼ同じ構成（ただし中国語は言語設定によって切り替えがあります）でした．また，クメール語などマイナー言語はNoto Sansシリーズではでているものの，Androidデベロッパーが作られるほどメジャー言語ではないので妥当なところだと思います．

ではマイナー言語の場合はどうしたらよいのでしょうか?

私の思う最適解はやはりsans-serifだと思います．正直そこまでフォントを気にすることはないからです．最近のWindowsは全言語対応したおかげでほぼすべての言語が表示できますし，sans-serifだと象形文字であってもUnicodeでは定義されているのでArial Unicode MSというフォント（PCのYouTubeの字幕フォントです）で表示されるでしょう．

でも独自のフォントを（ry）

じゃあかしい！自分で探せや！が本音なのですが，まあ一応教えておこうと思います．
まず，上記した https://www.google.com/get/noto/ には基本的に全言語のフォントが載っています．これを使うのがいいでしょう．
また，それ以外で気になる言語がある場合は僕の団体に聞く（https://twitter.com/nilnil）とか，フォント会社の見本帳を見るとかしてください．

そして，お金があるならSST Fontというのがあります．SonyとMonotypeが作ったフォントです．多分Noto Sansにつぐ75言語近くが用意されています．それも使ってみるといいでしょう．

以上です！

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T15:11:42+09:00

リモートワーク中、家族に画面を覗かれて変な空気になったので、Chrome拡張機能を開発している

DMMアドベントカレンダー18日目の記事です。
昨日は、@matsuda-hiroki さんの「なにもしてないのにEC2インスタンスが壊れた」でした。

奥さん「何見てるの？」

こんにちは。DMM.comの@tmitsuoka0423です。

今年4月に電子書籍事業部にジョインし、ずっと自宅でリモートワークをしています。
電子書籍事業部では、一般向け電子書籍サービスであるDMM電子書籍と、成人向け電子書籍サービスFANZA電子書籍の両方の開発を行っています。

そんなある日、悲劇は突然起こりました。

アダルトコミック画面の機能を開発していた夕方のこと。
奥さんが仕事から帰ってくるなり、私のディスプレイを見て言いました。「何見てるの？」

リモートワーク中はディスプレイの覗き込みに注意

私は真剣に仕事をしていただけですが、家族から見るとそうは見えないみたいです。
（仕事内容は事前に伝えているのに）
お子さんのいる方・二世帯住宅にお住まいの方はもっと注意が必要になるのではないでしょうか。

Chrome拡張機能「tile」を開発中

そんなリモートワーカーのために、Chrome拡張機能を開発しています。

HTML上の画像にぼかしを入れてくれます。

完成次第、公開します！

使い方イメージ

1．インストール後、Chrome右上のパズルマークをクリック、tileをクリックします。

2．ぼかすを選択します。

3．ページに表示されている画像にぼかしが入ります。

内部処理の概要

内部で行っていることはとてもシンプルです。
全てのimgタグを取得し、CSS関数のblurを利用してぼかしをかけています。
const imgList = document.getElementsByTagName("img");
for (let i = 0; i < imgList.length; i++) {
  imgList[i].style.cssText = "filter: blur(8px);";
}
上記のコードを利用して、拡張機能をインストールせずに、Chrome DevToolsのConsoleタブから実行することも可能です。

まとめ

開発中のChrome拡張機能「tile」の紹介しました。
リモートワークをより働きやすくするためのアプリを今後も開発していきます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-12T10:50:19+09:00

WordPressテーマ開発で最低限必要なファイルは２つ！

はじめに

下記の方向けで書きます。

取りあえずテーマを表示させたい

WordPressテーマ開発したい

php初心者

WordPressテーマ開発で最低限必要なファイル

では、
WordPressでテーマをアップロードしたとき最低限必要なファイル（構成）についてです。

今回、紹介するのは
WordPressの設定でテーマとして認識されるための構成です。

次のファイルを同じ階層にまとめて、アップロードすれば
とりあえずテーマをWordPressが認識して動くようになります。

index.php

トップページ用テンプレートになります。

中身は何でも可能！！
ひとまず、「Hello World」的な文言でも書いておきます。

HTMLのベタ書きでもOKです。
index.php
<!DOCTYPE html>
<html lang="ja">
<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">
    <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">
    <title>サイト名</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
style.css

WordPressテーマ作成で
陥りがちなのが、下記のstyle.cssを用意していないことです。
これ忘れると、テーマはうごかないです。
style.css
/*
Theme Name: サイトorブログ名等々
*/
他に、記載しとくと良いものも合わせると
下のようになります。
style.css
/*
Theme Name: サイトorブログ名等々
Description: テーマの説明
Version: 1.0.0
Author:  テーマの作成者
*/
まとめ

以上です。
あとは上の２つのファイルを１つのファイルにまとめてWordPressにアップロードして確認してみて下さい。

　 Tweet
Qiitaで続きを読む

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

テキストエリアの文字列を置換して、欲しい形に処理する

背景

問題点

デフォルトで用意されてる機能

直書きもできる

ソースコード

HTML

CSS

js

不明なところ

末尾に余分なORが出る

for文の理解

Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

はじめに

基本的なBootstrapの利用法とそのデメリット

ソースファイルをコンパイルして独自CSSを生成する

bootstrap.custom.scss

_variables.scss

おわりに

参考リンク

【初学者向け】floatの解除方法

コード紹介

floatの解除

clearfixを使う。

overflow:hidden;を使う。

最後に

AWSを利用してWebページを作ってみよう

目次

1.はじめに

2.全体スケジュール

3.AWS全体学習

AWSome Dayとは

4.構成図

5.インフラチーム学習内容-Part1

要件の確認

Tips：Apacheとは

6.インフラチーム学習内容-Part2

コマンド整理

EC2インスタンスに接続して実際に構築

7.フロントチーム学習内容-Part1

HTMLとは

CSSとは

JavaScriptとは

8.フロントチーム学習内容-Part2

9.完成したサイト

10.まとめ

半年間の活動を通して

jQueryとjQuery Mobileでcloneしてみた

はじめに

背景

使った技術

jQuery編

コード例

jQuery Mobile編

コード例

名前は似ているが、実は結構違った「jQuery」と「jQuery Mobile」

最後に、今回作成した成果物をご紹介

jQuery

jQuery Mobile

消費税を納税しようと、毎回e-Taxにアクセスして、ログインがとかリーダーがとかはまってしまう自分が、次回からe-Taxに行ってもすぐに気づくように語りかける Stylus用 css レシピ。

消費税を納税しようと、毎回e-Taxにアクセスして、ログインがとかリーダーがとかはまってしまう自分が、次回からe-Taxに行ってもすぐに気づくように語りかける Stylus用 css レシピ。

WEBにおける言語表示・フォントセレクトの例示

まず第一に

CSSおよびWEBフォントをつかった言語表示について，気にしておかないといけないこと：国家規制

font-familyの最適解

でも独自のフォントを（ry）

リモートワーク中、家族に画面を覗かれて変な空気になったので、Chrome拡張機能を開発している

奥さん「何見てるの？」

リモートワーク中はディスプレイの覗き込みに注意

Chrome拡張機能「tile」を開発中

使い方イメージ

内部処理の概要

まとめ

WordPressテーマ開発で最低限必要なファイル は２つ！

はじめに

WordPressテーマ開発で最低限必要なファイル

index.php

style.css

まとめ

`font-family`の最適解

WordPressテーマ開発で最低限必要なファイルは２つ！