Clik here to view.
社内の忘年会の余興に使う『謎解き Web アプリ～天使 vs 悪魔～』を開発した（アプリ紹介・クライアント編）
概要この記事は NSSOL Advent Calendar 2019の 13 日目の記事です。会社のアドベントカレンダーに参加しているので、看板を背負っていることになりますが、いつも通り自由に書こうと思います。何をしたの〜？NSSOL のシステム研究開発センター配属の新入社員 3 人で、 Web アプリを開発しました。仲の良い 3...
View Article初心者によるプログラミング学習ログ 183日目
100日チャレンジの183日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。183日目はおはようございます183日目webサイトコーディング課題ボタン位置、テキスト位置修正#100DaysOfCode#早起きチャレンジ#駆け出しエンジニアとつ...
View ArticleClik here to view.
カンタンなcssの擬似要素＋組み合わせ
cssの擬似要素についてどうも、よわよわエンジニアです。今回はcssの擬似要素についてさらっとまとめます。サンプルコードsample.html<!DOCTYPE...
View ArticleClik here to view.
SVGで文字をなぞるアニメーションの実装
2018/06/27 SVGに詳しくなりたい社内のSlackでそう呟いた時から、かれこれ1年半ぐらいの時間が経ちました。「Scalable Vector...
View ArticleCSSだけで球体！？錯視トリックで世界を騙せ
この記事は CSS Advent Calendar 2019 14日目の記事です。伝えたいこと本来、CSSだけでは球体の表現は難しく、グラデーションでそれっぽくするほかありませんでした。この課題、アニメーションと周辺環境による錯視のトリックで解決します。深く考えないでねここで紹介するテクニックは実務に応用できません。...
View ArticleClik here to view.
【Vue.js】【ESLint】スコープ付きCSSの利用されていないセレクターを検出するESLintプラグイン作った
この記事は、Vue Advent Calendar 2019...
View ArticleClik here to view.
Clik here to view.
mediaを使ってNavigation SideMenuを実現する
はじめに事故マップというサービスを個人開発しています。このWebアプリでは、画面サイズが小さい場合は自動的にSideMenuを閉じるという動きを入れてレスポンシブなUIを実現しています。これはCSSのmediaクエリを使えば簡単に実現できるのでその方法を紹介します。mediaとはCSS の media...
View Articleサイトに某ほとけ風な何かを呼び出すjQueryプラグイン・hotoke.jsを作った
ご存知の方は知っている某ドラマで現れる、「ほとけ」風ななにかを自分のサイト内に呼び寄せるjQueryプラグインを作成しました。デモ実装サンプルはこちらになります。ページを開いてから数秒後に登場します。hotoke.jsのサンプルページ使い方以下のファイルを表示させたいページに読み込みます。hotoke.cssjQuery（今回はバージョン2.2.4を使用して作成しました。他のバージョンで動くかは未検...
View Article初心者によるプログラミング学習ログ 184日目
100日チャレンジの184日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。184日目はおはようございます184日目webサイトコーディング課題更新履歴の修正、といいたいところだけどうまくいかなかった#100DaysOfCode#駆け出しエン...
View ArticleClik here to view.
Bootstrap 4 のcardを使ってWebサイトにオシャレなBOXを加える
オシャレなBOXをBootstrap4の『card』で作る今回のイメージはこんな感じ。Free、Pro、Enterpriseの3つのBOXのことやね。これは、料金プランの選択肢を作成するときとかにオシャレですよね。Cardの説明まずcard単体はこんな感じ。card.html<divclass="card mb-4...
View ArticleClik here to view.
まだCSS使ってるの？SCSS(Sass)を使ってみよう！【入門編】
はじめにHTMLやCSSを少しでもかじった方ならわかると思いますが、CSSを書いているときネストで書けないかな？変更するときに複数の箇所を変更するのが面倒...使いまわしたいところがあるコメントを/**/で囲むのが面倒...こんなことを思ったことがありませんか？実はこれらがSass(SCSS)で簡単に解決するのです！！SassとSCSSとは？SassとはSyntactically Awesome...
View ArticleClik here to view.
jQueryでフッターをページの長さに合わせてページ下部に固定する方法
1.はじめに本記事はフッターをページ長さに合わせてページ下部に固定する方法について自分の勉強記録も兼ねて執筆します。ちなみにfooterFixed.jsというライブラリを使えば簡単にできるみたいですが（笑）、本記事ではそれは使わずに実装していきます。footerFixed.jsの使い方はこちら2.目的フッターをページ長さに合わせてページ下部に固定する3.コード簡単ですが、下がコード例です。今回は簡略...
View ArticleClik here to view.
僕のP2HACKS譚
はじまり 12月7日～15日に開催される「P2HACKS」に参加してきました！当初に予定していたRailsではなく全く触ったことのない「React」で製作しました。というより、していますのほうが正しいんですが。しかし、全く触ったことのないものでアプリ製作を行って生じる苦労が１つや２つで収まるわけがないんです。...
View ArticleClik here to view.
Sassのmixinを用いたレスポンシブ化
Sassを導入したCSSにも慣れてきたがベタベタのベタ書きがあまりにもひどくて目も当てられずどこに何を書いたか分からなくなる同じようなスタイルを繰り返し書いているテーマ全体の色味をコントロールしにくいとにかく長すぎるある程度セクションごとにわけて書いていたが上記のような問題を早めに解決しておきたいと考えてました。そこでよく聞くSassはどうやらこれらの問題を解決してくれる今をときめくCSSだとか。S...
View ArticleClik here to view.
初めてのJavaScript~ペンの色・太さが変更できるお絵かきアプリを作ったよ~
Webアプリを作りたいなと思いながらなんとなーく先延ばしにしてたところ初心者向けのJavaScript，HTML，CSSを使ったワークショップを見つけたので参加してみました。その時作ったお絵かきアプリに機能を追加してペンの太さ・ペンの色の変更・画面の全消しができるようにしてます．動作環境あんまりよくわかってないけどCodeSandboxにsign...
View ArticleClik here to view.
cssだけでうんち書いてみた
💩世界はうんちで満ちている💩大人が1日に排せつするうんちの量は平均して400～500g、これは1年で換算すると142kgに相当します。142kgという重さはパンダ1頭分だそうです。地球上の人間が1年で排せつするうんちの量は、約2900億kgに相当するとのこと。これだけ世界を満たしている💩！こりゃcssだけで書く需要ありそうです！💩💩💩💩cssだけで書く💩といってもhtmlも使わないといけない。でも、...
View Articleclassの小話 （cssが適用されないエラーについて）
はじめにHamlSassでありがちなミスについて書いてみました。実行次のようなビューファイルがあるとします.top.top__contents=image_tagsrc="https://image.png",class: ".top__contents__image"画像表示させるコードです。画像はリンクで表示させ、imageというクラスを設定してみます。この画像の大きさを、height:...
View ArticleClik here to view.
HTMLとCSSでカレーライスを作った
カレーライスを作りました See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen....
View Article