要素を DOM に追加する insertBefore と appendChild の使い方です。 insertBeforeで要素の前に挿入する insertBeforeは指定した要素を現在の要素の子要素として対象要素の前に挿入します。文字だけ見ると要素がいっぱいでてきて混乱してしまいますね。 基本構文は以下の通りです。 var insertedElement = parentElement.insertBefore(newElement, referenceElement) parentElement : 挿入したい位置の親要素 newElement : 挿入したい要素 ( 戻り値 insertedElement も同じ ) referenceElement : この要素の前に newElement が挿入される 例えば以下のような DOM が存在した場合、 <div id="articl
初心者向けにHTMLでnavタグを複数使用する時の注意点について解説しています。ナビゲーションを扱うnavタグの基本の書き方、適切な使い方について説明します。サイト構造の根幹となる部分なのでしっかりと理解しておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 HTMLでnavタグを複数使用する時の注意点について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
2012年08月16日21:30 カテゴリTipsLightweight Languages Tips - MarkdownをHTMLにembedする Markdownの最大の特徴は、「HTMLをembedできるマークアップ言語」であること。 Daring Fireball: Markdown Syntax Documentation For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags. それでは逆にHTMLにMarkdownをem
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
HTML5アプリケーションフレームワークのSproutCore開発チームは4月20日、最新版「SproutCore 1.5」を公開した。ビューレイヤーを定義する「TemplateView」などの新機能が導入されている。 SproutCoreはHTML5 Webアプリケーションフレームワーク。特定のWebブラウザプラグインに依存することなく任意のWebブラウザで動作する、レスポンスの高いWebアプリケーションを開発できるという。Rubyで実装されており、RubyGemを利用してインストールが可能。ライセンスはMIT license。米Appleの「MobileMe」などでの採用実績がある。 SproutCore 1.5はバージョン1.4.5公開から4ヵ月ぶりのアップデートとなる。新機能として、アプリケーションのビューレイヤーを定義する「TemplateView」が加わった。TemplateV
説明 スタイルシートを使って文字に取り消し線を付けるにはtext-decorationプロパティにline-throughを指定します。 サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>Sample</title> <style type="text/css"><!-- .importText { text-decoration:line-through; } --></style> </head> <body> <h1>Sample</h1> <p> 年収<span class="importText"
2023.03.01 ホームページが公開されました。 2023.03.01 ここにお知らせが入ります。 2023.03.01 ここにお知らせが入ります。 ☆幹事さんに朗報です☆ ●月●日までに●名様以上でご予約いただいた団体様は、合計金額から●％オフ！ ☆お得なコース料理も準備☆ AAAコース（２時間飲み放題付）・・・●●●●円 BBBコース・・・・・・●●●●円 CCCコース・・・・・・●●●●円 ご予約はお電話または、下記の問い合わせフォームからお願いいたします。 ※問い合わせフォームからのご予約は、宴会日の２日前まで受け付けます。 当店では、●名様までの貸切パーティー・結婚式２次会が可能です。 ＡＡＡコース ●時間 ●●●●円～ ＢＢＢコース ●時間 ●●●●円～ ＣＣＣコース ●時間 ●●●●円～ いずれも飲み放題付。お料理のメニューは、ご相談に応じます。 ☆店内見学ＯＫ！☆ ※ご
scheme属性を使用すると、content属性の値に関する追加的な情報（形式）を指定することができます。 例えば、content="08-08-08" となっていた場合、どれが月でどれが日なのかが不明瞭です（国によって日付の表記方法が異なるので）。このような場合にscheme属性を使用すると、以下のように年月日の部分を明確化することができます。 <meta name="date" content="08-08-08" scheme="Year-Month-Day"> 日付は以下の形式で指定することもできます。 <meta name="date" content="2008-09-05T00:00:00+09:00"> YYYY-MM-DDThh:mm:ssTZD YYYY = 年 MM = 月 DD = 日 T = （固定） hh = 時 mm = 分 ss = 秒 TZD = +09:
様々な要素が追加・削除され、HTML4以前とは大きく環境が変化すると話題のHTML5。そこで、HTML5とHTML4を比較し、変更される点などをこれから数回に分けてご紹介していきたいと思います。今回はレイアウト要素編です。 header要素、footer要素 一般的なレイアウト手法に従ってレイアウトされたサイトには、ヘッダとフッタと呼ばれる本文とは別の部分が存在します。ヘッダはサイト上部に位置し、主にロゴや内容紹介といったイントロダクション要素、またメニューなどのナビゲーション要素が配置される部分であり、一方のフッタはサイトの下部に位置し、コピーライトや、関連ドキュメントへのリンクなどが配置される部分となります。 HTML4以前では、これらが公式に区別されたり、サポートされるということはありませんでした。つまり、ヘッダやフッタを作成するにしても、
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
私のブログはMovableTypeを利用しているのですが、これまで、ブラウザによっては文字化けするようで、その原因が不明でした。しかし、先日あることに気づき、実践してみたところ文字化けが解消されました！それは至って単純なことでしたが、意外と落とし穴なのではないのかと思い、メモっておきたいと思います。 文字化けの原因はこれ 文字コードを指定するmetaタグの位置が重要文字コードはmetaタグで指定すると思いますが、私も「meta http-equiv="Content-Type" content="text/html; charset=UTF-8"」このように設定していました。しかし、一つ重要なことが…「meta name="keywords"」や「meta name="description"」の前に置くことが重要なのです。これまで私は逆にしていました。（×の例のように） ×の例では、ke
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
↓画像のようにエクセルデータをコピペするだけでOKです。 バイナリデータのタブ区切りで認識しているみたいです。 生成されたタグ 厳密に言うと、HTMLタグとCSSが生成されます。 CSSは <head> </head> 間か、外部ファイルに移しても良いかもしれませんね。 <style type="text/css"> table.tableizer-table {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;} .tableizer-firstrow td {background-color: #FDA500; color: #
本サイト以下のコンテンツでは一切画像を使用いたしておりません。 テーブルアートのページ ここはテーブルタグだけで画像のまねごとをしてしまおうという、 意味ありそうで実はあんまり無いコーナーです。見えるのは作者の根性くらい！？ ■ 著者の作品 （魂が揺さぶられた時に更新されます） イントロダクション（テーブルタグだけで作った、普通の作品） テーブルタグてきとう講座（TR,TDの使い方について） テーブルアート作品例（１）（マリオブラザーズ・・・一枚絵な作品１号） テーブルアート作品例（２）（イギリス国旗・・・斜め線なんて書くもんじゃないです） テーブルアート作品例（３）（マリオブラザーズ[２]・・・一枚絵としては一番凝ってる！？） テーブルアートアニメーションVer.1（GIFアニメに対抗か？ - DHTML使用/IE版） テーブルアートアニメーションVer.2（静止画
JavaScript / ECMAScriptについて。 Webアプリケーションでは，基本的にサーバでページを生成するが，JavaScriptをうまく活用すると，サーバへのアクセスを減らしつつ，利用者にとっての操作性を上げることができる。 React / Next.js by Examples 各種サンプルプログラム. 現代の JavaScript 再入門JavaScript: 字句構造, リテラル JavaScriptの文法、オブジェクト指向言語としての機能などを解説。 再入門JavaScript: 式と文 制御構造、変数のスコープなど。 再入門JavaScript: 数値 (Number) 不思議な真偽値 null, undefined だけではない。 再入門JavaScript: For文とイテレータ 型やクラスが何か判別 型とクラスをめぐるいろいろ。 関数の引数 - 可変長, キー
はじめに ご使用上の注意 (1) 主な更新履歴 (25) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (402) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (42) TypeScript (1) Java (26) Perl (6) PHP (14) Ruby (11) Python (14) Go言語
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
