HTMLテンプレートを作るのは簡単? 赤の他人が作ったHTMLテンプレートを簡単に編集できるか? 新人に数千ページのサイトのコーディングを任せられるか? HTML, CSS, JavaScriptを覚えればコーディングは楽勝? そこまで簡単じゃないかもしんない ブラウザのバグ? まぁそれもあります Cascadingという仕組みは素敵ですが あっという間にコードが大変なことになります CSSには素敵なセレクタがたくさんありますが、 残念ながらIE6を下限とする環境では使えないものばかり
Web系新社会人が入れておくと便利なFirefoxアドオン13選 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。Web系会社に勤める新社会人がFirefoxに入れておくとなにかと便利なアドオンを紹介します。 基本的に、webディレクター系職種の方を意識して選びました。 便利そうなものをお好みで入れていただければと幸いです。 All-in-One Gestures マウスジェスチャーをカスタマイズすることのできるアドオンです。 タブを開く、タブを閉じる、ページを進む、ページを戻る、といったアクションをマウスのみで行えるようにしておくと便利かもしれません。 All-in-One Gestures :: Add-ons for Firefox Firebug HTML、CSS、Javascriptなどのデバッグに便利です。 Fir
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅:800px、高さ:800px、解像度:72pixel/inch、カラーモード:RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
有料のWordPressテーマを作成して販売している「Elegant Themes」が自身の有料テーマのために作成したアイコンを1つにまとめて無料で配布しています。 「オープンソースや商用利用できるアイコンを探してみたが使えるレベルのモノがなかったので自分で作ってみた」ということなのでどれもこれも実用重視のデザインとなっており、かなり完成度が高いです。 ダウンロードは以下から。 Elegant Themes Icon Pack, For Free!- Elegant Themes Blog http://www.elegantthemes.com/blog/resources/elegant-themes-icon-pack-for-free 含まれているアイコンはPNG形式で背景は透過済み、全部で74種類、サイズは48×48ピクセルとなっています。 大体どのようなアイコンが含まれているか
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な3つの方法 はじめに 1. 黄金比(黄金四角形) 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
Unzip file(s) downloaded. Depending on the platform: Windows 10 / 8 / 7 / Vista - right-click the font file and select INSTALL Mac OS X - double-click the font file and select INSTALL FONT Linux - copy the font file(s) to /USR/SHARE/FONTS Fonts available at Fonts2u.com are either GNU/GPL, Freeware, free for Personal use, Donationware, Shareware or Demo. Although we have indicated the license type,
WEBデザインで使えるAdobe AIRアプリ45選「45+ Useful Air Applications for Web Design and Development Freelancers」 Adobeが展開しているリッチインターネットアプリケーションAIR。様々なジャンルで、利用されていますが、今日紹介するのはWEBデザインに役に立つAIRアプリを集めたエントリー「45+ Useful Air Applications for Web Design and Development Freelancers」です。 Web Snapshot サイズを測ったり、アイコンを制作したり、データベースをいじったりと、WEB制作や開発にちょっと便利な機能を持ったAIRアプリケーションが多々集められています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Pixel
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク(リンク)はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか? cleanstickyfooter 今日もいい天気ですね〜。タス
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注: 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何?」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何?どんなことができるの?」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 <具体的に何ができるの?> ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは? - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
Adobeさんが、クロスブラウザ表示テストサービス BrowserLabを開始したので使ってみました。 https://browserlab.adobe.com/index.html このサービスを使うと、以下のブラウザでの表示テストが可能です。 Windows XP Firefox 2.0(2.0.0.18) Firefox 3.0(3.0.13) Firefox 3.05(3.5.3) Internet Explorer 6.0(6.0.3790.3959) Internet Explorer 7.0(7.0.5730) Internet Explorer 8.0(8.0.6001.18702) Chrome 3.0(3.0.195.27) Mac OS X Safari 3.0(3.2.3) Safari 4.0(4.0.3) Firefox 2.0(2.0.0.18) Firefo
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
Free Website Design Software Build stunning websites on your PC or Mac! No code, free, with AI. Get Started with AI Start crafting your website effortlessly with our cutting-edge AI. This innovative solution transforms your prompt into a comprehensive website, generating compelling content, captivating images, and an intuitive layout tailored to your specifications. Once the AI lays down the found
Web制作において写真やアイコン、 フォントなどの素材があるとかなり 制作が楽になるのは言うまでも ありませんが、そんな素材を配布 しているリソースサイトを大量に ストックしているサイトをご紹介。 BLUE VERTIGO。ここを覚えておけばリソースサイトを探す手間も結構省けるのでは無いかと思います。 有料無料が混在してはいますが、フリーが多い印象です。フォントは有料無料を分けていました。 リソースサイトのストックは多いに越した事ありません。BLUE VERTIGOでは有料無料含めて実に800サイト以上をストックしていますのでこの中からお気に入りを見つけるのも良いかもしれません。 横スクロールで探しますカテゴリは横スクロールで探します。大まかに「Photo(写真)」「ベクター/クリップアート」「フォント」「ロゴ」「サウンド(音源)」「Photoshopブラシ」「POSER(3DCGソフト)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く