Corredor

ウェブ、プログラミングの勉強メモ。

HTML

HTML ファイルだけで Markdown を Wiki 風に表示できる「MDWiki」を試してみた

HTML ファイル1つだけで Markdown ファイルをパースして表示してくれる、MDWiki というツールを試してみた。 Markdown ファイルをパースして HTML 表示してくれるツールというと GitBook などがあるが、HTML ファイル1つだけという最強の手軽さが売り。早速…

ruby 要素によるルビとスタイリング

いちばんよくわかるHTML5&CSS3デザインきちんと入門 [ 狩野 祐東 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 2,678円 ふと思い立って、ruby 要素を使った時のルビを CSS でスタイリングできないか調べてみたが…

メインサイト Neo's World のデザインを変更した

メインサイトといいつつ、開設開始からの日数が一番長いだけという Neo's World だが、2018年2月4日にデザインを変更した。今回はその詳細を書き留めておく。 伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール作者: 高橋佑磨,片山な…

onerror イベントで img・script 要素の読み込みエラーをうまく検知できなかったら

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん作者: たにぐちまこと出版社/メーカー: マイナビ出版発売日: 2017/03/27メディア: 単行本(ソフトカバー)この商品を含むブログを見る img 要素や script 要素に対し、onerror 属性を設定した…

iOS・MacOS をクラッシュさせる「chaiOS」は何をしていたのか

iOS 11 Programming Fundamentals With Swift: Swift, Xcode, and Cocoa Basics作者: Matt Neuburg出版社/メーカー: Oreilly & Associates Inc発売日: 2017/10/19メディア: ペーパーバックこの商品を含むブログを見る 少し前に、iOS や MacOS をクラッシュさ…

Web ページ中の画像が読み込めなかった時に処理させる

HTML&CSSとWebデザインが 1冊できちんと身につく本作者: 服部雄樹出版社/メーカー: 技術評論社発売日: 2017/07/21メディア: 大型本この商品を含むブログを見る Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集作者: 久保田涼子出版社/メーカ…

Cordova アプリの Content-Security-Policy 設定について

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)作者: 大友聡之,坂手寛,清水崇之,城口良太,高木基成,床井幹人,野島祐慈,渡辺俊輔出版社/メーカー: 翔泳社発売日: 2013/03/12メディア: 大型本 クリック: 1回この商品…

2018年の Favicon 設定

よくわかる HTML5&CSS3ウェブサイト構築の基本と実践 (FOM出版のみどりの本)作者: 富士通エフ・オー・エム株式会社(FOM出版)出版社/メーカー: 富士通オフィス機器発売日: 2015/09/15メディア: 大型本この商品を含むブログを見る Favicon って2007年ぐらいに…

HTML ファイル内に CSS や JS をインライン挿入する「html-inline」

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト出版社/メーカー: ボーンデジタル発売日: 2017/11/04メディア: 単行本(ソフトカバー)この…

Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する

GitHubツールビルディング ―GitHub APIを活用したワークフローの拡張とカスタマイズ作者: Chris Dawson,Ben Straub,池田尚史,笹井崇司出版社/メーカー: オライリージャパン発売日: 2017/05/10メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を…

CordovaCallNumberPlugin を使って電話発信と連動処理

パナソニック デジタルコードレス電話機 子機1台付き 迷惑電話対策機能搭載 ホワイト VE-GD25DL-W出版社/メーカー: パナソニック発売日: 2017/02/16メディア: エレクトロニクスこの商品を含むブログを見る CordovaCallNumberPlugin を使うと、Cordova アプリ…

Geolocation API を使って JavaScript だけで位置情報を取得する

HTML5 Geolocation: Bringing Location to Web Applications作者: Anthony T. Holdener III出版社/メーカー: O'Reilly Media発売日: 2011/05/24メディア: Kindle版この商品を含むブログを見る Cordova アプリで位置情報を取得する際は cordova-background-ge…

iOS Safari でフルスクリーンモードにするページのタイトルを変更する

Mac Fan 2017年10月号 [雑誌]出版社/メーカー: マイナビ出版発売日: 2017/08/29メディア: Kindle版この商品を含むブログを見る 最近 (今頃?) マイブームな iOS Safari のフルスクリーンモード。任意の Web ページを「ホームに追加」したときの挙動を Web ペ…

iOS Safari から追加したフルスクリーンモードアプリのステータスバーの表示仕様を変える

サファリ (しかけえほん)作者: キャロルカウフマン,ダンケイネン,Carol Kaufmann,Dan Kainen,きたなおこ出版社/メーカー: 大日本絵画発売日: 2013/07/16メディア: 大型本この商品を含むブログを見る 前回紹介した、apple-mobile-web-app-capable による「ウ…

iOS Safari で Web ページを「ホームに追加」した時にフルスクリーン表示にする

Safari(サファリ) 2017年 11 月号出版社/メーカー: 日之出出版発売日: 2017/09/23メディア: 雑誌この商品を含むブログを見る iPhone などの Safari で任意の Web ページを開いている時に、下部のメニューから「ホームに追加」という項目を選択できる。コレを…

自サイトの開発環境を作った

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/04/15メディア: 大型本この商品を…

Cordova アプリでサクサク動く Google Map を実現する「cordova-plugin-googlemaps」

Google API Expertが解説する Google Maps APIプログラミングガイド作者: 勝又雅史,古籏一浩,石丸健太郎,安藤幸央出版社/メーカー: インプレス発売日: 2011/12/02メディア: 単行本(ソフトカバー)購入: 2人 クリック: 69回この商品を含むブログ (8件) を見…

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

input[type="file"] のデザインを簡単に変える方法

ファイルを選択する input[type="file"] は、大抵テキストボックスとボタンで構成されているが、それらを個別にデザイン変更したりすることができない。 そこで、このファイル要素を label 要素で囲み、その中で別にボタンを作ってやることで、簡単にデザイ…

はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る 前回の記事で、はてなブログ公式プラグインではなく、独自のシェア…

ブラウザのステータスバーに遷移先 URL を表示しないようにできるか

社内で「ブラウザのステータスバーに遷移先 URL を表示しないようにしたい」というバカげた要件が出てきていて解決方法を探っているチームがいて、数日迷っていたので以下の StackOverflow を見せてみた。 参考:javascript - HTML - overRide statusbar lin…

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store でプログラミング言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出し…

textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。 neos21.hatenablog.com placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか…

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…

懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。 第1弾は marquee 要素。 marquee 要素って? テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入したで、IE4 あたりから使えていたので、90年代のインターネットを彩る…

HTML5 における空要素の閉じ方

やっと Web 関連のネタ書くよー HTML5 における空要素 (br 要素や hr 要素など、終了タグが不要な要素) の閉じ方は、てっきり /> でないとダメかと思っていた。でもどうやら > で良いようだ。 参考:WHATWG FAQ - 日本語訳 - HTML5.JP 空要素は /> で閉じる…