HTML特殊文字コード表HTMLやXMLで使用されるエンティティ参照（Entity References）の表記方法です。 ブラウザの種類（バージョン）によって表示されないコードもあります。 これ以外のコードは次の10進数コードによる表を参照してください。
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack
企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類（アウトライン・ブロークン・デュオトーン）で、美しく精密にデザインされたアイコンです。 Freebie SWM Icon Pack アイコンの特徴 アイコンのダウンロード ダウンロードできるアイコンの種類 アイコンの特徴 SWM Icon Packは、WebサイトやスマホアプリのUIに使用されるSVGアイコンのセットです。アイコンは24pxのグリッドに基づいたピクセルパーフェクトで、ベクターで作成されています。 Freebie SWM Icon Pack アイコンは8つのカテゴリに、全296種類。
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
Vimeo動画をWordPressサイトに埋め込む方法
Vimeoとは？ Vimeoとは、動画共有サービスで、YouTubeと同様にユーザーが制作した動画を共有することができます。YouTubeとの違いは、他者の作品をアップロードすることを禁じていることから、クリエイターなどの高クオリティーな動画が数多くアップロードされています。 ログイン後、「動画」一覧選択 ログイン後（アカウントを持っていない方は、無料会員登録が必要です）、アイコンから「動画」を選択します。 「設定」を選択 アップロードされた動画一覧が表示されます。埋め込みたい動画の「設定」を選択します。 「埋め込み」を選択 サイドメニューより「埋め込み」を選択します。 「埋め込みコード」を選択 「埋め込みコード」ボタンを選択しましょう。（※右側のプリセット作成とは、埋め込む動画の表示をカスタマイズできる機能ですが、Basicプランでは選択ができませんのでご注意ください。） 埋め込みコード
サーバーのアップロードファイルの最大容量の確認と容量制限の変更｜PHP工房
サーバーのphp.iniによるアップロードファイルの最大容量の確認と容量制限の変更 現在ご使用のサーバーのphp.iniの設定を確認する必要があるので、まず以下のソースコードをテキストファイルに記述し、適当な名前（たとえばinfo.php）を付けて拡張子を.phpにし、サーバーのどこでも良いのでアップロードして（できればプログラムを設置する階層に）ブラウザでアクセスして下さい。（これは現在のサーバーのphp.iniの設定を確認するためのファイルです） または以下にファイルを置いてましたのでダウンロードして解凍し、そのままアップロードください。 info.phpのダウンロード <?php phpinfo();?> ※確認や変更などのひと通りの作業が終わったらこのファイルはサーバー上から削除下さい。セキュリティ的に即問題となるようなことは基本ありませんが。 以下の様な画面が表示されます。ここに
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
コピペで使うマウスオーバー時のhover cssエフェクト28選 | SONICMOOV LAB
これまでにもCSSに関する様々なエフェクトを紹介しましたが、今回はマウスオーバー時のアニメーションに関する良さげなものをピックアップしてみました。 関連 使える！CSSアニメーション 20選 様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なホバーエフェクトがまとめられています。 スライドするButton Hover Effects これもボタンに関する様々なホバーエフェクトです。 グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。 様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピア、透明度、フラッシュ、シャイン、サークル等、画像をマウスオーバーした時のエフェクトが
Glass Morphism
Glass Morphism Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
背景画像スライダーでよく使う3つのパターン | okuden-labo
クライアントからの要望で、画面の横幅いっぱいを使った画像のスライドにしてほしいと言われることが多く、いろいろと調べてみると、大まかに下記の3パターンの背景画像スライダーが存在することが分かりました。 概要とともにサンプルページも作成してますので、ご参考ください。 全画面表示 画面上部に表示：背景画像の縦横比が同じ 画面上部に表示：背景画像の高さを固定 なお、今回利用してるスライダーはjQueryプラグインのjQuery.BgSwitcherです。背景画像をスライダーを作成するなら、とても使い勝手が良いので利用させて頂きました。 1.全画面表示 表示領域に対して縦横100％で表示すると、全画面表示になる。 画像は横900px縦600pxを利用。 スライダーのサンプル1 CSS html, body { height: 100%; margin: 0 !important; padding:
【CSS】CSSだけで作るドロップダウンメニュー（多階層）
【CSS】CSSだけで作るドロップダウンメニュー（多階層） 公開日:2019/06/13 /最終更新日:2019/06/30 CSS Technique 今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。細かく分けて解説入れながらやっていきますので、「うんちくなんいかいらない！」という方は、最後までジャンプしてください。最後に全てのコードを記載します。 親階層 まずは親階層です。 HTML <ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a
【CSS】Flexboxの使い方を基本から徹底解説！レイアウトがとっても簡単に！
【CSS】Flexboxの使い方を基本から徹底解説！レイアウトがとっても簡単に！ 公開日:2018/05/21 /最終更新日:2020/06/05 CSS PICKUP Technique flexboxとは flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在（2018年5月現在）では、ほとんどのブラウザにサポートされています。 flexboxの基本的な使い方 それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。 flexコンテナー flexコンテナーは下記に記載するflexアイテムを
レスポンシブに対応できてCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい
ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応できて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に短し襷に長し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できるものは利用したい。 で、やっと「これなら！」というやつに出会いました。 Slider ProというjQueryのプラグインです。なかなか良さそうです。 ただ、使ってみてハマったところがいくつかあったので書き残しておきたいと思います。 「jQuery オワコン 」がうたわれる昨今ではありますが、今後、Slider Proを使ってスライダーやカルーセルを実装する方の参考になれば幸いです。 Slider P
PHPスクリプトの実行時間を制御する(max_execution_time) - hogehoge foobar Blog Style Beta
PHPで処理に時間のかかるスクリプトを実行すると以下のようなエラーメッセージが表示される場合があります。 Fatal error: Maximum execution time of 60 seconds exceeded (日本語訳 -> 致命的な誤り: 超えられていた最大60秒の実行時間) 簡単に言うと、「60秒待ったけど応答が戻ってこないからタイムアウトエラーにします。」という感じです。 これを解決するにはPHPの設定オプションである「max_execution_time」の設定値を変更します。 php.iniで設定する 「max_execution_time」はphp.iniでデフォルト値が設定されています。 デフォルトは60秒なので、これを120秒や180秒にすることで、タイムアウトまでの時間を延ばす事が出来ます。 0秒を指定した場合は、「タイムアウトをしない」という設定になり処
PHP工房｜フリー（無料）版、多機能プロ版のPHPプログラム、CMSを配布しています
PHP工房とは・・商用サイトに最適なPHPプログラムを配布、カスタマイズ、及び制作を行っています メールフォーム、ニュースCMS、写真ギャラリーCMS、カウンター系、カレンダーなどをメインに現在のホームページに組み込める様々なPHPプログラムを配布しています。PEARやその他特殊なライブラリ、データベース等は一切不要です。 データ保存が必要なプログラムはすべてテキストファイルでのデータ保存形式を採用しているので、設置が容易でサーバー間の問題も起きにくいため、サーバー移転時も全ファイルをそのまま移動するだけで簡単に移行可能です。 サーバーの要件は基本的に「PHPが動作すること」だけです。 レンタルサーバーであればPHPはほぼ100％動くでしょう。 プログラマー目線の自己満足的なものや、「そこは普通に考えてそうじゃないだろ～」的なもの、またややこしいプログラムが世の中には数多く存在しますが、W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する
幅広いビジネスシーンで活用できる動画配信プラットフォーム「Vimeo」の使い方 - Hashikake [ハシカケ]![幅広いビジネスシーンで活用できる動画配信プラットフォーム「Vimeo」の使い方 - Hashikake [ハシカケ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5787663593e43a622007cbdb1b0a17c69654262c/height=288;version=1;width=512/https%3A%2F%2Farticle-image.hashikake.jp%2Fuploads%2Farticle%2Fthumbnail%2F88%2Fd28940ed-b3cf-4ead-ba6c-7997175f4d19.jpg)
metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags
