About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
<div class="accordion-box"> <input id="ac00" type="checkbox"> <label for="ac00"></label> <div class="accordion-container"> <h3>タイトル</h3> <p>世界中どこを探してもなかったので作りました。</p> <p>jsを使っていないのでコンフリクトすることはありません。</p> <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p> <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p> </div><!— accordion-container --> </div><!— accordion-box --> .accordion-
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
LINE Developer Meetup in Fukuoka #16 http://connpass.com/event/38413/
Twitterの埋め込みコードが既存のCSSとバッティングすると描画の書き換えが余分に発生することがあります。ガタガタして読みにくいのでCSSセレクタで回避しましょう。 特定ツイートをWEBサイトに表示させるときは、Twitter公式のツイート埋め込みにて行います。 ただしツイートの全文が <blockquote> タグで囲われているため、既存の引用タグにクラスが割り振られていないとCSSがバッティングして何度もレンダリングすることになります。リソースの無駄だし何となくカッコ悪いことになりがち。 自前のコードにはクラスを割り振って棲み分けるのが一番なんですが、長くサイトをやっていて古い資産がたくさんある場合は遡るのも大変です。 そんなときにCSSセレクタでフィルタリングする方法です。 ツイートの非同期読み込みとCSS描画タイミング Twitterで埋め込み用のコードを出力すると、以下のよう
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
by Ben Watkin 「ミント・クリーム」「ピーチ・パフ」「ナバホ・ホワイト」など、ウェブカラーには分かるような分からないような抽象的な名前が付けられています。CSSカラーモジュールでは141種類の「色」が標準化されていますが、一体誰が何のために「ドジャーブルー」のような分かりづらい名前をつけたのか、Ars Technicaが秘密に迫っています。 “Tomato” versus “#FF6347”—the tragicomic history of CSS color names | Ars Technica http://arstechnica.com/information-technology/2015/10/tomato-versus-ff6347-the-tragicomic-history-of-css-color-names/ CSSカラーモジュール・レベル4では141
iOS9で僕が一番注目していた点が、アドブロック機能によるGoogleアナリティクスの無効化でした。 噂では聞いていましたが、自分で試してみるまでは・・・という気持ちでわずかな望みに賭けていました。しかしどうやら噂通り、アドブロック機能でGoogleアナリティクスは無効化されてしまうみたいです。 なお、iOS9のアドブロック機能はデフォルトでは実装されていません。Safariをアドブロック化するアプリを入れ、設定をいじることでアドブロックが有効化されます。 さっそくそのアプリを入れて機能をONにし、Safariからこのブログにアクセスすると・・・ やっぱりスマホからのアクセスが計測されていないことがわかります。 そして同時に、アドブロック機能をONにした状態のスマホブラウザからはアドセンスの表示も消えていました。 自分で検証してみた結果、やっぱりGAはアドブロック機能によって無効化されてし
Unicodeにあるハイフン/マイナス/長音符/波線/チルダのコレクション 2015/06/18 Unicodeにある文字の中からハイフンのような横棒と波線を集めてみました。複数あるのはわかっていたつもりでしたが、こんなにたくさんあるとは思いませんでした。 横線に関しては、ハイフンや長音符(カタカナの長音記号)、罫線など、線が横に延びているものです。縦方向や斜めの線は除きます。ほとんど横線だけどほんのちょっとだけ斜め(主観)になっているものは含みます。点線や矢印、線が2つ以上に分かれているものは除きます。途中で曲がっているものも除きます。横線が上の方だったり下の方だったり、太さが途中で変わるものも含めています。 波線に関しては、横方向の線が、直線ではなくS字カーブになっているもので、縦や斜めのS字を除きます。 S字カーブを超えて複雑な曲線も除いています。ただ、文字の名前に “wave” と
Private content!This content has been marked as private by the uploader.
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
2015年2月27日 著 レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますというくだりにしろ、自分の経験や認識とはだいぶ乖離しているように感じるのですが、それはさておき、挙げられていたレスポンシブを避けるべき3つの理由のどれ一つとっても、賛同できるものではありませんでした。 コストが増える？ 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間の
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
Web APIの設計、開発、運用についての解説書。APIは設計次第で使いづらいものになってしまうだけでなく公開後の保守運用も難しくなってしまいます。そのためAPIを美しく設計することがとても重要です。本書では「設計の美しいAPIは、使いやすい、変更しやすい、頑強である、恥ずかしくない」という考えのもと、APIをどのように設計し運用すればより効果的なのか、ありがちな罠や落とし穴を避けるにはどういう点に気をつけなければいけないのかを明らかにします。ターゲットは、URIにアクセスするとXMLやJSONなどのデータが返ってくるシンプルなタイプ――XML over HTTP方式やJSON over HTTP方式――のAPIです。読者は、Web API設計の考え方と手法を知ることができます。 はじめに 1章 Web APIとは何か 1.1 Web APIの重要性 1.1.1 APIでの利用を前提とした
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
アドビでは、最高の価値をお客様にお届けする製品およびソリューションの開発に注力するため、Adobe Muse CC に関するテクニカルサポートの提供を 2020 年 3 月 26 日を以って終了いたします。 アドビでは、ユーザーに謝意を表すとともに、ユーザーの特定のニーズを解決できる他のアドビ製品へのスムーズな移行を支援したいと考えています。 開発を行う前に web サイトやモバイルアプリケーションのユーザーエクスペリエンスを設計する場合は、Adobe XD をお試しください。 これは、UI のデザインおよび試作ができるツールです。詳しくは、Adobe XD を参照してください。 ユーザーがそれぞれのクリエイティブな仕事を発表する web サイトを作成する場合は、Adobe Portfolio を使用して、Behance プラットフォームにも接続可能な美しいポートフォリオ web サイトを
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ～ニコニコを超快適にしてみた～」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速度と使い勝手を競うのだそうです。 「これは面白そうだ! 会場は家から近いし!」と思って参加するつもりでいましたが、事前調査で計測してみた結果、フロントエンドのチューニングでは速くならないことがわかったので、その内容について説明します。 (主催者の方にも、フロントエンドのチューニングでは速くならないという情報は伝えてあります。) まずは、計測データ まずは実際のトップページ(http://sp.nicovideo.jp)の計測データを見てみましょう。 計測は、NTT DoCoMoとSoftBankの3G回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
