CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
［CSS］簡単でオシャレなアコーディオンメニュー8選！
カンタンなJavaScriptで縦型HTMLとCSSアコーディオンメニューを作る方法を集めました。 おしゃれなピュアCSSドロップダウンメニュー▲ ピュアCSSのドロップダウンメニュー。JavaScriptを使わないユーザは知っておくべきインターフェース。 Jamie Coulter作 2016年4月12日 シンプルイズベストなアコーディオンメニュー▲ HTML、CSS、JavaScriptのアコーディオンメニュー。 Julia Rietveld作 2016年6月8日 jQuery不使用アコーディオンドロップダウンメニュー▲ HTMLとCSSのアコーディオンメニューです。プラグインなしです。 Agustin Ortiz作 2014年11月18日 サイドアコーディオンメニュー▲ HTML、CSS、jQueryのサイドバーアコーディオンメニュー。 Benjamin作 2014年4月18日 縦型
新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ
未経験からWebデザイナーに転職して、2年目に突入しました。 1年間チャレンジしてきて、数々の失敗をしましたし、注意も沢山して頂きました。まだまだ勉強が足りないなぁと思う次第です。 新人でなくなってしまうので、指摘されたこととその反省、2年目の目標を書き残しておきたいと思います。 おそらく皆様から見ると、当たり前すぎて書く程でないものも沢山あるでしょう…。 「無知の知」ということで、私も1年後には、そのような気持ちで読み返せるよう、しっかり勉強したいです。 関連記事 コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ 実務経験3年すぎた現役Webデザイナーのリアル【コーディングスキル編】 - IT系女子ログ コーディング環境 スライス スライスする前にコーディングの目安をつける デザインがズレていると感じたら必ずデザイナーに確認する スライスの名称に使用する
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d5ae2b3c18cdfce1c52a18e478f9b90463e0122/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150321%2F20150321135745.jpg)
ウェルビューいずみ こども園｜社会福祉法人いずみ会
2023.12.19 「おたのしみ会」「発表会」大成功！！１１月１１日（土）に１～２歳児の「おたのしみ会」、１２月９日（土）に３～５歳児の...
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
「Coolors」は次々とセンスある配色パターンを提案してくれるサイトです。スペースキーを押すと、いい感じの配色パターンを次々と生成してくれます。気に入った色は固定しておくとさらにそれに合った色を探してくれるので便利。 以下に使ってみた様子を載せておきます。まずCoolorsへアクセスしましょう。 このようにカラーパレットを生成してくれます。スペースキーを押すとまた違ったパターンを提案してくれますよ。気に入った色をクリックするとロックをかけることができ、その色は次の配色パターンに必ず採用されます。配色パターンを自分で作るのは難しいですよね。ぜひウェブデザインを考える際に配色の参考にお使いください。 Coolors （カメきち）
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。
PNG32bit(24bitアルファ付き)画像では、8ビット(256階調)の透明度が各ピクセルに割り当てられていますので、ドロップシャドウの部分も綺麗に再現されます。 GIFやPNG8ではアルファ値は1ビットですのでONまたはOFFの2階調しかありません。よって、透過を活かしたアイコンが作りにくく、どうしても汚い画像になってしまいます。 アイコンには 16x16 , 32x32 , 48x48 , 96x96 , 128x128 等の複数の画像を含めるようにしましょう。表示環境によって、より適した画像が表示されます。 ファビコンを作成の方へ： 16x16の画像を含ませて、ファイル名をfavicon.icoに変更すれば完成です(任意のファイル名でもOK)。 favicon(ファビコン)とはウェブサイトやウェブページに関連付けられたアイコンのことです。 faviconは日本では「ファビコン」と
Web フォントでアイコン表示。 Font Awesome 使ってみた
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。 以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。 IE6,7に対応（前回はFirefox2のみ）。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
81-web.com : 日本のWebデザイン・Webサイトギャラリー＆リンク集
まだ中央寄せで消耗してるの？ - @yoshiko_pg
//// COLOURlovers :: loving colours since 1981
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
CSSが破綻する4つの理由 - Qiita
UI+UX Design—Art Direction - Portfolio Website of Anastasia Antonopoulou Koupantsi
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/
ゼロから始めるレスポンシブWebデザイン入門
