【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog
30代からのwebデザイナーになることは可能か？ 人生相談にこたえてみました。
30代からのwebデザイナーになることは可能か？ 人生相談にこたえてみました。 2013.10.02 | 初心者向け | 相談 | 考える。 ども、WP−DPurpleことメガネことmgn大串です。 人生相談を続々と頂いております、今日はその中から一つにみんなで答えてみましたー。 WP-Dの執筆陣構成は、だいたいフリーと社員とが半々ぐらいです。でも新卒で一つの会社にはいったまま来ている人は少なめで、いろいろ渡り歩いて現在WEBの仕事をしているという人が多い印象です。それぞれ人生いろいろなところもかいま見られますよ。 なかなかの長文ですが、とてもよいコンテンツになったと思いますので。ぜひお読み下さい。そして自分はこうだよーといったご意見もおまちしておりますー。 寄せられた相談 題名: 30代からのwebデザイナー メッセージ本文: はじめましてこんにちは、 ◯◯◯◯と申します。よろしくお願い
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
Twitter Bootstrapを使って短時間でWordPressテーマを作る。
Twitter Bootstrapを使って短時間でWordPressテーマを作る。 2012.11.15 | この方法お勧めです！ どうもどうも、こんにちは。WP-Limeです。 Limeって黄緑色らしいです。色決めの時に、Facebookを見ていなかったら、空いている色が無くなっていて黄緑色になってしまったということで、いやぁ、何事もタイミングですなぁと思っている派です。 さて、持ち回りで月に１回書いている、このブログですが、 １回目の記事は、 案件の価格決めをどうしているのよ？ ２回目の記事は、 IT勉強会を自分で主催するメリット・デメリットと、それらを有料or無料で開く判断。 ３回目の記事は、 支払サイト＆入金サイトについて考える。 でした。 今までは、他の執筆者とのタイミングの関係で、Web制作以外のことを書きましたが、今回初めて制作寄りのお話です。 さて、「いやぁ、今日は打ち合わ
初心者でもわかる! IE で互換表示 (IE8) - Microsoft サポート
ホーム ＞ GPU レンダリングの無効化 ＞ 互換表示 ＞ IE8 互換表示を試してみる (手順) : IE8 IE8 では、互換表示が必要な Web ページにアクセスすると、アドレス バーの横に [互換表示] のボタンが表示されます。そのボタンをクリックすると、Web ページのレイアウトが正しく表示されます。また、互換表示が必要な Web ページのリストをもとに IE8 が自動的に互換表示を有効にする場合もあります。 [互換表示] ボタンをクリックすることで、互換表示の有効および無効を切り替えることができます。 [互換表示] で表示する [互換表示] をクリック
CSSで文書の段組表現を行うcolumnプロパティの使い方
CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。 というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。 段組にすると視線の横移動が少なくて済むお題のHTMLはこちら。 <div> <p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p> <p>丁度その時、下の
デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ
本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。 Boilerplate（ボイラプレート）は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。 Boilerplateテーマの見た目「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。 もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。 Boilerplateテーマの使い方 Boilerplateテーマのソースコード（CSSおよびLESSファイル）は、GitHubで公開しています。
水平型リストで画像を並べた時の隙間を消す6つの方法｜web bibo
display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。 これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li> <li><img src="/images/tips/h_list_space_04.png" alt="PHP" /
トップページ | 短期間でCSSなどのウェブスキルを学ぶなら、allWebクリエイター塾
世界のフロンエンド技術を学ぶ UX、UI、レスポンシブWebデザインまで、最新のフロントエンド技術をトータルに学んでいただきます 世界のUX企業である「ノーマンニールセン」の資格を持つ講師から、UXの基本、UI設計、HTML5の基本からFlexboxなどの最新のレイアウトプロパティを利用したサイト制作技術を学ぶことができます。 制作効率を上げるツールやノウハウを提供 効率よく運用&構築するためのツール、チーム開発のためのコミュニケーションツールの利用方法も学べます 制作効率を上げるためのツール、バージョン管理ツール、現場の仕事がスムーズにできるコミュニティツールなど各種ツールを知ることができます。 インデックスされやすい、流入の多いサイト制作を学ぶ ユーザーニーズにリードできるサイト構築が学べます ユーザーリードを獲得しやすいリッチスニペットの導入、パフォーマンスの良いサイト制作など、Go
HTML5/CSS3のニュースやTIPSなどのまとめ (2012年9月23日)
QUEENの曲を細かく区切り、いろいろなソートをして再生できるデモ。Web Audioっぽい (英語)
2012年上半期プログラミング学習サービス総まとめ：GREAT GEEKS：オルタナティブ・ブログ
今年も早いもので、残すところ半分となりましたね！今回は2012年の上半期までで色々なプログラミング学習サービスを徹底的にまとめてみました。今回の記事で今リリースされているものはほとんど網羅されていると思います。 今回の記事は特にプログラミング初心者〜中級者に役立つサービスまとめ記事だと思います。去年の暮れに書いたプログラミング学習サービスまとめがおかげさまではてぶホットエントリーに入るなど、プログラミング学習への注目度の高さを実感しているところです。特にスタートアップの世界では、もう文系だからとかエンジニアじゃないからと言ってプログラミングの知識ゼロで許される時代でもなくなってきていますしね。色々なサービスがありますが、ご自身の学ぶ目的やレベルに合わせて活用してください！ プログラミング学習サービスまとめ 1.メールを使ってコーディング学習できるCodecademy 料金：無料 言語：Ja
オルタナブログで使えるHTMLやらCSSの確認：ビジネスをデザインするブログ：オルタナティブ・ブログ
皆様。ご無沙汰しております。 久々に更新をしようと思ったのですが、どうせなら見やすいブログがいいと思い、前々から調べたいなと思っていたオルタナブログで使用できるHTML（というかCSS）をテストしてみます。 オルタナブログさんは、Six Apartさんのブログシステムを使用されているようですが、いろいろと制限というか癖がありますね。 HTML編集も可能なのですが、HTMLで書いたものが「リッチテキスト」モードのときと、「確認」の時と、「最終表示」が異なるので、表示してみるまで結果がわかりません。 というわけでテスト。 ●まずは見出し系 使えるのは<h2>かな。h2にはbackground-colorも設定。 h1 test h2 test h3 test ●リスト系 まあ、普通。 ul li のテスト ul li のテスト ul li のテスト ●テーブル うーんなんとかborderとかは
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
basara-company.biz
Webサイト高速化対策の現状
html5-memo.com
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