池田 泰延 on Twitter: "noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE"noteのIPアドレスの不具合の件。 外野から分析してみました。 ■原因(予想) ・Nuxt.jsのSSR処理が引き金 ・API返却値に含まれたIPをSSRでうっかりHTMLに出力 GoogleキャッシュやWaybackMac… https://t.co/tKRHfiKPnE
div要素の正しい使い方
2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
Cacoo HTML5 バージョンが8月28日にリリース決定！編集画面のパフォーマンスが向上します。 | Cacooブログ
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは！Cacooチームの平山です。いよいよ2017年8月28日より、HTML5で作られたCacooの編集画面が利用できます。 Cacoo HTML5 バージョンのリリーススケジュールについて、28日の段階では、新規で作成した図はすべてHTML5バージョンで編集可能に、リリース後一ヵ月をめどにしてすでに作成した図もHTML5バージョンで編集できるようになります。 Cacoo HTML5 バージョンでは、ユーザーインターフェースは従来のFlash版を踏襲していますが、内部処理が刷新されており、従来よりもパフォーマンスが向上しています。詳しい改善点は28日のリリース後にあらためて情報を公開します。 Cacoo HTML5 バージョン提供にあたって起きる変更点 反応速度が改善
大手企業やWebサービスが配信！オシャレなHTMLメールのデザイン記事10選
テキストのみのメールに比べてHTMLメールのデザインの表現力が高く、近年のスマートフォンやタブレットなどデバイスの普及もあって活用する企業が増えています。 今回は、デザインの参考になるHTMLメールマガジン（以下、メルマガ）が紹介された記事をご紹介します。 HTMLメールの概要と、HTMLメルマガを利用するメリットなど基礎知識を解説した上で参考になる記事をまとめています。 もし、これからHTMLメルマガの配信を考えている方、既存デザインを見直したい方はぜひご覧ください。 HTMLメールとは HTMLメールとは、HTML形式メールのことを指します。 テキスト形式のメールにはできないテキストの色や大きさなどの装飾や、画像を埋め込んだりできます。また、テキスト形式ではメールがリストに対して届いたかどうかを測る「到達率」、ユーザー開いたかどうかを測る「開封率」を測定することができます。 デザイン性
iOS 8 and iPhone 6 for web developers and designers－firt.dev
next evolution for Safari and native webapps by Maximiliano Firtman Twitter @firt About Newsletter Published 10 years ago (17 Sep 2014) About 14 min reading time #ios #safari #webview iOS 8 is finally here while the new iPhone 6 and iPhone 6 plus will appear in a few days. New APIs appears on scene, as well as new challenges to support the new screen sizes. I’ve been playing with the final version
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
Web Componentsについて、いま思うこと - console.blog(self);
第49回 HTML5とか勉強会に行ってきた。テーマは「HTML5最新情報 @Google I/O」だけど、Web Components祭りだったと思う。スタッフなので受付の案内したり、ピザやビールを並べたり、ピザやビールを食べたり飲んだりした。 第49回 HTML5とか勉強会 : ATND 第49回 HTML5とか勉強会 - Togetterまとめ 動画が上がってる。はやい！ セッションはこんな感じ。 第49回HTML5勉強会 Google I/O 2014サマリー from Takuya Oikawa Google I/O サマリー @takoratta Web Componentsが変えるWeb開発の未来 泉水翔吾 @1000ch Material Design + Polymer 佐藤歩 @ahomu Material Design と Polymer - HTML5とか勉強会に登壇
【家具】低価格帯のソファの選び方教えて 4 てんこもり。
ソファの構造 ttp://www.smple-style.com/sofa/design/sofa.html 品質が安心できるのは販売元、製造元が同一国のメーカーか品質管理が信頼できるメーカーの海外製 この価格帯だと(２人掛けで１０万以下） ●構造素材 下地構造のみの耐久性 ポケットコイル=スプリングコイル＞S字バネ＞ウェービングベルト 下地が無い物は、この価格帯では地雷でしかない 柔らかい座り心地のものは質の良い多層ウレタン構造や ポケットコイルとの組み合わせ等、複数構造が必要 柔らかいものほど、価格＝質で耐久性も比例する場合が多い 2P5万以下のものはポケットコイル、Sバネであっても半分以下しかのも少なくないので 必ずしも素材＝耐久性には繋がらない ●ウレタンの耐久性順 軟質ウレタンフォーム(モールド成形)＞チップウレタン(モールド成形) ＞軟質ウレタンフォーム(スラブ成形)＞低反発弾
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
503エラーを防ぐ！Web屋が知っておくべき503エラーの原因と対処 | 知らないと損をするサーバーの話
（この記事は2022年9月29日に更新されました） こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 某社のレンタルサーバーからCPIのサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 さて、このコラムでは、Web集客を成功させるためのレンタルサーバーの選び方について、いろいろな視点からお話ししていきます。 今回は、Webサイトにアクセスが殺到した際、ページが見られなくなる「503エラー」についてのお話です。 あなたはどこかのWebサイトを見ようとした際、「503 Service Unavailable」「Service Temporarily Unavailable」などのエラーメッセージが表示されているのを見たこ
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
CSSの汎用クラスのつかいどころ | inkdesign
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Flipsblog.jp
すごい無料HTMLテンプレート厳選30個まとめ 2014年5月度PhotoshopVIP |
