cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
日本と世界の「レスポンシブWebデザイン」
マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWebデザイン レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。 マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの
約400種の欧文フォントが全部無料（商用可）でWebFontも使えちゃうFont Squirrelって素敵 / Maka-Veli .com
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか？ 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
WebサイトのRetina対応は必要か？
アップルのWebサイトにRetina対応のiPadでアクセスすると、一昔前のWebサイト（インターレースGIF）のように、ボケた画像がジワっとシャープに切り替わります。通常の画像を表示した後で、Retinaディスプレイの場合には解像度が高い画像へ切り替えているのです。 それぞれの画像について、低解像度版と高解像度版の2種類を読み込むことになるので、転送データ量が増えてサイトの表示が遅くなってしまいますが、アップルは自社商品のイチオシ機能であるRetinaディスプレイでの表示の美しさを優先させたのでしょう。 このような画像切り替えは、「retina.js」や「retina-replace.js」などのJavaScriptライブラリーを使うと比較的簡単に実装できますが、すでに掲載している画像の高解像度版を用意したり（素材が残っていない場合は作り直しになる）、今後掲載する新しい画像を通常版と高解
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの 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/4)
デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、「時代遅れ」といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは「マーケットに素早く対応して流石だ！是非、お手本として見習おう」といえるでしょうか？ 先行してスマートフォンに対応し
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
CSS Click Chart | CSS3 Browser Support and Information
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5対応のユーザーインターフェイスライブラリ「Kendo UI」登場
JavaScriptでビジネスアプリケーションを開発する際に使えるユーザーインターフェイスライブラリ「Kendo UI」の正式版が公開されました。 JavaScript用のユーザーインターフェイスライブラリといえば、jQuery UIやSencha Touchなどがあります。Kendo UIもそれらと基本的に似たライブラリですが、jQueryをベースにしつつメニューやデータピッカーなどの基本的な部品だけではなく、表形式でデータを表示するグリッドやグラフなど、このライブラリだけでビジネスアプリケーションに必要な部品をカバーしている点にあるでしょう。 HTML5対応ですが、HTML5非対応のWebブラウザもサポート。GPLv3ライセンスのオープンソースと、商用利用向けの有償ライセンス（399ドル）のデュアルライセンスで提供されています。 いくつかサンプルを挙げておきます。
Original Hover Effects with CSS3
Hover Style #3 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #3 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #3 A wonderful serenity has taken possession of my entire soul, like these
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
WebサイトをRetinaディスプレイに対応させる方法
Edit fiddle - JSFiddle - Code Playground
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
CSS3の色々なアニメーションを簡単に実装できる「Animate.css」
