イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に
Web ページの透過表示機能などを悪用することで、ユーザに意図しないクリック動作をさせる「クリックジャッキング」と呼ばれる攻撃手法が知られています。この対策のひとつとして、Web サイト側があらかじめHTTP レスポンスヘッダに X-FRAME-OPTIONS ヘッダを含めておき、Web ブラウザがこの値を解釈することにより、クリックジャッキングを防止する手法があります。 Internet Explorer 8 をはじめとして Mozilla Firefox、Apple Safari、Google Chrome、Opera など多くの Web ブラウザの最新版が X-FRAME-OPTIONS ヘッダを認識するようになっています。 Web サイト側で X-FRAME-OPTIONS ヘッダを活用することで、クリックジャッキングへの対応が可能となる環境が整ってきています。ぜひ、Web サイト
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
CSSレイアウト[TIPS] position : absoluteについて 「position : absolute」はpositionプロパティのなかの1つで、ボックス要素を絶対的な位置で配置する。 position:absoluteで指定されたボックスは、他の要素との関係は切り離され別物になる。親ボックス以外の他のボックス要素から影響を一切受けない。 position:absoluteには必ず「親」がいる。これが大事。 親にしたいボックスに「position:static」以外のposition指定をし(たいていはrelativeでOK)、そのなかに子を入れてposition:absolute指定をする。「top」「bottom」「left」「right」の値は、親ボックスからの距離。 親ボックスを指定しなければ「ブラウザウィンドウ」が親になる。 結論から言うと、親ボックスが「ブラウ
第16回(最終回) 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 (公開日:2010年4月16日 解説:こもりまさあき) 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2(CSS 2)をサポートしているものがほとんどです(特定のプロパティだけ未サポートも含め)。その一方、現在CSSの次のバージョンにあたるCSSレベル3(CSS
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
はじめに ご使用上の注意 (1) 主な更新履歴 (25) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (402) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (42) TypeScript (1) Java (26) Perl (6) PHP (14) Ruby (11) Python (14) Go言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く