人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
Webデザイナー向け。CSSを手軽に楽しむ·dabblet, MOONGIFT
dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。 dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。 トップページです。上半分が適用されたHTML、下がそのCSSとなっています。 上にマウスを持っていくとメニューが表示されます。 ログインします。GitHubアカウントでログインできます。 色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい！ グラデーションだとバルーンもグラデーションがかっています。 HTMLに切り替えて記述もできます。 メニューも色々です。保存しておくこともできます。 表示の配置を変更できます。 重ねて表示もできます。 Gistに保存できます。 dabbletを使うとリアルタイムに記述したスタイルシートがその
livedoor
1【闇】統合失調症の昔の名前、不謹慎すぎる・・・不思議.net 2【五輪】選手村で福島県産など被災地の食材を積極活用へ痛いニュース(ﾉ∀`... 3【画像】製作中のガンプラをSNSに投稿したツイ民さん、すぐさ...オレ的ゲーム速報＠... 4【文春砲】コブクロ黒田俊介にガチでヤバ過ぎるスキャンダル・...NEWSまとめもりー｜... 5犬の腹毛を整えようとしてやらかした結果、いい感じにまめきちまめこニー... 6賃貸の退去費用がおかしいんじゃがハムスター速報 7【悲報】横浜DeNAベイスターズさん、明日負けて阪神が勝つと自...なんじぇいスタジア... 8山田涼介「オンライン飲みしない？ｗ」波瑠「は？二度と誘うな...【2ch】ニュー速ク... 9【東京五輪】柔道金メダリスト石井慧さん、錦織圭さんをチクリ...はちま起稿 10【衝撃】会社の女の子「あ、あの、俺さん！」俺「はい」女「こ...
Croppy
2020年におけるベストオンラインカジノ８選06 January 2021 カジノの定番中の定番ゲーム「テーブルゲーム」をオンラインでプレイしましょう! 無料プレイも可能な人気の「ベラジョンカジノテーブルゲーム」で真剣勝負! ... カジノの定番中の定番ゲーム「テーブルゲーム」をオンラインでプレイしましょう! 無料プレイも可能な人気の「ベラジョンカジノテーブルゲーム」で真剣勝負! 新型コロナウイルスの感染拡大によるパンデミックにより、ギャンブラーの行動は変わりました。実店舗のカジノを利用できなくなって、オンラインでプレイする人が増えています。ラスベガスには、以前のような活気がなくなってしまいました。人々はカジノを訪れることでウイルスに感染することを懸念しているのです。そのため、オンラインカジノで遊ぶ人が多くなっています。多くのオンラインカジノが運営されていますが、すべてのサイトが同じクオリ
Nike Sustainability. Move to Zero
MOVE TO ZERO IS NIKE’S JOURNEY TOWARD ZERO CARBON AND ZERO WASTE, HELPING TO PROTECT THE FUTURE OF SPORT. We all share the responsibility for our playground—Planet Earth. That’s why we’re reimagining things top to bottom through sustainability and circularity. We’re focusing on carbon, waste, water, and chemistry, aiming to hit targets by 2025. Check out our Impact Report to see our progress.
全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG（16x16, 32x32, 48x48, 64x64, 128x128, 256x256）です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
素人っぽさを感じるWEBサイト5つの特徴 - おかねがない(ﾟ∀ﾟ)ｯ!!
インターネットをしていると、いろんなWEBサイトに出会います。 気になるアーティストのサイトだったり、趣味に関連したサイトだったり･･･ そんな中で 「なんかこのサイト素人っぽい」 って、感じたことありませんか？ でも、「素人っぽい」と感じはしたものの、そのサイトのどこに素人っぽさを 感じたのか、じっくり考えてみることってあまりないのではないでしょうか。 そこで今回は、WEBサイトのどういう点に素人っぽさを感じるのか、 「脱素人っぽいサイト」を目指す私が感じた、「素人っぽいサイト」の特徴を、 まとめてみたいと思います。 （8/19追記） 以下の内容はあくまで素人muggles0812が感じた、個人的な意見であり、該当する項目が あったからといって、必ずしも他の皆さんが「素人っぽい」と感じるとは限りません。 画像処理が甘い せっかく時間をかけて作ったサイトでも、使われている画像の処理が甘いと
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
パニック・ジャパン - Coda - Mac OS X 用 シングルウインドウ Web 構築環境
Codaは終売しました。 サポートやプラグインのご入手などはライブラリをご参照ください。 他社製のCodaはこちら。 ...まったく新しい、Macにネイティブなウェブコードエディタの誕生です!
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて
Web屋さんのためのベストエントリまとめ2011年2月度版
今月のWebマガジン目次 超必読記事WebデザインWordPress関連記事CSS/JavaScript無料アイコンWebサービス業界記事 必読記事 結局どうすればいいの？ - Dive Into HTML5 HTML5を学ぶ最適な資料。内容も面白いです。 PayPal 基礎知識ゼロから始める、個人利用・事業利用の使い方大辞典 日本でなじみないPayPalだが、そろそろきてもおかしく無いながれ。ブクマをすすめます。 目次にもどる Webデザイン 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス スマートフォンサイトのデザイン集です。デザインのインスピレーションに。 絶対見ておきたい有名企業のスマホサイトまとめ 有名企業サイトのスマートフォン用デザインのまとめ記事。 25 Examples of Wireframes and Mockups Sketches 手書きのWe
こんなWebデザイナーは成長しない
2013年3月23日 ライフハック Webデザイナーのみなさん、自分を成長させるためにしていることはありますか？効率化をはかるため、よりよいデザインをするためにしていることはありますか？今回はあえてこんな記事のタイトルをつけましたが、ではどうすれば成長できるのか？という点も一緒に考えてみました。もし当てはまるものがあれば一緒に解決策を考えてみましょう！ ↑私が10年以上利用している会計ソフト！ 情報収集をしない Web業界では新しい技術や情報が毎日のように更新されていっています。情報が多すぎてついていけない…新しい事を覚えるのがめんどくさい…という人もいるかもしれませんが、私たちはWeb業界で働いているんです。Web屋にとって情報は武器です。日々の情報収集が仕事に役立つという場面も多くあると思うので、日頃から新しい情報にふれるくせをつけておきましょう。よく読むブログはRSSリーダーに登録し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ
IDEA * IDEA
[CSS]わずか1KBのスタイルシートでもここまで美しいレイアウトができる -CSS1K
便利なネガティブマージン | CSS Lecture