Tag HTML

New!

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う特殊文字のコード一覧

HTML 上で、比較的利用する機会がある特殊文字(記号)のコードをリスト化しました。 WordPress 等で、動的に処理される HTML コンテンツに必要となるときもありますので、お役立て下さい。 目次 よく使う特殊文字コード まとめ よく使う特殊文字コード リテラルは「&」+「〜」+「;」となり、大文字、小文字は区別されます。 一覧にはありませんが、&alpha ; の場合、ギリシャ小文字の 「α」、&Alpha ; ではギリシャ大文字の「Α」となります。 文字 表記 意味 " &quot; quotation mark & &amp; ampersand < &lt; less-than > &gt; greater-than   &nbsp; no-break space ¥ &yen; yen © &copy; copyright ® &reg; registered ± &plusmn; plus-minus · &middot; middle dot Ø &Oslash; O-slash ÷ &dvide; divide ø &oslash o-slash α &alpha; alpha β &beta; beta γ &gamma; gamma δ &delta; delta π &pi; pi σ &sigma; sigma φ &phi; phi ω &omega; omega … &hellip; horizontal ellipsis ™ &trade; trade mark ← &larr; leftwards arrow ↑ &uarr; upwards arrow → &rarr; rightwards arrow ↓ &darr; downwards arrow ∴ &there4; therefore ≠ &ne; not equal ≡ &equiv; equivalent まとめ これらの特殊文字の表記は、呪文のようなものもいくつかありますが、それらは全て英単語の短縮形となっています。 一見遠回りに思えますが、英語本来の意味から表記コードを覚えれば、すんなりと記憶に定着し暗記が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法

一部の HTML エディタでは Shift + Enter キーで br タグ が自動挿入されとても便利です。 今回はこの動きを Atom エディタで再現したいと思います。 目次 Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 まとめ Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 Atom を起動し、メニューの Atom -> 起動スクリプト を選択します。 init.coffee ファイルが開きますので、以下のコードを記述し保存します。 init.coffee 次に、メニューの Atom -> キーマップ を選択します。 keymap.cson ファイルが開きますので、以下のコードを記述し保存します。 keymap.cson Atom を再起動すれば、Shift + Enter で br タグ が挿入されるようになります。 まとめ 今回のカスタマイズは、HTML ページの設計時にはそれほど必要ではありませんが、コンテンツ自体の更新作業のコーディングとなったとき、よりクリエイティブに集中できるため、重宝される機能だと思います。 Atom をメインでディタとして HTML コーディングを行なっている方は、是非とも導入してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: リンク擬似クラス :link, :visited, :hover, :active の記述順

CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。 リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しましょう。 今回はこの CSS 記述順をいつも忘れるのでメモしておきます。 目次 リンクタグの擬似クラス :link, :visited, :hover, :active 記述順 まとめ リンク擬似クラス :link, :visited, :hover, :active の記述順 記事のタイトルそのままですが、:link -> :visited -> :hover -> :active の順に記述します。 サンプル CSS 覚え方 擬似クラスの頭文字をとって lvha -> l(o)v(e) & h(over)a(ctive)te -> love & hateと覚えます。多少無理矢理な感じがしますが、それでもないよりはマシかと思います。 まとめ 覚え方は love & hate でしたが、この love & hate を忘れてしまっていました。 CSS の継承とリンクタグの性質をしっかり理解していれば、こう言った試験前の一夜漬けのような覚え方をしなくても自然と書けるはずなのですが、一度記事にしましたので、もう忘れることはないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: Safari のピン(タブ固定時)にアイコン画像を表示する

Mac OS X 10.11 (El Capitan) の Safari から採用された ページピンのアイコン は favicon や apple touch icon とは別の記述をしなければ表示されません。 また、せっかくページピン用の画像作成し、表示するためのタグを記述したにもかかわらず、表示されないケースに遭遇しました。 今回はこのページピン用に、オリジナルアイコンを表示し、確認する方法を説明したいと思います。 目次 SVG 画像を準備する HTML を記述する 確認する Safari のピン(タブ固定時)にアイコン画像を表示する ページピン用のアイコン画像がしていされていないサイトは、デフォルトではページタイトルの頭文字のイニシャルが表示されます。 SVG 画像を準備する Illustrator 等のベクター画像アプリケーションで表示したいアイコンの SVG データを作成しました。ここでは “pinned_icon.svg” という名前で書き出します。 HTML を記述する タグ内に 以下の1行を追加します。href に SVG 画像のパス、color に塗りの値を記述します。 確認する ~/Library/Safari/ の中にある Template Icons フォルダを丸ごと消去します。 これを行わないと、サイトデータが変更前のアイコンのキャッシュへ紐付いているため、実際は結果が反映されているにも関わらず、ブラウザでページをリロードしても結果を確認できません。(これで数十分時間をロスしてしまいました。。) 無事 HTML で指定したページピンの SVG 画像が反映されました。 まとめ ページピンの画像は apple touch icon 同様、ちょっと一手間加えるだけで、サイトのブランディングに非常に有効です。 普段 Windows や Android をメインで使用している方も、設定方法は簡単なのでページピンのアイコン画像を設定してみてはいかがでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: マークダウン記法(Markdown)と HTML の対応表

