Open Source Web Design is a platform for sharing standards-compliant free web design templates. We give web publishers a voice through good design.
CSS Templates Welcome to Free CSS Templates Website! Find here a never before seen collection of free CSS Templates, one of the biggest in the entire web! All these CSS templates are: 1. Table free in its design (no tables have been used for layout purposes). 2. The templates are light weight, so that it won’t take too long to load. 3. W3C Standard compliant. 4. Comes with public domain photos, pr
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをCSSでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とCSS RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS FloatのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
角の丸いテーブルの作成ツール。 画像あり、画像なしのパターンを選択でき、 角のデザインなども自由にカスタマイズできます。 [ 画像あり版 - 画像なし版 ]
プロのWebデザイナーじゃないけど、ブログをもっとカッコよくしたい!もっとオシャレに見せたい!という方のために、これまで紹介したブログで使えるスグレモノツールをまとめてみました。 便利なフリーソフトはたくさんありますが、この中でお気に入りが見つかるとうれしいです。 名付けてsweetloveパック(livedoor風味) 画像系 ImageChef(日本語・携帯にも対応) ワンポイントや mixi のプロフィールにどうぞ 画像が簡単にできるジェネレーターいろいろ :: Love & Design :: Polaroid-o-nizer™ ポラロイド風や枠をつけてオシャレに演出 写真をオシャレに見せたい人のための便利なツール :: Love & Design :: デザイン系 Dynamic Drive CSS Library タブメニューなどが豊富に揃っています。 誰でも簡単にCSSカスタ
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。 css html あとで読む
Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 無駄に長くてわかりにくーい検索結果などの URL を、mixi の日記やブログのコメント欄に貼っているのをたまに見かけますが、ブラウザによっては画面から突き出したりレイアウトが崩れる原因になってしまいます。 短縮URLは、アダルトサイト等へのスパムに悪用されることもあるため、なるべく使用は控えたほうがよいという意見もありますが、今日は簡単にURLを短縮できるサービスや便利なツールを紹介します。 リンクの見た目もスッキリしますよ。 簡単にURLを短縮できるサービス ウェブ精米 好きな言葉(文字列)も指定できます。 mooo.jp Z.la:URL圧縮・転送サービス Sni
Snapであなたのサイトにも無料で検索プレビュー機能をという記事より。 先週、「Snap Preview Anywhere」が ローンチされた。これは あらゆるサイトのオーナーに検索結果のプレビュー機能を提供する無料サービスである。これをインストールすると、すべてのリンク(サイト内のリンクは除外 可能)にマウスを載せるとリンク先のプレビュー画面がポップアップ表示されるようになる。 「Snap Preview Anywhere」がどんな機能かというのは、恐らく見て貰うのが一番早いと思います。ネタフルでも実装してみたので、スクリーンショットをご覧ください。 リンクの上にマウスカーソルを合わせると‥‥ こんな感じで、リンク先のプレビューが表示されるという仕組みです。 キャッシュがない場合は取得に少々の時間を要しますが、リンクをクリックする前にどんなサイトか確認できるというのは利用者にとっては便利
メニューごとに、分けましたので確認したいメニューをクリックして下さい。それぞれの項目のテーブルにいきます。[説明]はサイト内の説明ページに行くことが出来ます。マークをクリックしてください。 ファイルメニュー 編集メニュー オブジェクトメニュー 文字メニュー フィルタメニュー 画面メニュー
Make your own web formsというエントリーより。 Not only can you build your own web forms, but there’s also 130 form templates you can play around with, as well as eight different stylesheets. Lifehackerで、無料で問い合わせフォームを作ることができる「The Form Assembly」というサービスが紹介されていました。130ものテンプレートも利用できるそうです。 PerlやPHPなどで探せばフリーのプログラムがいくらでも見つかると思いますが、ASPで利用できるとなると手軽で良いです。早速、試してみました。 ちなみに料金プランを見ると無料版、有料版があります。 50登録まで、100登録まで、という方法と、毎月いくら
「フリーフォント最前線」は2020年6月30日をもって公開終了となりました。 今までのご愛顧、ご協力ありがとうございました。
Example - In search of the One True Layout - One True Layout- Interactive Example オンラインで自在にCSSレイアウトをデザイン出来るサイト。 フォームにて、ページのカラム数やそのカラムのサイズを調整でき、そのままボタンを押せばプレビューが実行されます。 他にもオプションが色々選択でき、結果的に、HTMLとCSSのコードを出力することが可能。 複雑なカラムのレイアウトを独自に作りたい際にはなかなか便利かもしれませんね。 ↓プレビューされたレイアウト レイアウトを作成する効率的な方法として、他にもレイアウト集のサンプルを元にコピペで作成していく方法がありますが、 この場合、「CSSレイアウトのサンプル集」で紹介したページが使えますね。 関連エントリ サイトのCSSを見たままリアルタイムに編集するツール色々 CSS
ドット絵をパス化する ラスタ画像をドットを保持した状態でベクタ画像に変換する Painter Photoshop Illustrator Illustratorで作る斜めの格子柄 斜めに傾いたチェック柄やストライプ柄は、意外に簡単に作れます Painter Photoshop Illustrator Painterで書道を再現する 墨絵ブラシを加工して書道用のバリアントを作成する Painter Photoshop Illustrator Illustratorで2ページ以上のPDF作成 Illustratorだけで複数ページに渡るPDFを作成する方法 Painter Photoshop Illustrator 夏の想い出線香花火 Illustratorだけで描く日本の情緒 Painter Photoshop Illustrator Illustratorで氷塊を描こう グラデーションメッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く