カテゴリーアーカイブ HTML

著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね! (0)
asabakento 著者:asabakento

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

  • この記事いいね! (0)
asabakento 著者:asabakento

JSXの中で即時関数を使ってみた

Reactでコードを書いていると、jsxの中でコードを埋め込んでコンポーネントを動かしたい時があります。自分は即時関数を使って処理を書きました。

 

 

即時関数は通常使う関数と違い、いちいち変数を宣言して関数を格納しなくても記述した時点で使うことができます。

 

ここでは少し使い方が異なりますが、自分の中での即時関数の解釈です。

 

コードの初めと終わりに{}で関数を内包していますが

java scriptで通常通り(()から即時関数を書き始めると関数と認められずエラーになります。

 

Reactを使ってJSXをいじりたいときはこの方法で記述します。

ユーザーの特定するもの(会員番号など)を値として受け取り

その値に沿ってコンポーネントを変化させたいときは便利です。

jsxを中からいじる方法は他にもあるかもしれないので

発見次第投稿したいと思います。

  • この記事いいね! (0)
著者:杉浦

HTMLの勧告とCSSの仕様

 HTML、CSSを始めとする様々なWWW(World Wide Web)上で用いられる技術の標準化を進める団体としてW3C(World Wide Web Consortium)という団体があります。W3Cの活動にはWHATWF(Web Hypertext Application Technology Working Group)が開発しているHTMLの仕様の勧告とW3C自身が開発しているCSSの仕様書の公開も含まれています。
以下はW3Cの公開している資料へのショートカットです。

HTML & CSS – W3C:HTMLとCSSについての基点になるページ
All Standards and Drafts – W3C:文字通り、全ての標準と草稿。仕様や技術文書が色々

 和訳がない文書が多数、文章量が多量、といったため読むのは結構な苦労ですが、情報はとても多く、ブラウザ依存の問題以外は網羅されているはずです。詳しく調べたい時にあたる資料として使えます。

  • この記事いいね! (0)
村上 著者:村上

【CSS】:activeなどの疑似クラスがスマートフォンで効かない時の対処法

クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらくCSSの書き方が間違っているのかと悩みましたが、どうやら関係なかったみたいです。
で、対処法がこちら。

 

a:active, a:hover {
    background-color: red;
}
<a href="[リンク先]" ontouchstart="">リンクはこちら</a>

疑似クラスを指定した要素、今回は、aタグに対して、ontouchstart属性 を追加するだけです。
これを追加することにより、:active:hover が有効になります。
ちなみに、:active は要素がタップされたとき、ここで指定したスタイルが反映されますが、:hover は、マウスオーバー時ではなく、要素をタップ後、別の要素がタップされるまでの間、指定した要素が反映されます。

参考にさせていただいたサイトはこちらから。

:hoverに設定したCSSがスマホで反応しない時の対処|ビギナーズハイ
http://beginners-high.com/css-hover/

なお、追加する属性は、ontouchstart 以外にも、ontouchendontouchmove でも良いとのこと。

 

対処法としては以上です!
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
村上 著者:村上

【HTML】フォームデータの送信先を指定する「formaction」属性

デバックのためにコード見ていて、使ったことがない属性だったので、覚え書きとして。
HTML の Button要素である、「formaction」属性についてです。
なお、今回参考にさせていただいたサイトはこちら。

formaction属性 ≪ button要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
http://html5.cyberlab.info/elements/forms/button-formaction.html

 

私がよく使うFormの書き方ですが、


&lt;form action="データ送信先" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;input type="submit" name="submit" value="送信"&gt;
&lt;/form&gt;

今まで、上記のように書いていました。

が、今回後輩君が書いたコードの中に、下記のような記述を発見。



&lt;form action="[データ送信先URL]" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;button type="submit" formaction="[データ送信先]"&gt;送信&lt;/button&gt;
&lt;/form&gt;


butoon要素に、見慣れない formaction という属性があります。

 

この「formaction」ですが、HTML5で新たに追加されたもので、フォームデータの送信先URLを指定するときに使う属性とのこと。
で、注意したいのが、button要素の formaction属性 で定した送信先URLは、form要素の action属性 で指定した送信先URLよりも優先されること。
そのため、下記の場合は、botton要素 で指定した「送信先URL2」が優先されます。



&lt;form action="[データ送信先URL1]" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;button type="submit" formaction="[データ送信先2]"&gt;送信&lt;/button&gt;
&lt;/form&gt;


私の場合、うっかり違うURLを指定してしまい、違う送信先に送られる!?ということをやらかしそうです。
それを回避するためには、冒頭で挙げた記述方法を使うのが良さそうですね。

 

ということで、見慣れない formaction属性 についてのまとめでした。
これ便利!使おう!というよりも、こんな属性あるよ!という意味合いの方が強いまとめでした。

  • この記事いいね! (0)
村上 著者:村上

【HTML5】入力値の形式を正規表現で指定できる「pattern」属性

今まで、正規表現って PHP で行っていたのですが、HTML5 なら HTML 側で入力値をチェックできるとのこと。
使う機会がなかったので、今まで知りませんでしたが、これは便利そう。
ただ、「送信」などのボタンを押した後に、入力値のチェックを行うので、入力自体は出来てしまうんですよね。

 

使い方は、下記の通りです。

<form>
    <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
    <input type="submit" value="送信">
</form>

input タグに pattern 属性があるので、ここに正規表現を記述するだけです。
なお、正規表現で記述した文字列のパターンに一致しない場合は、下記のようにエラーメッセージが表示されます。

わざわざエラー文を表示する手間が省けて、これ良いですね!
見た目が買えられないのが難点かなとも思いますが、シンプルでわかりやすいので、このデザインでも問題なさそう。

と、いうことでHTMLで入力チェックをする方法でした。
…正規表現、覚えよう…。

 

最後に、よく使うのにすぐ忘れる、メールアドレスを判断するための正規表現をメモ。

// メールアドレス
^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$
  • この記事いいね! (0)
村上 著者:村上

【CSS】要素に指定した position: fixed が効かない時の対処法

そこまで長時間悩んだわけではないのですが、ちょっぴりハマったのでご紹介。

とある要素に、下記のようにCSSを指定していたのですが、スクロールした際に、親要素の下部にくっついて動くような挙動になってしまいました。

position: fixed;
bottom: 0;
left: 0;

本来は画面の下部にくっついて動かないでいてほしかったのですが、気が付けばページ自体に追従する形になっており、そこそこ慌てました。
が、親要素を確認しても、特に変な記述は見つからず…。

 

で、色々調べてみたところ、bodyに指定した下記のCSSが原因でした。

transform: translateZ(0);

親要素ばかりみていたので、これは盲点でした。

どうやら、子要素に position: fixed を指定した時、親要素に transform が指定されていると、position: fixed が希望した通りの挙動をしてくれなくなるみたいでした。

対処法としては、body に指定した transform を削除するか、下記のように !important を用いて無理矢理上書きするかですね。

// transform: translateZ(0);
// transform を解除

transform: none !important;
// !important を使って none で強制的に上書き

力業感が否めませんが…正常に動くようになったので、今回はこれで問題なしということにしておきます。

position を指定した要素の挙動がおかしくなった場合は、親要素もしくは body に transform が指定されていないか確認してみてください。

  • この記事いいね! (1)
takahashi 著者:takahashi

モバイル版Chrome/SafariでWebページをWebアプリケーション表示させる方法

高橋です。

モバイル版のChromeやSafariには、特定のページのショートカットを作る機能がついています。

使ったことがある方もいらっしゃるのではないでしょうか?
僕もキャリアが提供するWebメールなどで、画面をすぐに開けるようにするためによく使っています。

さて、このショートカットを作る機能ですが、サイトによって動作が異なることはご存知でしょうか?
例えば、ショートカット化したAmazonのショッピング画面を開くと、

こんな感じで通常のブラウザ画面で表示されます。
一方、Softbank のS!メールどこでもアクセス をショートカット化すると…

開いたときにスプラッシュ画面が!

ブラウザのアドレスバーの表示も消え、まるでアプリのような見た目になりました。

この表示の違いは、対象のページのheadタグに次のようなmetaタグが入っていると起こります。

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="サイト名">
</head>

この2行を入れておくと、モバイル版のSafari、Chromeで作成したショートカットから起動すると、URLバーが消え、アプリのような表示になるというわけです。
もし、スマホ・タブレット向けに作っているページがあり、Webアプリとして使ってほしい、URLバーを消した状態で使ってほしい、というときに便利です。

一方で、ブラウザ側でこの切替を行う設定は今のところないようなので、ユーザー側ではコントロールを行うことができません。
この点は注意が必要そうです。

モバイル用のWebアプリを作成している方は、一度試してみてはいかがでしょうか。

  • この記事いいね! (0)
村上 著者:村上

【CSS】DIV要素を上下左右で中央揃えする方法(IE、Safari対応)

使用頻度は高めだけど、良く忘れるので備忘録として。
今回は今回は子要素を上下左右で中央揃えにするやり方について。
なお、同じ方法で画像の中央揃えも実現できます。

HTML、CSSのコードはこんな感じ。

<!-- HTML -->
<div id="parent">  <!-- 親要素 -->
    <div id="child"></div>  <!-- 子要素 -->
</div>
/* CSS */
#parent {
    background-color: blue;
    height: 200px;
    width: 200px;
    position: relative;
}
#child {
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

このとき重要となってくるのが、親要素に指定された position: relative; と、子要素に指定された position: absolute; です。
これがあることで、子要素が表示される際の基準位置が親要素の左上となります。

そして、子要素の top、left をそれぞれ50%とすることで、子要素の左上の位置を親要素の中央に来るようにしています。
が、これでは左下に移動しすぎなので、transform: translate(-50%, -50%); で子要素の縦横それぞれの50%分だけ左上に移動させて、ちょうど親要素の上下中央に子要素が来るように調節しています。

 

やっていることは以上です。
他にも上下中央揃えする方法はあるようですが、今回の書き方を使ったところ、IESafariなど、表示が崩れやすいブラウザで表示した時に崩れなかったので、個人的にはおすすめの書き方です。
IEやSafariでデザイン崩れに悩まされている場合は、こちらの書き方をお試しになってみてはいかがでしょうか。

  • この記事いいね! (0)