いまさらですがマークダウン記法が必要になったので、一覧をメモしておきます。 マークダウンに関する詳細説明は割愛して、よく使用するタグを抽出し対応表を作成しました。 マークダウン(Markdown)と HTML の対応表 <XX>text</XX>  MarkdownHTML 見出し(Headers)# text### text<h1>text</h1><h3>text</h3> リスト(Lists)※(空行)* text (or + text or – text)* text (or + text or – text)* text (or + text or – text)(空行)<ul><li>text</li><li>text</li><li>text</li></ul> リスト(Lists)※(空行)1. text2. text3. text(空行)<ol><li>text</li><li>text</li><li>text</li></ol> リンク(Links)[text](url)[text](url “linkTitle”)<a href=”url”>text</a><a href=”url” title=”linkTitle”>text</a> 引用(Blockquates)※(空行)>text(空行)<blockquate>text</blockquate> 強調(Emphasis)_text_*text*<em>text</em> 強調(Emphasis)__text__**text**<strong>text</strong> 打ち消し(Strikethrough)~~text~~<del>text</del> 水平線(Horizontal rules)**** * ******– – –———-<hr> 画像(Images)![text](url)![text](url “imageTitle”) <img src=”url” alt=”text”><img src=”url” alt=”text” title=”imageTitle”> コード(Code)※(空行)```text```(空行)<pre><code>text</code></pre> エスケープ(Escape)\### text<p>### text</p> 改行(Line break)text(半角スペースx2)text(半角スペースx2)text<p>text<br>text<br>text</p> 段落(Paragraph)text(空行)text(空行)text<p>text</p><p>text</p><p>text</p> ※上下に空行がないと正しく表示されません まとめ マークダウンは初めてでも一度書いてしまえばマスターできるくらい分かりやすいものですが、うっかり忘れてしまったとき役に立つと思い記事にしました。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTMLのテーブルタグ生成ツール

自分用にHTMLのテーブルタグを出力するスクリプトを作成しました。 シンプルな row と col のみの出力となります。 テーブルタグ生成ツール row: col : 結果 まとめ 今回のツールは手抜きではなく、これしか必要なかったのです。。。Zencoding とか emmet を使えって話なんですけどね(笑) この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML:Photoshopでico形式ファイルを書き出しfaviconを表示する。

Photoshopでファビコン(favicon)の画像を作成しても、Macのデフォルト環境ではicoファイルが書き出せません。 IE以外のブラウザであればファビコンの画像形式は、GIFやPNGでも構わないのですが、IEで表示させるためにはico形式での出力が必要となります。 ファビコンは頻繁に変更しないため、作成から書き出しまでの一連の手順を忘れがちなのでメモしておきます。 Photoshopでico形式ファイルを書き出しfaviconを表示する 作業環境は以下のとおり。 システム環境:MacOS X(10.8) 使用アプリケーション:Photoshop CS5 書き出すfaviconのファイル名:favicon.ico 書き出し先フォルダ名:images Photoshopでico形式ファイルを書き出す Photoshopでico形式のファイルを書き出すためのプラグインをTelegraphicsからダウンロードする ダウンロード後、プラグインファイル(ICOFormat.plugin)を以下のフォルダにコピーする Photoshopを起動(すでに起動している場合は再起動)し以下のサイズでファビコン画像を作成する 出力形式サイズ(ピクセル)色数 ICO形式(共通)16×16, 32×324ビット16色, 8ビット256色, 24ビット1600万色 ICO形式(Win)24×24, 48×48, 64×64任意の色数 ICO形式(Mac)64×64, 128×128任意の色数 GIF形式16×16256色 PNG形式16×168ビット(256色)or 24ビット(1600万色) 作成した画像をico形式でファイル名(favicon.ico)としてimagesフォルダに書き出す faviconを表示する HTMLファイルのheadタグ内に以下を記述する。(単独行の記述でも問題ないですが、両方指定するのが望ましいとされているみたいです) まとめ ファビコンは当初、非HTML標準で Microsoft Internet Explorer 5 独自の機能として実装されたため、Windowsのico形式という不可解な画像フォーマットが存在します。 IE以外のモダンブラウザではPNGやGIFでも問題なくファビコンの表示が可能ですが、ここはMicrosoftに敬意を表してicoファイルで作成することをおすすめします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:アプリ開発者のためのUIColor用のRGB値と16進数の色見本(iOS7対応)

Objective-CのUIColorオブジェクトは0〜1.0でRGB値を指定するため計算が非常に面倒です。 JavaScriptで16進数変換ツールを制作しようか考えましたが、UIや画面デザインの作成時には色見本をみながらイメージを固めていくのが重要です。 というわけで、ブラウザでカラー名が定義されている「色の名前」「16進数」「Objective-C用のRGB値」のリストを作成しました。 また、16進数をUIColorに変換し出力するツールを公開したので、こちらと合わせて制作を行えばUIデザインを効率よく行えるかと思います。 文末にはおまけでUIColorのRGB指定でのサンプルコードを載せておきます。 更新履歴 [2014.01.10] iOS 7カラーパレットが完成しました。 [2013.12.28] iOS 7で起用されているカラーパレットを追加しました。(現在制作中)

iPhone:iOS端末の共有から「ホーム画面に追加」で表示されるショートカットアイコンをオリジナル画像に変更する

iPhoneやiPad等iOSのサファリから、表示中のWebサイトを「共有」>「ホーム画面に追加」とすれば、ホーム画面にショートカットアイコンが作成されますが、このアイコンが変更できることを知りませんでした。 ショートカットアイコンを変更する オリジナル画像をアイコンとして適用する手順は以下のとおりです。(アイコン画像 apple_touch_icon.jpg を imagesフォルダ にアップロードした場合) アイコン画像(jpg,png,gif,bmp等)を 114×114px 以上で作成し imagesフォルダ へアップロード HTMLの<head></head>内に以下を追加します まとめ 簡単です。何で今まで気が付かなかったのでしょうか(笑) というわけで、早速 sirochro.com のアイコンを変えてみました。 とても良くなりました。