サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
honttoni.blog74.fc2.com
【22-4】スクロールしていくとピタッと固定する position: sticky 最終更新日:2017年11月16日 (初回投稿日:2017年08月23日) 今回は position: sticky を使ってみます。 これは positionプロパティの値の中でもまだドラフトの値ですが、いろいろ活用できそうです。 本日のINDEX position: sticky は相対位置と固定位置の組み合わせ <dl>リストの<dt>で使うとイイかんじな position: sticky サイトのメニューに使ってもオモシロイ position: sticky position: sticky のブラウザ対応状況 IE、Android4でも使えるJSライブラリ「Fixed-sticky」 positionプロパティ は、記事を4つに分けました。 【22-1】位置指定の positionと top, r
【23-2】重なり順のルールと 新しいスタックコンテキストができる条件 最終更新日:2019年01月26日 (初回投稿日:2017年09月07日) 前回の z-indexプロパティでスタックコンテキストという概念が出てきました。 (前回はこちら→【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ) 今回はその スタックコンテキストについてもう少し詳しく調べてみました。 スタックコンテキストじゃない要素も含めて、各要素にはあらかじめ重なり順のルールが決まっているんだそうです。 また、位置指定以外の 新しいスタックコンテキストが生成される条件についてもメモっておきます。 ●本記事は、2019年1月に投稿したものですが、時系列的に z-indexプロパティの記事の直後に読んでいただくために 初回投稿を2017年9月に操作しています。ご了承ください。 本日のINDEX 重なり
【11-1】marginと marginのショートハンド 最終更新日:2017年11月13日 (初回投稿日:2015年11月04日) 今回から margin(マージン)プロパティについて。 margin は、CSSレイアウトですっごくよく使いますが、これがけっこうクセ者です。 autoという値・ネガティブマージン・相殺(マージンどうしの結合)など、marginだけの独特のルールがあるんです。 それを知らないままだと、いつまでもCSSで手こずるハメに。(経験者は語るww) そんなわけで、marginでぜひ覚えておいたほうがイイことを、これから4回に分けて書いていきます。 今回は、けっこう簡単な margin のショートハンドについて。 ショートハンドの書き方の基本を見てみましょう。 margin は上下左右にありますので margin-top margin-bottom margin-lef
[69-9] Canvasでグラフィックスの変形をしよう(拡大・回転・移動・反転など) 最終更新日:2019年02月06日 (初回投稿日:2015年02月02日) これまでは、Canvas に基礎的なグラフィックスを描いてみました。 四角形・三角形(直線)・円弧、ライン(曲線)、画像、テキストをやってみましたね。 今回は、Canvas に描画したそれらのグラフィックスを変形させてみます。 Canvas にはグラフィックスの座標を自動的に変換するメソッドも用意されていて、拡大・回転・移動・反転などはそれを利用します。 これまでいろいろ描画してみて、1度指定した「状態」は、指定を変えない限り、ずっと影響し続けることがわかりました。 (「状態」とは具体的には、線や塗りの指定、透明度の指定、線のスタイルの指定、クリッピング領域の指定、シャドウの指定、重なり合った描画領域の指定、フォントの指定です。
【32】インラインの縦方向の整列を決める vertical-alignプロパティ 最終更新日:2018年06月02日 (初回投稿日:2018年06月02日) 今回は、vertical-alignプロパティについて。 このプロパティは過去記事にもよく登場してきましたが、これは要素の垂直方向(縦方向)の整列の仕方を指定するプロパティです。 vertical(バーティカル)は「垂直の」、align(アライン)は「整列させる」という意味。 ちなみに、水平方向(横方向)の整列の仕方を決めるには text-alignプロパティを使います。 これは次回記事にします。 vertical-alignプロパティは、覚えておかなきゃならない特徴が2つあります。 1つめは、 インライン要素(spanやimgなど)と テーブルセルの要素(thやtdとか)にしか指定できないこと。ブロックレベルの要素に指定しても無効。
(余談です)クイックスタートのiPhone間直接データ転送(iOS 12.4〜) 最終更新日:2019年10月17日 (初回投稿日:2019年10月17日) また余談ですいません。 iPhoneのクイックスタートの iPhone間での「直接データ転送」 がビックリするくらいラクだったので、手順をメモっておこうと思います。 (5年愛用した iPhone6 ですが、とうとう限界を感じて 11に買い換えましたww) アプリなどが全部そっくりそのまま移植されるので、すぐに新しい iPhoneが使えます。 ほんっとに何もしなくていい。(自分でアプリを再ダウンロードして設定して...と思ってた) なんてラクなんだ!クイックスタート最高!って思いましたw 本日のINDEX 直接データ転送は iOS12.4以降 忘れちゃいけないLINEの引き継ぎ準備(旧iPhone) メールアドレス・パスワード・電話番号
(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた) 最終更新日:2017年11月28日 (初回投稿日:2017年11月17日) 本サイトの シンタックスハイライターを Prism(プリズム)に乗り換えました。 これまで SyntaxHighlighter 3.0.83 を使っていましたが、順次差し替える予定です。 Prism は こんなかんじ。 <!--HTMLの場合--> <pre class="line-numbers"> <code class="language-markup">some HTML code</code></pre> <!--CSSの場合--> <pre class="line-numbers"> <code class="language-css">some CSS code</code></pre> Prism は 設置も簡
【27】フォントサイズを調整する font-size-adjustプロパティ 最終更新日:2019年07月03日 (初回投稿日:2018年04月14日) 今回からしばらく、フォント関連の新しいプロパティが続きます。 font-size-adjustプロパティは、どのフォントでも文字サイズが同じようになるよう調整し、小さな文字でも読みやすくするプロパティです。 adjust(アジャスト)は「調整する」と言う意味。 これは欧文フォント用のプロパティ。大文字・小文字の区別がない日本語フォントには関係ない機能です。 このプロパティは、W3C Fonts Module Level 3(勧告候補)に入っていますが、今のところ Firefox しか実装していません。(2018年4月記) Chrome は標準では未実装ですが、フラグ(experimental Web Platform features =
(ちょっとメモ)@font-face で Webフォントを使おう 最終更新日:2019年07月03日 (初回投稿日:2018年04月03日) 今回は、CSS の @font-face を使ってみましょう。 これは、@規則と呼ばれるものの1つで、外部のフォントデータを読み込んだり(いわゆる Webフォントってやつ)、システム内のフォントデータを呼び出したりできます。 本日のINDEX CSSの @-規則(CSS At-rules) @font-face の使い方 最小限「font-family」と「src」を指定する src には「url」と「local」がある その他の記述子 @font-face は「同一ドメイン制限」がある Google Fonts で Webフォントを使おう Google Fonts には日本語フォントもある 参考: ・@font-face - CSS | MDN ・
(ちょっとメモ)サイズ指定で使う値について (min-content, repeat( ) ) 最終更新日:2021年09月30日 (初回投稿日:2021年01月14日) 前回やった grid-template-rowsと grid-template-columnsプロパティは、Grid Layout(グリッドレイアウト)のトラックサイズを決めるものでしたね。 その指定のときに使う値あたいを知っておく必要があるので今回の記事にまとめました。 これらの値は Grid Layout だけでなく他の要素のサイズ指定に使えるものもあります。 本日のINDEX トラックサイズを指定するための値 <length> や パーセンテージ 単位「fr」を使った柔軟なサイズ指定 max-content min-content fit-content( ) repeat( ) repeat( ) の auto-
【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう 最終更新日:2018年02月20日 (初回投稿日:2018年02月13日) 前回は clip-pathプロパティの <basic-shape>(基本シェイプ)を使いました。 今回は、SVGで切抜き用のパスを作って clip-pathプロパティで呼び出してみます。 <basic-shape>(基本シェイプ)は、四角形、円形、ポリゴンが用意されていましたね。 これだけでもけっこうイケそうだけど、曲線と直線が組み合わさった形(例えばクローバーとか)は無理です。ロゴマークなどの複雑な図形で切り抜きたい場合も基本シェイプだけでは不可能。 それが、SVGなら可能になります。 本日のINDEX SVGの <clipPath>要素でクリッピングパスを作ろう 複数のパスを同時にクリッピングパスとして指定する SVGならテキストでも切
【2】CSSはどうやって使うの?(基本構造とCSSを置く場所について) 最終更新日:2022年11月10日 (初回投稿日:2015年07月27日) 今回は、CSSの基本の「書き方」や「HTML上に置く場所」を見てみよう。 本日のINDEX CSSの基本構造 1つのセレクタに 複数のスタイルを指定する方法 複数の「セレクタ」を指定する方法 CSSのコメントの書き方 CSSを置く場所 <style>要素でHTMLの<head>内に直接書く 外部ファイルにして<head>内に<link>要素で読み込む 各要素にインラインで書く <style>要素で<body>内に書く(5.1仕様外) CSSの基本構造 CSSは、セレクタ { プロパティ : 値 } というカタチが基本です。 この要素の { このスタイルを : こうする } という ブラウザに向けての指令です。 プロパティと値の間は「:(コロン)
【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 など) 角度、時間、解像度、周波数などを指定するもの(これも単位を付けて使います) 今回はこのうち「1」の サイズを指定する ときの 単位 について。 レイアウトの基本になる いろいろな単位を使い分けよう。 本日のINDEX サイズ指定には 相対値と絶対値がありま
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ 最終更新日:2021年09月30日 (初回投稿日:2021年02月09日) grid-template-areasプロパティは、Grid Layout のエリアに好きな名前を指定することができます。これは Gridコンテナ側に指定します。 Gridアイテム側で grid-areaプロパティでエリア名を書くことで、簡単にアイテムを配置できます。 grid-template-areas と、最後の areas が複数形になっていることに注意。 複数のエリアを指定するから。「s」を書き忘れると何も起こりません。 一方のアイテム側で使う grid-area は単数形で「s」がありません。1個ずつのエリアの指定だから。 本日のINDEX grid-template-areas の値 grid-template
【17-3-2】テーブル関連の要素のためのCSSプロパティ 最終更新日:2018年06月02日 (初回投稿日:2016年05月06日) 前回は、テーブルじゃない要素に display: table や display: table-cell を指定して、まるでテーブルのように表示させましたね。 今回は テーブル関連のためCSSプロパティをまとめます。 displaypプロパティの流れの途中ですが、今回は displayから一旦離れて、テーブル用のCSSプロパティの話です。 margin、padding、border(displayもね)など、たいていのHTML要素に使えるプロパティがある一方で、特定の要素にしか使えない、その要素専用のプロパティもあります。 テーブル用のプロパティもそれ。テーブル関連要素でしか使いません。 テーブル関連の要素はスタイルもけっこう特殊です。 例えば、テーブルで
[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(); ) クリッピングを複数並べる 別
【26-6】line-heightプロパティで 行間(行の高さ)を指定しよう 最終更新日:2018年03月31日 (初回投稿日:2018年03月27日) 文章を表示する時、行と行の間が空いているか、詰まっているかで、印象や読みやすさが違います。 そんな行間(行の高さ)を指定するには line-heightプロパティを使います。 本日のINDEX line-heightプロパティの値 line-height の値は「単位なし」がオススメ line-height の構造 ブロックレベルの要素での line-height の構造 非置換インラインの要素での line-height の構造 置換インラインの要素では line-height は無効 フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最
[70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト 最終更新日:2017年11月15日 (初回投稿日:2017年05月08日) 複数のSVG画像のコードを1つにまとめておいて、HTML上で個別に呼び出すことを、 SVGスプライト(SVG Sprite)というと言うんだそうで、今回はこれを使ってみます。 SVGはコードが長くなりがちなので、同じ図形を何度も使う場合、使用する箇所ごとにいちいち同じコードを書くのは面倒。 そこで、SVGをまとめて書いておき、図形を貼りたい箇所で呼び出すようにすれば、何度も同じコードを書かなくて済み、編集もラクになるというわけです。 アイコンなどページ内で同じものを何度も使うなら、SVGスプラウトにしたほうが便利です。 SVGスプライトは、<body>直下にジカに書く方法と、SVGを外部ファイルにして呼び出す方法があるそうなんですが、今回は
【41】句読点などが行頭に来るかどうか決める line-break 最終更新日:2018年09月25日 (初回投稿日:2018年09月25日) line-breakプロパティは、改行ルール(禁則処理)の厳密さを指定するプロパティ。 「line-break(ライン ブレイク)」とは「改行」の意味です。 このプロパティは CJK(中国語、日本語、ハングル)のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促音(ん ゃ ゅ ょ っ など)も対象です。 自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。 <br>で強制改行した場合は、この改行ルールは適用されません。 この改行ルールを「ゆるい(loose)」から「厳密(strict
【25-1】切り抜き(クリッピング)のための新プロパティ clip-path 最終更新日:2018年02月20日 (初回投稿日:2018年02月03日) 前回の clipプロパティは、いずれ廃止される予定で、それに代わる新しいプロパティが clip-path です。 clip との違いは、四角形だけじゃなく円形・ポリゴンなど、いろんなシェイプで切り抜けること。SVGで作った複雑なシェイプでの切抜きもできます。 clip-path はまだ「勧告候補」。 今のところ Firefoxのver.54 以降は実装。 Chrome、Safari は一部の機能を除いて実装しているようです。 本日のINDEX clip-path の値 clip-path のブラウザの対応状況 CSSの基本シェイプで切り抜こう inset() で四角形で切り抜く 切り抜いた余白の処理をするには、やはりネガティブマージン c
【21】floatプロパティと clearプロパティ。そして Clearfixについて 最終更新日:2017年11月16日 (初回投稿日:2017年06月01日) 今回は、floatプロパティと clearプロパティについて。 floatプロパティは、要素を右か左に動かして、そのあとに続く他の要素を反対側に回り込ませることができます。 float は一度指定すると、その後に書いた要素にず〜っと影響し続けるんですが、その影響を終わらせるのが clearプロパティ。フロートをクリアするためのプロパティです。 float はけっこうクセがあるので、それを知らないまま使うとけっこう面倒なことになります(笑) 今回はそこらへんを順を追って説明していきます。 そして、float を使うなら Clearfix も知ってると絶対便利なので、それについても解説します。 本日のINDEX floatプロパティ
【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ 最終更新日:2019年01月26日 (初回投稿日:2017年09月06日) 今回は z-indexプロパティ を使ってみましょう。 z-indexプロパティ は、要素の表示の重なり順を変えたいときに使います。 これがまた、けっこう ややっこしいルールがありますので、じっくり見ていきましょう。 ● 2019年1月:このページは「スタックコンテキストの生成」について誤った表記があったので全面修正しました。 また「要素の重なり順」についての補足情報を新しい記事にしましたので、本記事と合わせてご覧ください。 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件 本日のINDEX z-indexプロパティの値 値の数値の大小で表示の上下関係を指定する z-indexの「マイナスの値」は要注意 スタックコンテキ
[70-3] CSSだけで作る SVGのドローイングアニメーション 最終更新日:2017年11月16日 (初回投稿日:2017年03月28日) SVGはベクター画像なので、アニメーションにしても滑らかで美しく、サイズも軽めです。 ということで今回は、SVGアニメーションを作ってみます。 SMILってのもあるけど、将来廃止されるかもしれない... SVGアニメーションのために SMIL(スマイル)というモノがあります。 SMIL(Synchronized Multimedia Integration Language) XMLベースのアニメーションのための言語。<animate>要素などを使ってSVGアニメーションを作れます。(参考 - SMIL Animation - W3C Recommendation 04-September-2001) ですが、これを IEは一度もサポートしたことが
OpenTypeフォントとは OpenTypeフォント(Open Type Font = OTF)は、デジタルフォントの規格です。 デジタルフォントは、大昔は等幅のビットマップフォントだけでした。文字コードは ASCII だけの時代です。 その後1990年代はじめ、Adobe の PostScript(ポストスクリプト = PS )、Apple の TrueType(トゥルータイプ = TT )といった「アウトライン情報を持つフォント」が登場しました。 OpenType は、Microsoft と Apple が共同開発した規格で「TrueType を発展させ、PostScriptフォントのアウトラインデータも収録できるようにしたもの」だそうです。 Unicode に対応し、6万個以上の字体を収録した、多言語に対応できるんだって。 同じフォントを、Win・Mac・インクジェットプリンタ・ポ
(ちょっとメモ)テーブルをレスポンシブ対応させるCSS 最終更新日:2017年10月31日 (初回投稿日:2011年07月06日) テーブルをスマホなどの表示領域の狭いデバイスで見ると、とても見にくいですね。 幅が狭い中に 何カラムも入って、1行の文字が1文字になったり...。 コレを解消するため、スマホでは 1カラムのテーブルに表示する方法をご紹介します。 CSS のメディアクエリ(Media Queries)という機能を使います。 使用する属性 ● この記事は、2017年10月4日に書いたものですが、テーブル関連の記事なので、時系列的に読みやすくするため、初回投稿日を 2011年7月6日に操作しています。ご了承ください。 サンプルファイルを用意しました 今回は、外部にサンプルファイルを用意しました。 PCのかたは、ウィンドウ幅を小さくして見てみてください。 (画像クリックで別ウィンドウ
次のページ
このページを最初にブックマークしてみませんか?
『ほんっとにはじめてのHTML5』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く