サムネイルをCOOLにポップアップ表示 - Highslide JS | caramel*vanilla

2006/10/14 2634 users lightbox caramel*vanilla Cool

Lightbox風ポップアップ表示ライブラリ サムネイルをポップアップ表示といったらLightbox JSが有名で、2やらPlusやら様々なバリエーションも生まれました。 今日みつけたHighslide JSはLightboxのようにサムネイルをポップアップで表示してくれるのですが、ボーダーや角丸デザインのバリエーションがあり、写真をよりいっそうCOOLに見せてくれるライブラリです。 *非商用サイ... 続きを読む

素人っぽいデザインから脱却するための12のデザインチップス | webox blog

2011/08/30 1234 users webox blog 素人っぽいデザイン クオリティ 1px

クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。... 続きを読む

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

2010/06/13 1225 users CSS 日刊ウェブログ式 見出しデザイン hタグ サンプル集

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 見出し(Headline)のサンプル集 色やボーダーのサイズ等の装飾部分をお好みで編集してください。 見出しサンプル01 .selector01 { border-left:... 続きを読む

対人ストレスから解放されたフリーランスの末路（体験談）｜ゎ｜note

2019/04/09 1084 users 末路 Note フリーランス 筆者 フルコミット

精神疾患や生きづらい性格を抱える人の中には、会社で働くことが苦痛で、フリーランスになることを夢見ている人がいるかもしれない。 筆者は、境界性パーソナリティー障害（ボーダー）であり、集団の中で穏便になじむのが困難であるためフリーランスを選んでいる。過去3年間は会社にフルコミットをしたが、2018年度は、... 続きを読む

女の子たちが考える女の子の褒め方 - 銀色のホットカルピス

2009/08/22 1025 users 銀色 メイク 協議 褒め方 結果

女の子数人で話していて興味深かったのでUPします。「彼氏以外の男性から褒められて嬉しいところ」と「彼氏以外の男性から褒められて気持ち悪いところ」。そのボーダーについて*1。協議の結果→「女の子がさりげなく気をつかっている、かつ、“見せたい”と思っているところを褒める」のがベスト。で、「メイクとか、細かいことについて言われると引いてしまう」。＋「ある程度アバウトに褒められるのがいい。具体的に指摘され... 続きを読む

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

2012/07/10 718 users コリス セレクタ グリッド シャドウ グラデーション

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利... 続きを読む

CSSの擬似要素を使った見出しデザイン｜Webpark

2013/01/27 633 users before After Webpark 見出し 都度

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「... 続きを読む

大自然がキャンバス――スノボ界の開拓者 國母和宏の美学 - Yahoo!ニュース

2017/07/14 540 users 美学 キャンパス スノボ界 Yahoo 開拓者

スノーボーダー・國母和宏について、7年前のバンクーバー五輪での騒動で記憶が止まっていたとしたら、あまりにももったいない。彼はいまや欧米でスターとして扱われているのだから。闘う相手は他のボーダーではない、自然の野山だ。雪山の山頂からノーヘルメットで一気に滑り降りる。バックカントリー、フリーライディングと呼ばれる世界である。オフシーズンに家族とともにくつろぐ國母が哲学を語った。 （ライター・中村計／Y... 続きを読む

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ | コリス

2014/04/25 540 users div コリス エレメント font-size指定 CSS

CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく... 続きを読む

配色決めにも利用できる！色について詳しく調べられるサイト「Color Hexa」*二十歳街道まっしぐら

2012/02/01 526 users 配色決め 反対 二十歳街道まっしぐら フォント 見た目

Color Hexa 色のことがよく分かるサイト Color Hexaは色に関する情報をたくさん教えてくれるサービスです。 色の構成から似た色、反対の色などなど。 Webサイトの配色決めなどにも利用できそうですよ。 フォントや背景色、ボーダーにその色を使ったときの見た目も教えてくれます。 以下に使ってみた様子を載せておきます。 色について調べる 続きを読む 続きを読む

デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック | コリス

2017/10/19 497 users 長方形 正方形 シャドウ コリス アイコン

文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか？ WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効... 続きを読む

1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo

2009/12/21 442 users CSS outer margin rounded inner

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0p... 続きを読む

吉田カバンのポーター買うのに楽天ショップ「GALLERIA」をオススメする9つの理由 - トラねこの巻

2014/09/05 426 users galleria PORTER 長持ち 吉田カバン とらねこ

2014-09-06 吉田カバンのポーター買うのに楽天ショップ「GALLERIA」をオススメする9つの理由 まとめ スポンサーリンク 僕は吉田カバンのポーター（porter）が好きで愛用してます。 丈夫で長持ち、デザインも落ち着いていてビジネスからプライベートまで凄く合うんですよね。かばん屋行くと必ずポーターの新作チェックしてます。しかしいい物だけあってひとつ10000円以上と値段もいいのです(^... 続きを読む

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

2023/02/27 369 users ネスト CSS PHP HTML カスタマイズ

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズ... 続きを読む

10秒以内にウォーリーを探す合理的な方法 : ギズモード・ジャパン

2015/03/17 360 users ウォーリー ギズモード サイエンス 絵本 ころ

サイエンス 10秒以内にウォーリーを探す合理的な方法 2015.03.17 20:00 これが大人だ！ 「ウォーリーを探せ」って絵本、覚えてますか？ そう、このごちゃごちゃした人混みから赤と白のボーダーの服を着たウォーリーを探し出すゲーム。子どものころ必死で探した覚えがあります。でも見つけられないときって、ほんとに見つからないんですよね…。試しに今すぐ探してみてください。上の画像のウォーリー、いま... 続きを読む

知ってると便利なCSSのテクニックのまとめ -CSS Protips | コリス

2015/10/05 326 users コリス Chrom Flexbox CSS ナビゲーション

リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地左右の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrom... 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users border-radius コリス 絵筆 div ラッパー

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む

店のシャッター、スケボーでぼこぼこ　繁華街の商店街が終日乗り入れ禁止へ　神戸（神戸新聞NEXT） - Yahoo!ニュース

2022/02/22 281 users スケボー 繁華街 シャッター 道交法 人通り

スケボーの乗り入れ禁止に踏み切る三宮センター街１丁目商店街。人通りの多い日中は道交法の規制対象となり得る＝神戸市中央区三宮町１ 神戸・三宮の三宮センター街が、スケートボードの乗り入れに頭を悩ませている。今年１月、深夜に若者とみられる複数人のボーダーが店舗のシャッターを破損。店側が兵庫県警生田署に被... 続きを読む

ドラッカーなんて誰も読まない!? ポーターはもう通用しない!? ―― 学問としての経営学 | SYNODOS -シノドス-

2013/05/11 254 users 飯田泰之 synodos 金子昂 ドラッカー スカイプ通話

経営学と聞いて経営者名言集や列伝をイメージする人も少なくないだろう。いったい経営学とはどのような研究を行っているのか。『世界の経営学者はいま何を考えているのか』の著者でありアメリカで経営学を研究する入山章栄氏と経済学者・飯田泰之が、世界の経営学について、学問のあり方について繰り広げる、太平洋をはさんだスカイプ通話による日米間対談。（構成／金子昂） 国際化が遅れている日本の経営学 飯田　経営学につい... 続きを読む

[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート | コリス

2009/10/12 250 users コリス HTML 概要 CSS サイドバー

サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。HTMLは、コンテンツとサイドバー... 続きを読む

CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

2022/07/13 241 users CSS コンテナ 実装 テクニック 背景

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と...記事の続きを読む 続きを読む

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania

2013/03/23 233 users delaymania CSS 一例 見出し テキスト

WEBデザイナーの@delaymaniaです。 テキストの左側と下側だけをボーダーで囲ったデザインの見出しって、いろんなブログで良く見かけますよね。 CSSだけで作る見出しとしてシンプルで使い勝手がいいので僕も多用してます。 「どうやって作ってるんですか？」という質問をいただいたので(ツイートで解決しちゃったんだけど)、CSS初心者向けに見出しのデザインの一例としてご紹介します。 見出しのデザイン... 続きを読む

CSS3 での背景指定方法のまとめ | Unformed Building

2011/08/23 205 users Unformed Building プロパティ CSS 背景

CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3 現在の仕様です。 CSS 背景 & ボーダー モジュール ... 続きを読む

rocketdolphinの日記 - イケメンは何着てもかっこいいけど、ブサイクは何着てもかっこ悪い

2006/08/31 204 users rocketdolphin キモヲタ ブサイク 途中 イケメン

((引用元:２ちゃんねる・ニュース速報板『Tシャツの上にボーダーやチェックのシャツを羽織っているのは大体キモヲタ(笑』『結論イケメンは何着てもかっこいいけど、ブサイクは何着てもかっこ悪い　★2』) Tシャツの上にボーダーやチェックのシャツを羽織っているのは大体キモヲタ(笑5 名前：番組の途中ですが名無しです 投稿日：2006/08/30(水) 14:30:48 ID:0qk/qURy0また俺たちか... 続きを読む

境界性人格障害からは逃げるべきです。 - ボダ被害に遭わない、逃げ切るためのブログ

2014/06/14 202 users ボタ 境界性人格障害 明言 境界性パーソナリティ障害 ブログ

2014-01-29 境界性人格障害からは逃げるべきです。 境界性人格障害 境界性人格障害、最近では「境界性パーソナリティ障害」、英語のBorderline Personality Disorderから「ボーダー」「ボダ」とも言われる病気です。 なお、最初に明言をしておきます。 このサイトは境界性人格障害者のためのブログではありません。境界性人格障害者はサイトを見ずに別のサイトへ移動してください。... 続きを読む