とあるLPの制作現場 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webデザインの本などで、「架空のカフェのサイトを作ってみよう！」みたいなフワフワしたチュートリアルはよくありますが、実際のサイトができあがっていく様をあまり見たことがないなと思い、LPの制作と並行して記事を書きました。 工程のすべてを書くのはつらいので、ハマった所や気をつけた所、後ろめたかった所を中心にまとめています。見苦しい所が多々あると思うので、そのときはそっと目を閉じてください。 ※ 記事にする許可は先方からいただいています LPとは ランディングページ。ユーザーが訪れる最初のページという意味らしいのだけど、商品の魅力を訴求する
WHATWG の IPR Policy と Governance Structure | blog.jxck.io
Intro WHATWG が IPR Policy と Governance Structure についての更新を発表した。 おおまかな流れと、これによって引き起されそうな変化について解説する。 Working Mode Changes 昨夜(JST)、 WHATWG は以下のブログをポストした。 The WHATWG Blog - Further working mode changes ブラウザベンダ各社もこれに賛同を表明している。 mozilla: https://twitter.com/mozhacks/status/940258410477604864 chrome: https://twitter.com/ChromiumDev/status/940253003587694593 safari: https://twitter.com/webkit/status/9402549
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
Articles from advent 2009
A year when books were winning (Five Simple Steps published A Practical Guide to Designing for the Web by Mark Boulton and Designing with Web Standards by Jeffrey Zeldman and Ethan Marcotte reached its third edition) and the web was losing (Yahoo! closed Geocities). Significant progress was made with web fonts and HTML5, and 24 ways delivered the Christmas gifts again. Meagan Fisher tackles the is
IBM スマートな社会を支えるITインフラストラクチャーを提唱 - Japan
2009年12月22日 2009年12月18日 2009年12月17日 2009年12月16日 2009年12月15日 2009年12月14日 2009年12月11日 2009年12月10日 2009年12月10日 2009年12月04日 2009年12月01日 2009年11月30日 2009年11月27日 2009年11月26日 2009年11月26日 2009年11月26日 2009年11月25日 2009年11月25日 2009年11月19日 2009年11月18日 2009年11月18日 2009年11月17日 2009年11月17日 2009年11月13日 2009年11月13日 2009年11月12日 2009年11月11日 2009年11月10日 2009年11月10日 2009年11月10日 2009年のプレスリリース一覧 ここに掲載されている情報は、発表日時点の内容です
ie-buglist.orgというサイトつくってます。 - Webtech Walker
まだコンテンツは全然できてないけど一応動くようにはなったのでとりあえず公開しときます。 ie-buglist.org Ark（カヤック発のPerlのフレームワーク）で何か簡単なものつくりたくて、IEのバグのまとめサイトはつくろうと思ってたのでちょうどいいと思って勢いでつくりました。 今のところ、前書いたエントリーの内容でバグの現象をコピペしてるだけです。コンテンツ充実させれば結構有用なサイトになる気がするんですけど、いかんせんモチベーションがあがるかが不安ではあります。 ソースはgithubに上げてるので一緒につくってくれる人絶賛募集中です。perlとgitとmarkdownが使えるMEとかいたら最高だなー。いないかなー、と思ってたら一人思い当たった。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ | Blog hamashun.com
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
don’t use @import | High Performance Web Sites
April 9, 2009 12:32 am | 90 Comments In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster
xml.vimでXMLとかHTMLとかの編集機能を強化する - 肉とビールとパンケーキ by @sotarok
こう、選択範囲を特定タグで囲んだりうまいことやってやりたいよとか、よくありますよねー。 xml.vim ってやつを使います。現在のバージョンは1.84でした。 xmledit - A filetype plugin to help edit XML, HTML, and SGML documents : vim online インストール インストールは $HOME/.vim/plugin にダウンロードするだけ。 % wget -O ~/.vim/plugin/xml.vim "http://www.vim.org/scripts/download_script.php?src_id=10362" 選択範囲をタグで囲む まぁとりあえずは、これがやりたかっただけ。 まず、 "vit" とかでタグ内の要素を選択とかしちゃう。 そしたら、"￥x"。タグ入力しろっていわれる*1。とりあえず、aと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
【転職後1ヶ月目】ガチ未経験でwebエンジニアになって困ったこと | IT業界の歩き方
width属性とheight属性が指定されていないimg要素を非表示にしたときのメジャーブラウザの挙動 - 雑記 - AZ store