登録不要で完全無料！ブラウザだけで完結する静的サイトジェネレータ「T3MPL」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
[CSS] button要素のスタイルシート、最新テクニックを徹底解説
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの
![[CSS] button要素のスタイルシート、最新テクニックを徹底解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9ba8b37585d86205a71d0de6b3c024cd8265254/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202001%2F2020031410.png)
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
font-feature-settingsが効かない時の確認点 - Qiita
font-feature-settingが効かない時に確認する点をまとめました。 1. 見ているブラウザに対応していない？ 2019年3月現在、ほとんどのモダンブラウザに対応しています。 IEですら、10から対応しているので、 閲覧しているブラウザのバージョンが古いことで 効いていないというのは考えにくいでしょう。 Can I use... font-feature-settings https://caniuse.com/#search=font-feature-settings 2. ベンダープレフィックスが足りてない？ -webkit-font-feature-settings: "palt"; これだけ付与していれば大丈夫。 この記事を参考にしています。 ベンダープレフィックスを検証したい場合に https://qiita.com/syo24/items/aa7cd9e7409d1
知っておきたい！新旧ブラウザの見え方を最適化する「プログレッシブ・エンハンスメント」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※2016年2月末時点 対象環境って？ OS、ブラウザ、バージョンというものがあり、これらの組み合わせで対象環境を定義します。では、そもそも環境が違うと何が違うのでしょうか。 IE8とChrome最新版で見比べてみる 今回紹介するのは、ここ数年ですっかり定着してきたCSS3という技術を使ったときの、対応しているブラウザと未対応のブラウザでの見え方の比較です。具体的には、CSS3が対応しているChromeの最新版と、対応していないIE8で見たときの違いを紹介していきます。 角を丸くして柔らかさを付ける border-radiusを用いることで、角に丸みをつけることができます。 CSS3未対応だと、ただの四角になります。 要素に影をつけてみる box-shadowを用いることで、要素に影をつけることができます。 CSS3未対応だと、影がつきません。 グラデーションをつけてみる linear-g
Babelの使い方入門編｜ES6をコンパイル（JavaScript）
JavaScriptの新基準であるES6（ES2015=ECMAScript2015）を利用する方法として、Babelによるトランスパイルがあります。 今回の記事ではこのBabelの入門的な使い方やブラウザの対応状況などをまとめました。また、インストールの流れ＆設定や、Gulp、AtomなどからBabelを介して自動的にコンパイルする方法もご紹介します。 なぜBabelが必要なのか？ まず、なぜBabel（=トランスコンパイラ）が必要なのか？という疑問がありますが、一言で言うと「全てのブラウザがES6に対応していないから」になります。 普通にES6でJavaScriptを書いて、そのまま実行できれば何の問題もないのですが、現状ではブラウザが完全にES6に対応していません。そのため、ES6で書いたJavaScriptをES5に変換してから利用する必要があります。 この辺りはES6のブラウザ対
Webだと写真の色が変わる？ – 写真部.
写真をウェブにアップロードしたら、色が変わってしまった… デジタル写真にはカラープロファイルという色に関するデータが付加されています。この付加データの取り扱いを間違えると色が変わって表示されてしまうことがあります。 デジタルカメラにはカラープロファイル（カラースペース、色空間）が選べるものがあり、このカラープロファイルがデジタル写真に色情報の一部として付加されます。 下画像は Canon EOS 20D のカメラの色空間を設定するメニュー この設定項目は、ニコンとオリンパスは「カラー設定（カラーモード）」、ソニーは「クリエイティブスタイル」という名前のようです。 RAWデータで撮った写真は、現像時にカラープロファイルを決定します（画像は Adobe PhotoshopCS3）。 ウェブで写真を使うときは、このカラープロファイルを適切なものにしておく事が重要です。 カラープロファイルの種類
プライベートモードで「本当の検索順位」をチェックする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、こんにちは。新人ディレクターのエリカです。 近くに越してきたばかりで、まだ部屋に冷蔵庫すらありません。 さて、今回のブログのテーマはタイトルの通りです。 「今、うちのサイトって、Google検索で○番目ですよね？」 これは、SEOを気にするお客様によく訊かれるキーワードです。 しかし、この検索結果は「本当の検索順位」ではない事が多々あるんです。 数年前から、Googleには「パーソナライズド検索」という機能があります。Googleがユーザーの普段の検索内容を覚えていて、その傾向からユーザーの選びそうなページをより上位に表示してくるのです。（常連の好みを覚えていてくれるバーのマスターみたいなものです。） 普段は便利かもしれないこの機能ですが、SEOのチェックとして使うときには要注意です。お客様や制作会社は、制作中のサイトをよく確認しているはずですから、そのサイトが他のユーザーよ
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
Support Details | Tech Support Management
Welcome To SupportDetails.com SupportDetails.com has everything you need to know to keep tech support people happy: which computer you are using (PC or Mac), which operating system (Windows or OS X), which web browser (eg, Firefox, Chrome, Safari, Edge), your IP address and more system information. Customize Your Report Simply send a properly formatted URL with recipient, sender, or both to have t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Market share for mobile, browsers, operating systems and search engines | NetMarketShare
Awesome Screenshot -- Screen recorder and Screen capture
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋
Engadget | Technology News & Reviews
http://designaholic.cc/2011/08/15-1.html