サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
honttoni.blog74.fc2.com
【41】句読点などが行頭に来るかどうか決める line-break 最終更新日：2018年09月25日 （初回投稿日：2018年09月25日） line-breakプロパティは、改行ルール（禁則処理）の厳密さを指定するプロパティ。 「line-break（ライン ブレイク）」とは「改行」の意味です。 このプロパティは CJK（中国語、日本語、ハングル）のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促音（ん ゃ ゅ ょ っ など）も対象です。 自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。 <br>で強制改行した場合は、この改行ルールは適用されません。 この改行ルールを「ゆるい（loose）」から「厳密（strict
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション 最終更新日：2017年11月16日 （初回投稿日：2017年04月22日） SVGアニメーションの続きです。 前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。 本日のINDEX Snap.svg でモーフィングアニメーション クリックでモーフィングするサンプル 連続ループでモーフィングするサンプル モーフィングの応用（他サイト様をメモ） その他 SVGアニメーションのための JavaScriptライブラリ Snap.svg でモーフィングアニメーション Snap.svg は Adobe社が提供しているライブラリです。 これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーシ
【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ 最終更新日：2018年03月28日 （初回投稿日：2016年12月26日） フレキシブルボックスは今のところ勧告候補（2016年記）ですが、それまで下記のように変遷してきました。 box仕様：2009年7月 ドラフト（display: box という形でコンテナを作りました） flexbox仕様：2012年3月 ドラフト（display: flexbox という形） flex仕様：2016年の今現在の 勧告候補（display: flex という形） しかも、↑長い年月をかけて何度も変わってきたので、古めのブラウザは古い仕様に対応していたり、しかもベンダープレフィックスが必要なままだったりします。 じゃあ「どう書けば古めのブラウザにも対応できるのか」について今回まとめておこうと思います。 Flexboxを使ったデモページも
CSSのセレクター（Selectors）の種類と使い方 【65】CSSのセレクターを整理しよう（セレクター 一覧） 【65-1】エレメンタルセレクター（要素名で指定するセレクター） （ちょっとメモ）「,」で区切る「セレクターリスト」 【65-2】結合子を使うセレクター（E F, E > F, E + F, E ~ F） 【65-3】属性セレクター [att] [att="val"] [att~="val"] [att|="en"] 【65-3】属性セレクター [att^="val"] [att$="val"] [att*="val"] 【65-3】属性セレクター [att="val" i] [att="val" s] 【65-3】クラスセレクター（.）と IDセレクター（#） （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター 【66】擬似クラスと疑似要素（2つの違いとそれぞれの
【11-2】marginの auto という値の「？」を解決しておこう 最終更新日：2022年05月13日 （初回投稿日：2015年11月10日） 前回の【11-1】marginと marginのショートハンド に引き続き、今回も margin についてです。 margin の値には、数値の他に auto という値も使えます。 auto（オート）というからにはブラウサが 値を自動的に決めますが、ちょっと変わったルールがあるので注意が必要です。 まず最初に、autoが効くのは ブロックレベルの要素だけです。 インラインの要素にはmarginのautoは効きません。 （＊インライン・ブロックレベルに関しては【9】HTML要素の インライン・ブロックレベル について をご覧ください） というわけで今回はブロックレベルの要素に限っての、margin の autoという値の話です。 margin :
【9】HTML要素の インラインレベル・ブロックレベル について 最終更新日：2018年02月14日 （初回投稿日：2015年09月15日） HTML4以前や XHTML1では、HTML要素をスタイルで分類して、インライン要素 とブロックレベル要素 に区別していました。 この分類方法がHTML5から廃止になり、カテゴリー による分類と コンテンツ・モデル（要素の中にどのカテゴリーの要素を入れてよいか）という規則が新しくできました。 HTML5 の カテゴリー、コンテンツ・モデル についてはこちらをご覧ください。 [37] HTML5要素の「カテゴリー」を見てみよう [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう [38-2] 「コンテンツ・モデル」一覧 ...んですが、（ここからが本題w） メタデータ・コンテンツ以外のどの要素にも、インライン や ブロックなどのブラウザのデ
【13-1】borderと borderのショートハンド 最終更新日：2020年08月26日 （初回投稿日：2015年12月01日） border（ボーダー）は、サイズ（線の太さ）だけでなく 線のスタイルや 色も指定できます。 ですのでショートハンドプロパティもたくさんあって、ちょっとだけ複雑。でも難しくはありません。 ボーダーの指定をするには、ボーダーに用意されている全部のプロパティと値を知る必要があるので、今回は基本からみっちりと見ていきましょう。 本日のINDEX border について border-style さえあればボーダーが表示される borderのプロパティ一覧 スタイルを指定（border-styleの値） border-style のショートハンド 太さを指定（border-widthの値） border-width のショートハンド 色を指定（border-colo
[67]「mediagroup属性」でメディア要素を同期させよう 最終更新日：2019年01月30日 （初回投稿日：2014年01月17日） mediagroup属性は、HTML5.1で削除されました。 現在どのブラウザも実装していませんのでご注意ください。 この記事とサンプルファイルでは、今でも一応使える「mediagroup.js」を併用していますので、その部分を中心に残しておきます。（2019年1月記） メディア要素（<video> と <audio>）の共通の属性 mediagroup属性は、「メディア要素どうしを同期」ができる属性です。 「mediagroup.js」を併用したほうがいいみたい 「mediagroup属性」は、Chrome が対応しています。（2014年1月） ただし、「mediagroup.js」という JavaScript を併用すると、Firefox, Sa
【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け） 最終更新日：2018年03月27日 （初回投稿日：2015年08月22日） CSSのプロパティの値は、ざっと以下の4パターンに分けられます。 サイズを指定するもの（ margin: 2em 、border-width: 3px など単位を付けて） 色を指定するもの（background-color: #f2f5ff 、color: red など） キーワードで指定するもの（ overflow: hidden 、position: absolute など） 角度、時間、解像度、周波数などを指定するもの（これも単位を付けて使います） 今回はこのうち「１」の サイズを指定する ときの 単位 について。 レイアウトの基本になる いろいろな単位を使い分けよう。 本日のINDEX サイズ指定には 相対値と絶対値がありま
<input>の属性一覧 type属性以外もけっこうあります。半分以上がHTML5から加わった属性です。 type="部品の種類" 上記をご覧ください。 name="部品の名前（任意のテキスト）" 受け取る側が各部品を見分けるための名前なので、必ずつけておきましょう。 「部品の名前=データ内容」というカタチでセットで送信されます。 <input type="tel" name="telNumber"> <!--この例なら、「telNumber = 入力されたテキストデータ」で送信されます--> また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。 <input type="radio" name="repeat" value="はじめて">はじめて <input type="radio" name="repeat" value="2回目">2回目
A a [11-1] 他のページにリンクしよう [11-2] リンクの文字の色を変えよう（CSS使用） [11-3] 同じページ内でリンクしよう [11-4] 別のページの特定の箇所にリンクしよう [11-5] 画像にリンクを貼ろう [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用） abbr [29] <abbr>で略語を示そう [30] 定義語を示す<dfn>を、<abbr>や<dt>と一緒に使おう address [17-1] HTML5 の新要素でページ全体を組もう [17-5] ヘッダーの header、フッターの footer、連絡先の address要素 area [61] イメージマップ（リンク領域）を作ろう map要素・area要素 article [17-1] HTML5 の新要素でページ全体を組もう [17-2] セクショニングの article要
<video>要素と組み合わせて、動画に字幕をつけよう <track>要素の src属性で、字幕用のテキストトラックファイル（今回のサンプルは WebVTT形式）を呼び出します。 <track>要素は、HTML5.1 からクロスオリジンが使えるようになりました。 src属性で読み込むテキストトラックファイルは、別のドメインのファイルでもOK だそうです。 kind属性はテキストトラックの種類、srclang属性はテキストトラックの言語コードを指定します。 <video>要素内に <source>要素があれば、その後に <track>を指定します。 代替え用のコンテンツが有る場合は、必ずその前に <track>要素を書きます。 <track>要素は複数入れることも可能です。 その場合は label属性でトラックの名前をつけておくと、ユーザーが選択できるようになります。（日本語と英語の字幕があ
対応ブラウザはコチラをごらんください→Can I use... Support tables for HTML5, CSS3, etc モダンブラウザはだいたい対応しているようです。IEは9から、Android Browser は4.4から対応。 ビューポートってなんだろう？ vw, vh, vmin, vmax のそれぞれの冒頭の「v」は「Viewport」の頭文字。 ビューポートとは、ブラウザの表示領域のことです。 PC用のブラウザならウィンドウサイズ。 タブレットやスマホは、デバイスごとに決められた表示領域があって、機種によって表示領域が違うので「Viewport」という概念が必要になったんでしょうね。 vw や vh の範囲はどんなもんかを調べていたら、有益なコンテンツを見つけました。 [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位... | コ
（ちょっとメモ）Canvasでグラフを自動生成する「flotr2」が便利 最終更新日：2019年02月06日 （初回投稿日：2015年05月25日） Canvasでグラフを生成してくれる javaScriptライブラリ Flotr2 を試してみました。 Flotr2は、折れ線グラフや円グラフなどの20種類以上のグラフを、データを記入するだけで自動的に作ってくれます。パーセントの計算もしなくていいし、グリッドを引くのもオマカセ。頻繁に数値を更新するグラフがあるサイトには最適かも。 Humble software社が開発したライブラリ。MITライセンスです。 Canvasでグラフを描画するのですが、キャンバスのキャの字も出てきません。Canvasをまったく知らなくて使えちゃうw。 ただし、データは javaScriptで入力するので、javaScriptの知識は少しはあったほうがいいかも。 （
[69-8] Canvasでテキストを描画しよう 最終更新日：2019年02月06日 （初回投稿日：2015年01月20日） 今回は、<canvas>要素に「テキスト（文字列）」を描画してみます。 過去記事の「[69-2] canvasに基本的な図形を描こう」で、円グラフの中に文字を入れていますね。今日はその文字の入れ方です。 本日のINDEX テキストは fillText() と strokeText() で指定します フォントスタイル、サイズ、書体、色、線の太さの指定 引数「maxWidth」で最大幅を指定する（省略可能） textAlignプロパティで、横方向（x）の表示位置を指定する textBaselineプロパティで、縦方向（y）の表示位置を指定する 描画した文字列の情報を測定する measureText() measureText() を使って、文字列にアンダーラインや背景ボ
（ちょっとメモ）Canvasで便利な javaScriptライブラリ 最終更新日：2019年02月06日 （初回投稿日：2015年01月23日） Canvasで図形やの描画のソース書いていて「わ〜面倒くさい」と思うことが度々あります。 私はまだ超canvas初心者なので、面倒くさがってる場合じゃないのですが、 Canvasで使える javaScriptライブラリがいろいろあるらしいので、後学のためにメモっておきます。効率良くなるんだとか。 基礎がわかってそこそこCanvas使えるようになったらライブラリも使おっと。 （なんだ〜ヤッパリあるんじゃない、あると思ったわ〜ライブラリ） ヒト様の「まとめ記事」を利用させていただいて、大変恐縮なんですが、 これら↓の記事がいろいろ網羅されているのでメモ。 k.ishiwataさんの WEB PIXEL「HTML5のCanvasを使いやすくするライブラ
[69-12] Canvasをサイトの背景に使おう 最終更新日：2019年02月06日 （初回投稿日：2015年03月20日） ここまで Canvasの基本をいろいろやってみましたが、実際に「Canvasを何に使うか」を考えると、デザイナー的にはサイトの背景に使ってみたいですよね。やっぱり。 これってウィンドウサイズと Canvasサイズを一致させて、一番下に敷くことですよね。それさえできればこっちのもんだ！と試行錯誤した結果をご覧ください。 本日のINDEX Canvasのサイズをウィンドウサイズと一致させる（サンプル1） HTMLとCSSの準備 Canvasにウィンドウサイズを取得する Canvasへの描画 CanvasをjavaScriptで生成する方法（サンプル2） HTMLとCSSの準備 javaScriptで新しくCanvasとdivを作る DOMとノード 新しく作ったdivの
<outoput>は、デフォルトのスタイルは無しです。 CSSを何も指定していないと、こんな ↓ かんじ。（計算結果の表示部分が<output>） ＋ ＝ 0 このページのサンプルは、<output>の部分が分かりやすいようにCSSで背景色などをつけていますよ。 <output>を使ってみよう。まずはname属性を使用 name属性を使う方法で、計算結果を表示してみましょう。 name属性の値によって、数値を入力する部品や<output>要素を特定します。 ●サンプル1 冒頭の「足し算のサンプル」のHTMLソースはこのようになっています。 <form oninput="op1.value = Number(a.value) + Number(b.value);"> <input type="number" name="a" value="0" size="5"> ＋ <input type
[45-3] meta要素の name属性でサイトの情報を指定しよう 最終更新日：2019年07月05日 （初回投稿日：2012年09月27日） 今回は、<meta>要素の「name属性」を使って、色々な情報を指定しましょう。 「name属性」は、サイトの説明文、クローラーへの指示、ビューポートの指定など、あらゆることが指定できる属性です。 必ず「content属性」と一緒に使います。 使用する要素 <meta>要素は内容が多いため 記事を数回に分けています。 [45-1] meta要素で基本情報を指定しよう <meta>要素のルールと、属性のルール [45-2] meta要素の charset属性で文字コードを指定しよう charset属性で文字エンコードを指定します。 [45-3] meta要素の name属性でサイトの情報を指定しよう ←今日はココ name属性でサイトの説明文、クロ
本日のINDEX <button>要素で「テキスト」のボタンを作ろう 属性を何も使わない基本形 「送信ボタン」を複数置くなら name属性と value属性が必要 テキストの一部を<span>要素で囲みCSSを指定 <button>で「画像」を使ったボタンを作ろう <img>要素だけを置いてみる <img>要素とテキストを置いてみる デフォルトスタイルの枠をCSSで消す <button>の見た目をCSSで指定しよう マウスオーバー時の変化を追加 画像を img要素でなく CSSで背景に仕込む javaScriptでキャンセルも（confirm()メソッド） <button>要素の属性一覧 <button>要素で「テキスト」のボタンを作ろう まずは<button>〜</button>の中に、テキストを入れてみましょう。 属性を何も使わない基本形 ボタンの内容がテキストなので、見た目は<inp
（ちょっとメモ）index.html という名のファイル 最終更新日：2017年10月31日 （初回投稿日：2010年10月30日） すっごい基本なのに、書いていなかったことがありました。 [42-3] の「rel="canonical" で優先URLを指定しよう」の箇所で、 「 www. や /index.html の有無によって、同じサイトなのにサーチエンジンに別物のサイトとして見られるような場合」と書いたところ「/index.html の有無って何？」とご質問を受けました。 そこで、「index」という名前のついたファイルについて、メモっておきます。 この記事は、実際は2012年07月にアップしたものですが、 ページ下部の時系列のインデックスから外れてしまうので、投稿日を2010年10月に変更しています。 「デフォルトドキュメント」といいます この「index.html」のように、フ
（ちょっとメモ）属性の「引用符」や「値」の省略について 最終更新日：2018年04月03日 （初回投稿日：2013年11月25日） 属性値の「引用符」を省略できる場合がありますので、その条件をまとめます。 それから「属性値」そのものを省略できる「Boolean属性」というのもあります。 属性値の「引用符」を省略できる場合 引用符とは、「 "（ダブルクォーテーション）」 や「 '（クォーテーション）」のこと 。 HTML4、HTML5は、「 " " 」と「 ' ' 」のどっちで囲んでも良いのですが、 HTML5では「属性値」に下記が含まれていなければ、引用符の省略OK。 引用符を省略できない属性値の内容 空白スペース <（小なり記号 less-than sign） >（大なり記号 greater-than sign） '（クォーテーション） "（ダブルクォーテーション） `（バッククォート）
[49-11] input要素で画像の送信ボタンを作ろう (image) 最終更新日：2018年02月01日 （初回投稿日：2013年09月03日） <input type="image">は、画像を使った「送信ボタン」を作れます。 画像ファイルを使った送信専用ボタンなので、CSSで設定するより手軽に作ることができます。 この type="image" で作れるのは送信ボタンだけ。リセットボタンや汎用ボタンには使えませんので要注意です。 こんな ↑ ふうにマウスオーバーで画像を変化させる事もできます。 これはCSSでなく、インベント・ハンドラ・コンテンツ属性の onmouseover属性と onmouseout属性を使っています。（後半で説明↓） type属性の値 部品の役割 画像なので必ず src属性・alt属性と一緒に使います type="image" は画像ファイルを使うので、必ずs
[69-2] Canvasに基本的な図形を描こう 最終更新日：2019年02月06日 （初回投稿日：2014年03月27日） 今回は、Canvasに基本的な図形を描いてみます。 今回は、四角形、三角形、円弧を作り、色指定（線や、塗りつぶし、色の透明度）もやってみます。応用で、扇型を作り、円グラフも作ってみます。 今回のサンプルはこちら。 （クリックでサンプルが別ウィンドウで開きます） 本日のINDEX Canvas の準備 HTML上に<canvas>要素を作っておきます JavaScriptの実行のタイミングとfunction 複数のfunctionの指定 2Dコンテキストの取得 四角形を描く canvasでの色指定について（線や塗りの色、透明度） 三角形（多角形をパスで）を描く 円弧を描く 度数を ラジアン（radian）へ変換 円弧の応用で扇型を作ろう 扇型で円グラフを作ってみよう
[69-4] Canvasに画像を描画しよう（トリミングやクリッピングも） 最終更新日：2019年02月06日 （初回投稿日：2014年05月31日） 今回は、Canvas に画像（写真）を描画してみます。 トリミングや、クリッピング（切り抜き）もやってみます。 今回のサンプルはこちら。 クリックで別ウィンドウで開きます。 本日のINDEX 画像を原寸で描画する（drawImage(image, dx, dy);） ＊ drawImage() メソッドについて 画像をサイズ指定して描画する（drawImage(image, dx, dy, dw, dh);） 画像をトリミングして描画する（drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);） 画像をクリッピングする（clip(); と drawImage(); ） クリッピングを複数並べる 別
[45-2] meta要素の charset属性で文字コードを指定しよう 最終更新日：2017年12月08日 （初回投稿日：2012年08月30日） <meta>要素は内容が多いため 記事を数回に分けています。 [45-1] meta要素で基本情報を指定しよう <meta>要素のルールと、属性のルール [45-2] meta要素の charset属性で文字コードを指定しよう ←今日はココ charset属性で文字エンコードを指定します。 [45-3] meta要素の name属性でサイトの情報を指定しよう name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。 [45-4] meta要素の http-equiv属性で動作を指示しよう http-equiv属性でページのリダイレクトを指定できます。 [45-5] meta要素で OGPを設定しよう Facebook
[51] セレクトメニューを作ろう（select・option・optgroup要素） 最終更新日：2018年03月28日 （初回投稿日：2013年09月20日） <select>要素で、ユーザにリストから選択してもらう「セレクトメニュー」を作ります。 メニューのリスト（選択肢）には<option>要素を使うので<select>と<option>は必ずセットで使います。また、<optgroup>要素は、リストをグループ分けしたいときに使います。 この<select>要素のいちばんの特徴は、size属性の値によってカタチが変わること！ size属性の値が「1」なら、プルダウンメニューに size属性の値が「2以上」で、リストボックス になります。 size属性は、表示する行数を指定する属性で、デフォルトが「1」です。 なので、size属性を指定しなければ <select>は「プルダウンメニュ
本日のINDEX form要素の中に「フォームの部品」をまとめよう 情報を処理するのは PHP などのファイル PHP（Hypertext Preprocessor）とは CGI（Common Gateway Interface）とは 「action属性」で「送信先のURL」を指定しよう 「method属性」で「送信方法」を指定しよう method="get" method="post" HTTPメソッド（Hypertext Transfer Protocol Method）とは enctype属性でデータ形式を「MIMEタイプ」で指定 HTML5からの変更点 form属性を使って部品を外に出せます autocomplete属性が追加されました novalidate属性が追加されました action属性が必須じゃなくなりました accept属性が廃止されました <form>要素なしで部品だ
[69-3] Canvasに曲線を描こう（線のスタイルも） 最終更新日：2019年02月06日 （初回投稿日：2014年04月15日） 前回は、<canvas>に四角形、多角形、円弧を描いてみました。 → [69-2] Canvasに基本的な図形を描こう 多角形は直線で描きましたね。 今回はいろいろな曲線を描いてみます。 Illustrator などで描く「コントロールポイント」がある曲線です。 その応用で、直線と組み合わせて「角丸四角形」も作ってみました。 Canvas でも Illustrator と同じように「線の太さ」や「先端の形状」なども指定できます。 今回のサンプルはこちら。 クリックで別ウィンドウで開きます。 本日のINDEX 二次ベジェ曲線の基本 二次ベジェ曲線は quadraticCurveTo(cpx, cpy, x, y); 角丸四角形を作ろう（二次ベジェ曲線の応用）
次のページ
このページを最初にブックマークしてみませんか？
『ほんっとにはじめてのHTML5』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
