世界中のブランドや会社のロゴ、シンボル、トレードマークをコレクションしているサイトを紹介します。 ロゴをデザインする時の勉強に、また単に眺めているだけでも楽しめます。
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
ランディングページ向けの縦長ページ、スモールビジネス向けの複数ページ、すべてがミニマルに美しくデザインされたレスポンシブ対応のBootstrapのテンプレートを紹介します。 テンプレートの良さはデザインだけではありません。いくつかダウンロードしてコードを見たところ、クリーンなHTMLでコメントもしっかりしているので、カスタマイズ性にも優れています。 Designstub ダウンロードには、メールアドレスの登録(無料)が必要です。 テンプレートの利用にあたっては、個人でも商用でもクライアントワークでも無料で利用で、クレジット表記は削除しても問題ない、とのことです。テンプレートとしての再配布・販売は禁止です。 詳しくは、ライセンスページをご覧ください。 ライセンスページ テンプレートは、縦長1ページ用と複数ページ用の2種類に分けられています。
こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ +400 Awesome Free Tools To Build Your Business 5つのジャンルに、Web制作やビジネスに役立つさまざまな無料ツール・無料サービス・無料素材がまとめられています。 Business -ビジネス サイト作成・ロゴ作成・請求書作成・法律文書作成・アイデアのマネジメント・かっこいいドメインなど Marketing -マーケティング ライティングツール・ブログツール・サイト分析・SEO・画像最適化・画像編集加工・マーケティング情報・ソーシャルメディア・カスタマーサービス・A/Bテストなど Design & Code -デザイン・コード デザインの無料素材・カラーや配色ツール・デザインのインスピレーション・写真素材・フォント・アイコン・コードやマ
WordPressのデザイン、記事の投稿、コンテンツ配信、検索エンジン最適化、メンテナンス、バックアップ、セキュリティ、パフォーマンス、アンケート、ショッピング機能など、ブログやサイトの運営に役立つWordPressのプラグインを紹介します。 WordPress Plugins We Use プラグインは、海外のWeb制作系ブログ「CSS-Tricks」で実際に利用されている厳選プラグインで、それをなぜどのように使用しているのか非常に参考になりました。 CAPTCHAはコメントではなく、管理画面のログインに使用しているとか、なるほどと思いました。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 コンテンツ配信 検索エンジン最適化 メンテナンスとセキュリティ パフォーマンス デザインと記事の編集 パーミッションとモデレーション 販売 使
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ルートの「.htaccess」に下記を記述します。 <files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </files> wp-config.phpファイルを守る WordPressでもう一つ重要なファイルがあります、それはwp-config.phpです。
WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
トレンドをうまく取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 時間のある時に、じっくり楽しんでください!
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです! しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ:幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く