iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法
「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com". http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%
[AWS]ALBだけでメンテナンス画面を表示させる
https://aws.amazon.com/jp/about-aws/whats-new/2018/07/elastic-load-balancing-announces-support-for-redirects-and-fixed-responses-for-application-load-balancer/ 去年の6月あたりに、ELBでALBのリダイレクトおよび固定レスポンスのサポートを発表しました。が！！当時は日本語表記がなく、文字化けがひどいことになっており、検証できない状況だったので、今回メンテナンス画面を表示してみました。 ■ALBのルールの表示/編集 ルールの追加 パスを * にして 固定レスポンス を選択し、Content-Type を text/html 、以下のhtmlをぶち込みます。
![[AWS]ALBだけでメンテナンス画面を表示させる](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ba6bdb7724680733475ee6d2cab4daa0e5bc865/height=288;version=1;width=512/https%3A%2F%2Fblog.adachin.me%2Fwp-content%2Fuploads%2Faws.png)
nginxでメンテナンスページ用意する技 · さよならインターネット
March 12, 2015 LT;DR かっぱ先輩！ かっぱ先輩のブログを読んで 深夜メンテナンスに役立ちそうな nginx 小ネタ - ようへいの日々精進 XP 同じようなことを最近やっていたのでメモ。 追記(03/12) 14:00 リダイレクトやめましょうとのこと 503でお返事しましょうとのこと メンテナンス時にメンテページにリダイレクトするのやめましょう — そらは (@sora_h) March 12, 2015 @kenjiskywalker @sora_h 元ネタの自分の記事は503返してるよ http://t.co/lONIVrv7OF — fujiwara (@fujiwara) March 12, 2015 @kenjiskywalker @sora_h 静的ページ更新して差し替えぐらいでいいんじゃないですかねえ — fujiwara (@fujiwara) Mar
日本の行政機関等が公開しているAPIについてのまとめ（2016年8月17日暫定版。随時更新） - Qiita
この記事は下記のURLにあるコミックマーケット90で頒布した同人誌と自分が管理するブログの記事を微修正し、転載したものです。 南関東開発機構 : 同人誌「日本の行政機関が公開中のAPIについて調べてみた本」を公開しました http://blog.livedoor.jp/south_kanto_dm/archives/52143201.html 南関東開発機構 : 日本の行政機関が公開中のAPIについてのまとめ（2016年8月17日暫定版） http://blog.livedoor.jp/south_kanto_dm/archives/52143463.html 前書き この記事の目的は、日本の行政機関等が公開しているAPIを紹介する事です。 日本の情報技術は他国と比較して、立ち遅れている部分があり、これを立て直すのが喫緊の課題であると言えます。 日本政府もこの問題に危機意識を持ち、先日、経
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
更新日: 2022年10月4日公開日: 2014年9月3日【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説 プログラミングを学び始めると実感することですが、どの言語も独学だけで実務レベルまでの技術を習得するのは非常に難しい。そこで多少の受講料がかかったとしても、プログラミングスクールの受講を検討する方が増えています。 この記事では主なプログラミングスクールについて、それぞれの特徴（オンライン、通学、初心者向け、無料スクール）やメリット、学習することができるプログラミング言語についてまとめました。 「スクール」と聞くと、通学しなければいけないイメージがあると思いますが、オンラインや夜間、土日も対応している社会人向けのスクールも多いので、忙しいサラリーマンや学生の方なども是非参考にしてみてください。 【プログラミングスクール解体マップ2020】 Googleドライ
7つのWeb技術！Webデザイナーやフロントエンドエンジニアが押さえるべき流行をキャッチアップ
近年、インターネットやWebの世界では様々な技術が登場。 Webデザインやフロントエンドにおいても急速に技術が進歩し、複雑でカッコいいホームページをより少ない工程で制作することが可能になりました。 ただし、その反面、Webデザイナーやフロントエンドエンジニアは波に乗り遅れないように、しっかりと流行をキャッチアップすることが求められています。 そこで今回は、Web関係者必須の7つのWeb技術について、解説していきます。 最近Web界隈で流行している7つのWeb技術とは？ 1. AMP AMP(Accelerated Mobile Pages)とは、GoogleとTwitterで共同開発されている、モバイル端末でWebページを高速表示するためのプロジェクトやHTML規格のことです。 Googleはモバイル端末におけるユーザー体験を改善してブラウジングをより快適なものにするために常に模索を続けて
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
Favicon Generator for perfect icons on all browsers
Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this? Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its de
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
「プログラマでしょ？ホームページ作ってよ！」を1日で対応する - Qiita
プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト
GSAP - SVG Path Range Slider #2
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Web制作者が絶対読みたいHTML & CSSの最新記事ベスト10
HTMLやCSSも進化しています。Webデザイナーやコーダーなど、Web制作者が押さえておきたい最新のHTML/CSS関連記事をKADOKAWAが運営するオンラインメディア「WPJからアクセス人気順に紹介します。 『もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）』（WPJ） HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 2.知らないと損しているCSS関数の世界 『便利すぎてしびれた！あなたが知らないCSS関数トリック8選』（WPJ） どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ 3.Cutestrap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
The Ultimate Website Code Generator
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
http://post.simplie.jp/posts/93
