女性向けの商品、サービスを取り扱う企業や子供向け商品を取り扱う企業などでは、可愛らしい商品や店舗の内部を公開する為にはホームページが必要です。見やすく、綺麗な子供向けの綺麗なサイトを作りたいと考えている人は多いのではにでしょうか。そこで日本全国の可愛いいホームページを厳選して集めてみました。ひとつでもお気に入りがあるのではないでしょうか。
目移りする可愛いウェブデザイン7選HOUR BLOG | HOUR BLOG
女性向けの商品、サービスを取り扱う企業や子供向け商品を取り扱う企業などでは、可愛らしい商品や店舗の内部を公開する為にはホームページが必要です。見やすく、綺麗な子供向けの綺麗なサイトを作りたいと考えている人は多いのではにでしょうか。そこで日本全国の可愛いいホームページを厳選して集めてみました。ひとつでもお気に入りがあるのではないでしょうか。
恋に落ちるレンタルサーバーmixhostに惚れた理由
保存ディスクが完全SSD まず、コンテンツデータや画像等を保存するためのディスクが、どのプランも完全にSSD利用になっています。 一般的なレンタルサーバーだと、まだ普通にハードディスクを使用しています（データベース部分以外）。 これまで、システムディスクを「ハードディスクのパソコン」から「SSDのパソコン」に買いかえたことがある人ならその「速度の違い」を体感した人も多いかと思います。僕の経験から言っても「一度SSDのパソコンを使ったらもうハードディスク起動のパソコンには戻れない」というくらい、I/O（読み込み/書き込み）速度が段違いに速いです。 サーバーでも、当然ながら読み書きが頻繁に行われます。であるならば、SSDのような読み書きの速い高速ストレージを使用していた方が、地力は当然上がり、サイトの高速化に貢献します。 プランによってCPU・メモリが増強 あと、プランを変更することによって、
デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
jQuery でイメージマップ：ほんっとにはじめてのHTML5 サンプル
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15 - NxWorld
年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。 レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型（垂直）タイプだけでなく横型（水平）で見せるタイプもあります。 jQuery Timelinr 縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーのような見栄えでタイムラインを実装できます。 スライドのオート機能や各アニメーション速度の設定、「prev」「next」のナビ機能などの設定もいろいろと用意されています。 Dynamic Timeline レスポンシブ対応もされているjQueryプラグインで、こちらも縦型・横型の両タイプが用意されており、ビューサイズ指定で通常は横型のものをスマートフォンでは縦型に見せるなども可能です。 他にもコン
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
わずか1行のコード追加で、どんなWebサイトもCMSっぽくできる！「Simpla」の驚くべき使い方を徹底解説 - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、既存のWebサイトを究極にシンプルなCMSっぽく管理することができる無料のWebサービスをご紹介しようと思います！ このサービスを活用すれば、Webサイトのテキストや画像などの編集、サイトの更新作業などを直感的に誰でも行うことができるようになります。 【 Simpla 】 ■「Simpla」とは？ まず最初に、「Simpla」がどのようなサービスなのかを実際に見ていきましょう！ 以下に、「Simpla」を導入したサンプルサイトがあります。 見た目はごく普通のWebサイトですが、URLの末尾に「#edit」と追記して再読み込みします。 すると、専用の「ログイン画面」が表示されます！ 「Simpla」アカウントでログインすると、画面上でそのままコンテンツを編集できるようになります！ （編集できる箇所、できない箇所の設定も可能です） また、画
静的なHTMLをWordPressのテーマファイルに変換するオンラインサービス -HTML To WordPress
ごく普通のHTMLでも、BootstrapでつくったHTMLでも、あっという間にWordPressのテーマファイルに変換するオンラインサービスを紹介します。 HTML To WordPress HTML To WordPressは非常にシンプルな操作で、HTMLのフォルダをアップロードするだけで、簡単にWordPressのテーマに変換されます。変換したテーマはプレビューは無料で、テーマのダウンロードは1HTMLごとに$9、制作の手間を考えるとかなり魅力的な価格設定だと思います。 という訳で、静的なHTMLを用意してさっそく試してみました。 用意したHTMLは、こちら。 Land.io -GitHub ダウンロードページ 個人・商用利用、無料。 Bootstrap 4をベースにしたテンプレートで、新しいカードコンポーネントを使い、繊細なアニメーションでコンテンツを魅力的に見せています。 La
レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。（ブレイクポイントを480px、768px、980pxとした場合の例です） 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット／スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
BaserCMS
Webサイトを自由にカスタマイズできるCMS（コンテンツ・マネジメント・システム）です。 無料で使える国産のオープンソース・ソフトウェアとして、直感的な操作性と高いメンテナンス性、安全性を実現。 さまざまなサーバーで動作可能で、簡単にインストールできます。 固定ページやブログ、フォームをまとめて管理 メールフォームや新着ブログなどのプラグインを標準装備 国産のソフトウェアなので安心・安全のセキュリティ
気づかぬうちに違反してる？Facebookの規約～ロゴや表記、広告、キャンペーン等のルールをチェック～
気づかぬうちに違反してる？Facebookの規約～ロゴや表記、広告、キャンペーン等のルールをチェック～ Facebookのアイコンやロゴ、表記、広告からFacebookページのキャンペーンまで。知らずに違反してしまいがちなFacebookの規約を、まとめてご紹介します。 Facebookページにファンを集めたり投稿をするなかで、あなたも気づかないうちにFacebookの規約に違反しているかもしれません。 たくさんの事例を見ていると、Facebookのアイコンやロゴの使い方からキャンペーンまで、違反しているケースを目にします。運営者の方と話していても、「知らなかった」ということもしばしば。意外と漏れていることがあるものです。 そこで今回は、知らずに違反してしまいがちなFacebookの規約をご紹介します。「私は大丈夫」と思わずに、ぜひチェックしてみてくださいね。 1．アイコンやロゴ、表記 規
schema.orgがv3.1を公開、ホテルや旅館など宿泊業のサイトで使いたいプロパティを豊富に追加
[レベル: 上級] schema.orgは、バージョン3.1を公開しました。 特に注目したいのは、ホテルや旅館など宿泊施設に関係するプロパティ（ボキャブラリ）が数多く追加されたことです。 LodgingBusiness と Accommodation に豊富なボキャブラリを追加 LodgingBusiness と Accommodation にたくさんのプロパティが新たに追加されました。 LodgingBusinessは、ホテルや旅館、ホステル、B&Bなどの宿泊施設が利用できるschema.orgのタイプです。 Accommodationは、ホテルの部屋や貸し会議室、アパート、キャンプ場の1区画（1グループが利用する範囲）などの収容施設で利用できるタイプです。 たとえば、次のようなプロパティを設定できるようになりました。 starRating ―― 五つ星、三つ星などのホテルの格付け（利用
HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた
昔からサイト自体も考え方も好きで何かの機会に使ってみたいと思っていた「HTML5 Boilerplate」を、ようやく触ってみました。出来る事とか内容を解説します。 http://html5boilerplate.com/ HTML5 Boilerplateは、web上で利用者が必要な機能を選択した上で、その要件を満たすHTML、CSS、.htaccess、favicon等の各種ファイルをダウンロードできるHTML5のフレームワークです。 実はポップ？なデザイン(いまはそうでもなくなっていますが、前は★マークの目立つデザインとレトロな配色で、親近感を持っていましたｗ)と考え方がすごく気に入っていて常々使ってみたいと思っていたんですが、全く使い機会がなくてですね…ｗ HTML5 Boilerplateの特徴 何も考えずにサイトトップのダウンロードボタンをダウンロードするだけでも全然良いと思い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/learned-reading-the-flexbox-spec.html
Identifont-形状別フォント識別名称別フォント検索
could
Google Maps API無償版のポリシー変更、猶予期間が10月12日で終了、地図が突然表示されなくなる可能性も 
LodgingBusiness - Schema.org Type