HTML + CSSでリアルな炎（アニメーション付）を作る - QiitaCGなどのパーティクルで炎を作るやり方を応用して、HTMLとCSSだけでリアルな炎のアニメーションを作成しました。 完成品はこちら See the Pen Only HTML + CSS Fire by Nishihara (@Nishihara) on CodePen. 概要 パーティクルのかわりに大量のdiv要素を用意しています。1個1個はただの円形ですが、それらを上昇させつつ重ね合わせることで、炎のような演出を作っています。div要素大量に作るのが面倒だったのでPugを使っています。
我が名は神龍……どんなテストもひとつだけ自動化してやろう - Qiita
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
お問い合わせフォームの入力ページを作成する | GRAYCODE PHPプログラミング
ワークショップ「お問い合わせフォームを作成する」の第1回目はお問い合わせフォームの入力ページのHTMLを作成します。 この記事のポイント お問い合わせフォームの入力ページを作成する フォームの入力データが実際に送信＆受信できるか確認する ワークショップ第1回目は、お問い合わせフォームを作成するファイルを作成し、基礎となるHTMLを作成していきます。 早速ですが、実際にファイルを作成してコードを書いていきましょう。 まず、「index.php」というファイルを新しく作成して、以下のHTMLコードを書いてください。 ※今回作成するコードは以下のGithubのページからダウンロードすることができます。 vol.1のサンプルコード – Github index.php <!DOCTYPE> <html lang="ja"> <head> <title>お問い合わせフォーム</title> <sty
JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC（今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（~）、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること： Todo の追加（最大50件） Todo の完了 Todo の削除 フィルタリング（完了・未完了） 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと： ページリロード後の永続性の維持 「すべての Todo を完了にする（Mark all as done）」
VirtualBox を使って無償で Mac 上に日本語入力可能な Windows、IEのテスト環境を構築する - @blog = Blog.new(author: "nyangry")
【2017年1月24日 追記】modern.ie のサイトがいつのまにかなくなっていたので、少し文言やリンクを変えました。 Microsoft が提供している、仮想化プラットフォーム向けの Windows イメージを利用することで、 無償で Mac 上にテスト用の Windows、IE 環境を構築することが可能です。 様々な Windows のバージョンと、IEのバージョンの組み合わせでイメージが配布されており、 フロントエンドの実装が特定のバージョンの IE 上でもうまく動くかを確認するためによく利用しています。 しかし、提供されている Windows は英語版なので、日本語入力ができません。 なので、基本的な挙動の確認だけであれば、 VirtualBox に提供されている Windows イメージをインストールするだけで十分なのですが、 日本語入力のテストだったり、テスト作業の効率を向
30分間React入門「いいねボタン」作成チュートリアル
「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 > 今回作る「いいねボタン」のデモ今回作る「いいねボタン」のデモ 実際に押せます↓ > チュートリアルの目標チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる！ > このチュートリアルについてこのチュートリアルについて なお、このチュートリアルは、下記のバージョンで動作確認しています。 npm 2.14.2 react 0.14 react-dom 0.14 w
Tips for Creating and Exporting Better SVGs for the Web
Tips for Creating and Exporting Better SVGs for the Web Published on 16 Nov, 2015 | Takes approximately 12 min to read Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in
Version Control Guidance – Frequently Asked Questions - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
週刊「しょうもないWebアプリをつくる」創刊号 – アクセスカウンター | CreativeStyle
突然ですが、新しい企画を始めます。 創刊のご挨拶 週刊「しょうもないWebアプリをつくる」は、僕@kadoppe が（ほぼ）毎週「しょうもないWebアプリ」をつくって公開するという、比較的どうでもいい企画になります。 Webアプリケーション開発の世界には、新しいワクワクするような技術やツールが、毎日たくさん登場しています。そんな技術に少しでもキャッチアップするために、何かしらのWebアプリを開発するきっかけがほしいと思ったので、なんとなく始めてみました。 「しょうもないWebアプリ」の定義はあいまいですが、 あまり役に立たない 結構すぐにつくれる みたいなものをイメージしています。また、 ソースコードを公開する だれでもDeployできるよう「Deploy to Heroku」ボタンを用意する（後述） ことはちゃんとやっていこうと思います。 もしかしたら、たまに役に立つWebアプリをつくる
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
WordPressで「はてなブログカード」のような埋め込み機能作成 – セルティスラボ
ここまで見て、あれ ブログカードがちょっと違うぞと気がついたと思いますが、これが今回作成したブログカードです。詳しくは後ほど紹介します。 はてなのブログカードは OGPにも対応しているようで、はてなブログ以外のサイトもブログカード形式で表示出来るようです ちなみにOGPは、ツイッターやフェースブックで利用されている機能で記事の要約だけでなく画像等もメタデータとして含むことが出来ます OGPデータからカード作成するなら、プログラム組めば以外に簡単に出来るんじゃない？ と思ったのが今回のきっかけです (^^) ということでちょっと調べると はてなのブログカードを iframe を使ってブックマークレットから簡単に生成する方法を公開してくれている方がいます それを利用してブックマークレットからそのサイトのカードを作ってみます 最初はこの iframe をプログラムで処理しようとも思ったのですが、
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有
[対象: 上級] 気付いている人もいるかと思いますが、このブログ全体をHTTPSにしました。 この記事では、備忘録を兼ねて、完全HTTPSへの移行を検討しているサイトの参考になるように僕が実行してきたプロセスをまとめます。 実行した主な作業は次のとおりです。 サーバー証明書の取得 HTTPSへのリダイレクト 内部リンクの修正 各種ツール・パーツのHTTPS動作確認 すべてのコンテンツがHTTPSでダウンロードされているかを確認 WordPressの設定変更 rel=”canonical”の更新 ウェブマスターツールへの登録 サイトマップの更新 ソーシャルシェアの引き継ぎ HSTSの設定 外部リンクの更新 高速化 順に説明します。 1. サーバー証明書の取得 サーバー証明書をまず取得します。 手順は利用しているサーバー会社によって変わってきます。 詳しくはお使いのサーバー会社のヘルプを参照し
[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」
はじめに VCCWはVagrant + Chef ベースのWordpressのプラグイン / テーマ開発環境です。VagrantとVirtualBoxをインストールすればコマンド数回で仮想マシンが立ち上がり便利なWordpress開発環境ができあがります。ローカルのXAMPPやLAMPを卒業したい、そんな方にお勧めです。 動作環境 VCCWはVagrant 1.5以上、VirtualBox 4.3以上が必要です。コマンドラインで操作することになるので、あまりコマンドラインを使った経験のないデザイナーさんには敷居が高いかもしれません。 VCCWでできること 公式サイトの箇条書きを抜き出してきただけですが、下記のようなことができます。設定ファイル（Vagrantfile）を書き換えるだけで変更もできます。 コンフィグファイルによる設定変更（Vagrantfile） マルチサイト 管理画面のSS
![[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ
最近よくお問い合わせをいただく当ブログに設置しているオリジナルのSNSボタン8種類の全コードをご紹介します。コードはコピペでOK！STINGER5への設置方法も説明します。 シェアボタンのコードはツイッター、フェイスブック、グーグルプラス、はてなブックマーク、LINE、Pocket、RSS、feedlyの8種類です。RSSはSNSなのか!?という突っ込みはスルーでお願いします。 【WordPress】オリジナルSNSボタン設置方法！スマホ用シェア数つきSNSアイコンも公開 – ゆめぴょんの知恵 こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。 プラグイン【SNS Count Cache】でシェア数を取得する プラグイン【SNS Count Cache】を利用するとシェ
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
カードローンレイクで土日祝日でも即日で融資を受ける方法
カードローンレイクは、大手消費者金融の1つで、多くの利用者がいる金融サービスです。 レイクは、2023年1月4日にレイクALSAから名称変更をしました。 レイクは、即日で融資を受けられるため、急ぎで現金が必要になる場合でもお金借りる事が出来ます。 消費者金融業者の中には、土日祝日でも即日融資に対応しているところがありますが、レイクもその1つです。 この記事でわかること レイクは土日祝日でも即日融資を受けられる可能性がある 早めに申し込みをするなど土日祝日での即日融資を受ける際には注意点がある 必要書類の事前準備などスムーズな融資申し込みのための用意をしておくと良い レイクでお金を借りる方法は3種類ある 土日祝日にどうしてもお金が必要になった場合には、カードローンレイクの利用を検討してみましょう。 カードローンレイクなら土日祝日でも即日で融資が受けられる カードローンのレイクは、土日祝日に初
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
Brackets のテーマを作る - WebDelog
この記事は Brackets Advent Calendar 2014 5日目の記事です。 普段コードを書くときに使うエディターを頻度順に並べると PhpStorm -> SublimeText -> DreamWeaver -> Coda という感じで、Brackets に関してはほとんど触ったことがありません。 そんな私でも Brackets のオリジナルテーマを簡単に作ることができたので、 今回はその方法を記事として紹介したいと思います。 Ghost 今回作成してみたテーマです Ghost ドキュメント 今回テーマを作成するにあたっては Brackets の Github レポジトリの Wiki に書かれているドキュメントを参考にしました。 https://github.com/adobe/brackets/wiki/Creating+Themes ユーザーフォルダにテーマのフォルダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
