960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド
WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPress と PHP について簡単にまとめてみました。 WordPress は PHP（プログラム言語） + MySQL（データベース） で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM
Webクリエイターボックス
タグ: CSS 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 続きを読む CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 続きを読む CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 続きを読む 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テ
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
新人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)
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
職人技！CSSだけでつくったアイコンまとめサイト（コピペで使える） | バシャログ。
こんにちは。 今更ながら、朝スムージー始めました。mackyです。どうせすりつぶされて少なくなるんだろうと思い、目分量でいろいろ突っ込んでみた結果、 5人前くらいできてしまいました。…野菜ってすごい。 さて今日は、気分転換もかねてcssだけでつくったアイコンがいろいろ紹介されているサイトを集めてみました。 One div - The single element HTML/CSS icon database One div - The single element HTML/CSS icon database アイコンの数はそこまで多くないですが、必要最低限の情報がシンプルに整理されているUIで使いやすいなと思います。 使いたいアイコンのソースコードをzipファイルでダウンロードできるのもうれしいです。 また、表示可能なブラウザをマウスオーバーで表示してくれるのも特徴。 CSS3 Mono
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
知らなきゃ損！ Webデザインの作業効率がアップするチートシート13選
Web制作をしていて、「あれ？あのショートカットなんだっけ？」「どのタグを使うんだっけ？」とうっかり忘れてしまうことはないでしょうか。そんなときにチートシートを活用すると、目的のショートカットやタグなどを素早く見つけられるので、いちいち検索する手間と時間が省けて効率的です。 そこで今回は、持っておくと役立つWebデザイン関連のチートシートを13個ピックアップしてご紹介します。 目次 Photoshop / Illustratorのチートシート コーディング関連のチートシート WordPress関連のチートシート Git関連のチートシート まとめ Photoshop / Illustratorのチートシート まずはWeb制作に必須のPhotoshopとIllustratorのショートカットをまとめたチートシートをご紹介します。持っておくと、まだ覚えていないショートカットや忘れてしまったショー
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選
2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webnonotes.com/design/word/
モダン日本語フォント指定
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
ikesai.com
