searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

cancel
プロフィール PROFILE

yuki_hataさんのプロフィール

住所
未設定
出身
未設定

はじめての人のためには、自分がHTMLを覚えた頃を思い出しながら解説しています。 (例えば、a要素の aは anchor アンカー(錨)の a。何の略か知るだけで理解しやすいですよね) HTML5の新要素は、サンプルを作って実験しながら解説。ソースをコピペで利用できるメモサイトを目指しています。

ブログタイトル
ほんっとにはじめてのHTML5とCSS3
ブログURL
http://honttoni.blog74.fc2.com/
ブログ紹介文
サンプルで実験しながらHTML5 & CSS3を解説してます。索引で記事を選べるメモサイトです。
更新頻度(1年)

21回 / 365日(平均0.4回/週)

ブログ村参加:2011/06/06

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、yuki_hataさんの読者になりませんか?

ハンドル名
yuki_hataさん
ブログタイトル
ほんっとにはじめてのHTML5とCSS3
更新頻度
21回 / 365日(平均0.4回/週)
読者になる
ほんっとにはじめてのHTML5とCSS3

yuki_hataさんの新着記事

1件〜30件

  • 【57-3】カラム数と幅をまとめて指定する columnsショートハンド

    columnsプロパティは、column-countプロパティと column-widthプロパティの値をひとまとめに指定できるショートハンドプロパティです。 本日のINDEX columnsプロパティの値 columnsプロパティを使ってみる マルチカラム関連のプロパティは、下記のように記事を分けます。 【57-1】マルチカラムのカラム数を決める column-countプロパティ 【57-2】マルチカラムのカラム幅を決める col...

  • 【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

    column-widthプロパティは、 マルチカラムでの各カラムの幅を指定します。 前回の column-countプロパティでは、このcolumn-widthプロパティは指定していなかったので値はデフォルトの column-width: auto になっていました。 autoだとブラウザが自動でカラム幅を決めてくれます。 column-widthプロパティでカラム幅を指定しても、カラム同士の間隔(column-gap)やコンテナ全体の幅によって、ブラウザは 柔軟にカラム...

  • 【57-1】マルチカラムのカラム数を決める column-countプロパティ

    今回から マルチカラム レイアウト(Multi-column Layout) を使ってみよう。 マルチカラムとは段組みのこと。 ボックスレベルの要素に指定すれば、中のテキストが勝手に複数のカラムになって並ぶという仕様です。 フレックスボックスや、グリッドレイアウト(これはまだ記事にしてません)も、横並びにレイアウトできるヤツですが、親要素の中にある子要素がアイテムになります。 マルチカラム レイアウト は小要素なしで...

  • 【56】ユーザーのテキスト選択などを制御する user-selectプロパティ

    user-selectプロパティは、ユーザーが要素内のテキストや画像をどのように選択できるか指定します。 user-selectは、W3C の Basic User Interface Module Level 4 で登場するプロパティで、2020年4月現在まだドラフトですが、たいていのブラウザがベンダープレフィックスを付ければ反応するようです。(参考:Can I use 2020年4月記) 本日のINDEX user-selectプロパティの値 user-selectプロパティ...

  • 【55】ボックスのリサイズを可能にする resizeプロパティ

    resizeプロパティは、ユーザーが要素のサイズ変更をできるかどうか指定できます。 リサイズ可能にするなら、x軸方向だけか、y軸方向か、どっちとも変更可能かも指定できます。 ただ、resizeプロパティは、IE が未対応。 モバイルは iOS Safari が未対応です。(参考:Can I use 2020年4月記) 本日のINDEX resizeプロパティの値 resizeプロパティの指定サンプル <textarea>要素で試してみた ...

  • 【54】テキストが はみ出る場合に「...」を付ける text-overflow

    ボックス内のテキストがオーバーフロー(はみ出す)している時、「まだ続きがあるよ」という意味で、行末に「...」を付けたりしますね。 こんなかんじで。テキストにまだ続きがあることを示すために「省略符(ellipsis)」を使います。 text-overflowプロパティは、この「...」などの省略符(ellipsis)を付けるかどうか決めるプロパティです。 white-spaceプロパティの値が「nowrap」だったり、長〜い英単語(UR...

  • (ちょっとメモ)テキスト選択時のハイライトを変える ::selection

    テキスト選択時のハイライトなどを、::selection 疑似要素 で変更することができます。 ちなみに、この段落のハイライトカラーを変えています。テキストを選択してみてください。 今回はこの ::selection 疑似要素を使った小ネタをメモっておきます。 本日のINDEX ハイライト疑似要素(highlight pseudo-elements) ハイライト疑似要素で使える CSSプロパティ ::selection を使ったサ...

  • 【53】キャレットの色を変えられる caret-colorプロパティ

    caret-colorプロパティは、名前の通り、キャレットの色を指定します。 「キャレット」とは、テキスト入力時に入力位置を示すもの。 たいていは、縦のラインで点滅しています。 CSS Basic User Interface Module Level 3 ではこのcaret-colorプロパティだけですが、草案中の Level 4 では、caret-shapeプロパティ(キャレットの形状)も加わり、caretショートハンドプロパティも追加されています。将来これ...

  • (ちょっとメモ)Googleフォームで簡単・無料でフォームが作れる!

    Googleフォームは、気軽に無料でフォームが作れるサービスです。 専門知識(HTML、CSS、CGI、PHPとか)がまったく無くても簡単に作れます。 パーティの招待状、アンケートなどの「テンプレート」も用意されています。 フォームは Googleのサーバに置かれるので、自分のサーバのパーミッションとか面倒な設定は一切なし。 フォームを公開する方法も、メールやHTML埋め込みなど複数用意されています。 回答の集計も簡単にで...

  • 【52】カーソルの表示をいろいろ変えられる cursorプロパティ

    今回から、UI(User Interface ユーザーインターフェイス)のためのプロパティを使ってみよう。 最初はcursorプロパティ。これは、名前のまんま「カーソル」の表示を指定します。 <a>要素を使わずに JavaScriptなどでリンクを貼った時、カーソルをではなくにするなどの操作ができます。 また、自分で作った画像をカーソルとして使うこともできます。 cursorプロパティは、当然ですがPCブラウザのみで適用...

  • 【51】テキストの強調マークの位置を決める text-emphasis-position

    text-emphasis-positionプロパティは 強調マーク(emphasis mark = 圏点)の「位置」を指定します。 横書きなら「上」か「下」のどちらか、縦書きなら「右」か「左」かを指定できます。 圏点は、日本語の他に 韓国語・モンゴル語・中国語でも使うそうですが、中国語の横書きの場合は 圏点を「下」につけるらしいです。 text-emphasis-positionプロパティの値は、text-emphasisショートハンドに含まれないので、ショート...

  • 【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis

    text-emphasisプロパティは、text-emphasis-style と text-emphasis-color の値を 一括で指定します。 text-emphasisショートハンドは、Firefox, Safari(iOS Safari も含む)は対応。 Chromeは、ベンダープレフィックス「-webkit-」付きで対応。 IE, Edge は未対応です。(参考:Can I use 2019年11月記) emphasis mark関連のプロパティは、このように記事を分けています。 【50-1】テキストの強調マ...

  • (余談です)クイックスタートのiPhone間直接データ転送(iOS 12.4〜)

    また余談ですいません。 iPhoneのクイックスタートの iPhone間での「直接データ転送」 がビックリするくらいラクだったので、手順をメモっておこうと思います。 (5年愛用した iPhone6 ですが、とうとう限界を感じて 11に買い換えましたww) アプリなどが全部そっくりそのまま移植されるので、すぐに新しい iPhoneが使えます。 ほんっとに何もしなくていい。(自分でアプリを再ダウンロードして設定して...と思ってた) ...

  • 【50-2】テキストの強調マークの色を決める text-emphasis-color

    text-emphasis-colorプロパティは、前回やった text-emphasis-styleプロパティで指定した「圏点」の「色」を指定します。 text-emphasis-colorプロパティは、Firefox, Safari(iOS Safari も含む)は対応。 Chromeは、ベンダープレフィックス「-webkit-」付きで対応。 IE, Edge は未対応です。(参考:Can I use 2019年9月記) 強調マーク(emphasis mark)関連のプロパティは、text-emphasis ショートハンド...

  • 【50-1】テキストの強調マークの種類を決める text-emphasis-style

    強調マーク(emphasis mark)とは、日本語で「圏点(けんてん)」と言って、文章の重要な部分に 1文字ずつ「﹅」などを付けるアレです。 「emphasis(エンファシス)」は「強調・重点」と言った意味。 「圏点(けんてん)」以外に「傍点(ぼうてん)」「脇点(わきてん)」とも言います。 強調のために文字に点を打つのは日本語だけ(?)っぽいです。中国語などで文字に打つ点は発音(イントネーション)のため...

  • (余談です)Wow!ID が au ID になってたけど...すんなり削除できました

    また余談ですいません。 auを解約した後に請求内容を見るために入るはめになった Wow!ID を、 やっと削除できました。 au解約後に Wow!ID なるものに登録しなければならなかった件はこちらに (余談です)Wow!IDとは(au解約後に au IDから移行する) au解約そのものはこちらに記事にしています。 (余談です)iPhone(au)を SIMロック解除してマイネオDプランへ Wow!ID に入ってすぐには「半年後に削除できる」...

  • 【49】アンダーラインの位置を決める text-underline-position

    text-underline-positionプロパティはテキストの下線(underline)の位置を指定します。 このプロパティは、left や right という値もあるので、CKJ(中国語・韓国語・日本語)の 縦書き の時に、ラインを右に引くか左にするかも指定できます。 text-underline-positionプロパティはもともと CSS2 での IE の独自仕様でした。 しかも IE での値は「above(テキストの上または右)・below(テキストの下または左)」...

  • 【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink

    text-decoration-skip-inkプロパティは、テキストのライン装飾が テキストを横切る時、そのまま線を引くか、テキストの部分の線をスキップするか決めます。 これは、text-decoration-skipプロパティの値だった「ink」がプロパティとして独立したもの。 W3C の Text Decoration Module Level 4(ドラフト)で仕様として上がっています。 というわけで、まだ勧告されてはいませんが一応書いておきます。(2019年7月記) ...

  • 【48-1】ライン装飾をしない対象を決める text-decoration-skip

    text-decoration-skipプロパティは、text-decoration で付く装飾ラインの「スキップする(ラインを引かない)」対象を指定します。 text-decoration-skipプロパティは、Text Decoration Module Level 3 勧告候補で一度は仕様に登場しましたが、Level 4 に先送りされました。 Text Decoration Module Level 3 は現時点では勧告候補、Level 4 は初回の草案(First Public Working Draft)です。 というわけでtext-decorat...

  • (余談です)注意|Amazon.co.jp を装った詐欺メールが来ちゃった

    また余談でスミマセン。 Amazon.co.jp を装ったメールで「Amazonログイン」のボタンを、思わず押しちゃった話です。パスワードなどを入力する前に変だと気づきましたが。皆様ご注意ください。 Gmailを Mac OS のメールアプリ(「メール」)で使っています。 で、「メール」内でも、Gmailが迷惑メールだと判断したものは「迷惑メール」フォルダに入るんですが、普通のメールでも迷惑メールになることがあるので一応内容を...

  • [72] デバイスに合わせた画像を表示できる picture要素

    <picture>要素は、HTML5.1から追加された要素です。 picture(ピクチャー)はそのまんま「画像」という意味。 <picture>要素は、<video>要素や <audio>要素と同じように、<source>要素を子要素にして、表示する画像の選択肢を作れます。 子要素には <img>要素も使います。 この <img>要素の表示領域に <source>要素で選択肢にした画像ファイルを表示する仕組みです。...

  • 記事を追加修正しました→(余談です)Wow!IDとは

    下記の記事に ちょっと追加しました。(余談の記事でスミマセン。興味ない方はスルーで) (余談です)Wow!IDとは(au解約後に au IDから移行する) 追加は記事末のこの部分です。 →Wow!ID の削除(9ヶ月後ではできなかった...) スマホの au解約後に、最後の請求額を確認するために au IDから「Wow!ID」に移行する必要がありました。 で、用が済んだので「Wow!ID」を削除しようとしたところ 「約半年間は削除できな...

  • [71] img要素の srcset属性で画像を切り替えよう

    <img>要素には HTML5.1から srcset属性が使えるようになりました。 この属性で複数の画像を指定し、条件に合わせてブラウザに画像を選ばせることができます。 ということで今回は、<img>要素での srcset属性の使い方を サンプルで試してみます。 ★初期の [9-1] 画像を表示しよう img要素 は、HTMLを始めたばかりの方に向けた記事なので、 srcset属性(HTML5.1から追加)については記載していません(...

  • 【47-4】text-decorationショートハンドプロパティでまとめて指定

    text-decoration ショートハンドプロパティは、 text-decoration-line text-decoration-color text-decoration-style の値をまとめて指定することができます。 上記3つのプロパティの記事はこちらです。 【47-1】テキストのライン装飾の種類を決める text-decoration-line 【47-2】テキストのライン装飾の色を決める text-decoration-color 【47-3】テキストのライン装飾を波線にもできる text-decoration-sty...

  • 【47-3】テキストのライン装飾を波線にもできる text-decoration-style

    text-decoration-styleプロパティは、そのまんま「テキストをデコレーションするためのラインのスタイル」を指定します。 ブラウザデフォルトでは、テキストのライン装飾の「スタイル」は 実線(solid) です。これを 波線(wavy) やら 点線(dotted) に変えたりできるってやつです。 text-decoration-styleプロパティは、Chrome, Firefox, Opera は対応。 Safari(iOS Safari も含む)は一部の値に未対応。そ...

  • 【47-2】テキストのライン装飾の色を決める text-decoration-color

    text-decoration-colorプロパティは、そのまんま「テキストをデコレーションするためのラインの色」を指定します。 例えば、<a>要素には、ブラウザのデフォルトで「下線」が付き、色は文字色(<a>のcolor)と同じですが、これを「文字色とは別の色」に変えたい時に使います。 text-decoration-colorプロパティは、Chrome, Firefox, Opera は対応。 Safari(iOS Safari も含む)は、ベンダープレフィ...

  • 【47-1】テキストのライン装飾の種類を決める text-decoration-line

    CSS2までは text-decorationプロパティで、テキストの装飾の種類を指定しました。 テキストの装飾(text-decoration)と言っても「下線」「上線」「取り消し線」のラインだけですけどね。 CSS3(CSS Text Decoration Module Level 3 | W3C 勧告候補)からは、ライン装飾の「色」と「スタイル」も指定できるようになり、 text-decoration-lineプロパティ(ラインの種類) text-decoration-colorプロパティ(ラインの色) t...

  • 【46】テキストの方向性を操作する unicode-bidi と direction

    英語や日本語などの言語は横書きでは「左から右」にテキストが流れますが、アラビア語やヘブライ語などは「右から左」に書きます。 これらを混在させた(英語や日本語の中にアラビア語とか)書字方向が混在しているテキストは「双方向テキスト(Bi-directional text)」や「BiDi(バイダイ)」と呼ばれます。 「双方向テキスト」を正しく処理するアルゴリズムを「双方向アルゴリズム」と言い、ブラウザはこのアルゴリズ...

  • (余談です)Google+ 終了で「Google+1」ボタンを削除しました

    「Google+」終了しちゃいますね。 参考: Google+(個人向け)は 2019年4月2日にサービスを終了します - Google+ヘルプ それに伴い、この「ほんっとに...」から「Google+1」のシェアボタンも外しました。 2019年2月時点で、このシェアボタンを押しても「アクセスできません」的な文言が出てきます。 ついでに↓この記事にも「Google+終了」の注釈を入れました。 (ちょっとメモ)FC2ブログに はてブ と Google+1 の...

  • 記事を追加→【23-2】重なり順のルールと 新しいスタックコンテキストができる条件

    まずは、下記の過去記事を修正しました。 【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ こちらは↑私の詰めの甘さで「位置指定された要素(position値がstatic以外)」のみが新しいスタックコンテキストを作るように書いていましたが、実際には他のプロパティを指定しても新しいスタックコンテキストができます。 コメントを頂いて気が付きましたので、記事を全面修正しました。 また、関連記事を続けて...

カテゴリー一覧
商用