日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
Gradients
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[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
Yahoo製、軽量なレスポンシブWebデザインフレームワーク·Pure MOONGIFT
Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。 Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。 様々なテンプレートが登録されています。こちらはフォーム。 ボタン。フラット系の色合いです。 メニュー。ドロップダウン付きのメニューもサポートされています。 もちろんページネーションも用意されています。 サンプルデザイン。メール風。 Pureは短縮化およびGzip圧縮して5.7KBと小さいサイズなのが特徴です。もちろんレスポンシブWebデザインをサポートしています。ガチガチなデザインテンプレートではなく、必要な場所だけをピックアップしたり、自分なりのカスタマイズが行えるのが特徴に上がっています。 MOONGIFTはこう見る Boostrapは
Perfect Full Page Background Image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put som
20 Amazing Examples of Using Media Queries for Responsive Web Design
Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs. To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to prese
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ 2013年3月23日 Webサイト制作, Wordpress, スマートフォン 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 最初に試した方法はCSSのMedia Queries（メディア クエ
viewport メタタグと @viewport 規則 - Dev.Opera
viewport メタタグと @viewport 規則 Translated by Masataka Yakura · 31 Mar, 2011Published in: target-densitydpi, mobile, opera mobile, viewport, device-pixel-ratioThis is a translation of An introduction to meta viewport and @viewport, written by Andreas Bovens. はじめに Opera のモバイル製品ではずいぶん昔から viewport メタタグをサポートしています。Opera Mobile 11 になって viewport 実装はより堅牢なものになり、また、異なる画面密度に対応する新しいメカニズムもサポートしました。さらには、私たちが提出した @v
Beautiful CSS3 Search Form - Web Designer Wall
Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers. View Demo Searc
Webデザイナーは要チェック。WordPress用テーマフレームワーク·Whiteboard MOONGIFT
WhiteboardはPHP/HTML/CSSによるオープンソース・ソフトウェア。最近はちょっとしたサイトであればWordPressを使って開発するというのが多いようだ。確かに認証、ブログ、CMS、リンク管理などWebサイトを運営する上で必要な機能が多数揃っている。 デスクトップ向け 次に必要なのはデザインだ。個人用途であれば外部のテーマを使っても良いが、専門的に進めるならばやはり自作したいと思うだろう。とは言え一から作る必要はない。Whiteboardというテンプレートフレームワークを使えば良い。 WhiteboardはWordPress3.0以降に対応したソフトウェアで、テーマとしてインストールする。とてもシンプルなデザインで、上部に大きなロゴ、左にテキストコンテンツ、右にサイドバーが並んで表示される形式になっている。だがiPhoneやAndroidで見ると1カラムになるように設定され
[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか？ 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基本的な例を見てください。
「CSSだけで作れる吹き出しボックス」の簡易版 (空span無し) - モノラルログ
先日話題になってた、css だけで吹き出しボックスを作るやつですけど、 これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌 http://phpspot.org/blog/archives/2009/04/css_84.html Fun With CSS Shapes - Nettuts+ http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/ こんなの発想してしまうのはすごいですねえ。すばらしい。ブラボー。 ただ、htmlソース側に空の <span> 要素が必要なところが、ちょっと気になるのです。見栄えのために、空の要素をソースに追加しないといけないという点が、ちょっと。 というわけで、なんとかならないもんかと試してみました。一応こんな感じでなら、htmlソース側もきれいにできるんじゃないかと思
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
[CSS]ピュアなCSSだけで作るコーナーエフェクト：Pure CSS folded-corner effect | magazine.PXROCKcom
Amazing Image Hover Effects with Webkit and CSS
CSS Nature Gallery | Showcasing the Best Website Designs Worldwide
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ - かちびと.net
自分メモ [CSS]ブラウザ間の差異を無くすリストのスタイルシート