HTML5 & CSS3 Tools and Tutorials WEBデザイナ必携のHTML5&CSS3のコードジェネレータ「HTML5 & CSS3 Tools and Tutorials」。 次のような単一アプリケーションのようなUIでCSS3やHTML5の各種コードをWYSIWYGで生成できてかなり便利です。 ブックマークしておくと作業を効率化できそうですね 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル
技術系の記事でも、ややふざけ気味のものについては、はてなブログで書くという習慣がついてきました。 (今回はマジメにいきますよ) というわけで前回の記事「どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)」がおかげさまで好評で、いくつか反響もいただいているので、そちらをご紹介していきたいと思います。 もしCSSを書くのが好きな方で上記の記事を未読の方は、先に問題を解いてみてくださいね。 いただいた解答例 はてぶやtwitterで解答をいただいたものについて紹介していきますね。 捕捉できていない人がもしいたらごめんなさいー あとわたし別にCSSが得意というわけではありませんので、CSSてきなツッコミについてはお腹いっぱいですのでご容赦ください。 nth-child()なんて実際に使ったことなんて無いし 瞬希 (id:syunki-gt) さん 「CSS
結論1:アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks(10.9)ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2:「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考: ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり!(2013春) 結論2:新しい字形に対応をしている「ヒ
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
タイトルは どうしてプログラマに・・・プログラムが書けないのか? からもってきました。 原文はこれですかね。 FizzBuzz問題という有名な問題があります。 1から100までの数を表示させる。 ただし3の倍数のときは数字の代わりにFizzと、5の倍数のときはBuzzと、3と5の両方の倍数のときはFizzBuzzと表示させる。 ただこれだけの問題です。 PHPで平易に書くとしたらこんなかんじでしょうか <?php for ($i = 1; $i <= 100; $i++) { if ($i % 15 == 0) { echo 'FizzBuzz'; } elseif ($i % 3 == 0) { echo 'Fizz'; } elseif ($i % 5 == 0) { echo 'Buzz'; } else { echo $i; } } JavaScriptならこんな感じで書けますね
これは知っておいて損はないでしょう! Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで(Bootstrap本来の機能も使いつつ)リッチな
最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 デモ:Mega Menuオープン時 HTML HTMLは、トリガーとなるチェックボックス、メガメニューのリスト、コンテンツ、の3つで構成されています。 デモのコードをシンプルにしてみました。 <input type="checkbox" id="nav"> <label for="nav" class="entypo-menu"></label> <nav> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> </ul> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <l
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト! テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート(SASSも有り)を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び(diversify or die)を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴(書籍、登壇)のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート 馬場 美由紀(HTML5 Experts.jp編集部) 11月にiOS7のSafariでサポートされることになり、一躍注目を集めることになった「CSS Regions」。雑誌や新聞のような、自由でクリエイティブなWebデザインを実現できると注目されていますが、その実、何ができるのかは未知数です。 2013年11月30日(土)に開催された「HTML5 Conference 2013」のアドビシステムズ轟啓介さんのセッション「CSS Regionsを使った新しいCSSレイアウトを作る方法」では、主に「CSS Regions」を使ってできること、そして実際の記述方法について解説されました。 複数のボックスをまたいでリフローできる 「CSS Regions」 現在、「CSS Regi
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから2年半…あっという間だった…。 関与したもの: スマホ版ピグ(リニューアルして面影無し) ピグファンタジア(11月末クローズ) 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います: クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
これは「BEM Advent Calendar 2013」19日目の記事です。 タイトルに書いてある通り、Robert HaritonovによるMCSSのドキュメントを日本語訳しました。 ほぼ同内容のものをプルリクエストしてあるので、そのうち本家でも公開されると思います。 公式ページでも公開されました。 英語版があったので基本的には英語版から日本語訳したのですが、英語版で意味がよく分からない部分があって、そういうのはオリジナルのロシア語版を機械翻訳で英語にして、それを元にしたりしました。ので、英語版からの完全翻訳ではありません。 本当はロシア語できる人がオリジナルのドキュメント群を翻訳したほうがよいと思います。 MCSSは主にCSSの管理方法についての考え方で、読んでいて自分のやり方に一番向いているのではないかと思いました。 そこで、ちゃんと理解しておきたいということもあって翻訳してみまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く