おさえておきたい代表的な欧文フォント24
セリフ体（Serif） セリフとは文字のストロークの端につく飾りのこと。「うろこ」、「ひげ」とか呼ばれたりもする。古代イタリアの石刻文字が起源と言われています。 セリフの形である程度の分類が可能です。おおまかに以下４つに分類される。 オールドフェイス セリフ部分がブラケット（三角形）になっているもの。縦線≒横線。伝統的なセリフ体。 Century,Garamondなど モダンフェイス セリフ部分がヘアライン（細い直線）になっているもの。縦線>横線。近代的なセリフ体。 Bodoniなど トランディショナル オールドフェイスとモダンフェイスの中間に位置するセリフ体。 Times New Romanなど スラブセリフ 縦線≒横線。セリフが直線で文字のストロークとほぼ同じ幅のセリフ体。 Rockwellなど それでは実際にフォントを見て行きます。 Century Microsoft Officeに
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
iPhoneとVPSを連携！ ｢さくらのVPS SSDプラン｣で自分だけのサーバーを構築した
iPhoneとVPSを連携！ ｢さくらのVPS SSDプラン｣で自分だけのサーバーを構築した2013.02.06 11:00Sponsored サーバーいじるの楽しいよ。 ギズをご覧の方でサーバーを使われてる人ってどれくらいいるんでしょう？ この記事では今けっこう熱い｢VPS（バーチャルプライベートサーバ）｣についてと、iPhoneとVPSを組み合わせた応用技をご紹介します。ギズではかなり珍しいシステム的なサーバー構築記事です。 VPSはレンタルサーバーの1つで、共有サーバーに仮想OSをインストールさせて、あたかも専用サーバーに見立てているもの。1台のサーバーに複数のサーバーが動いてるというイメージが分かりやすいかと思います。 見立てているというのが重要で、こうすると専用サーバーと同等の機能が使えるようになり、使用ユーザーは比較的自由にサーバーをいじれるので非常に人気が出ています。それと、
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -
HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ
ベンダープレフィックスの整理整頓｜Web制作 W3G
Updated 2014.03.23 / Published 2013.10.25 2013年はGoogleがApple主導で開発していたWebkitから分離し、ChromeとOperaがレンダリングエンジンをBlinkへと切り替える大きな出来事がありましたので、ブラウザベンダーが勧告予定のCSS仕様の先攻実装を示すベンダープレフィックス（接頭辞）の整理整頓についてまとめてみましょう。 各情報の出典としてはCan I useを利用しており、各UA名称部分はIEはデスクトップ版Microsoft Internet Explorer, Chromeはデスクトップ版Google Chrome, Firefoxはデスクトップ版Mozilla Firefox, Safariはデスクトップ版Safari, Operaはデスクトップ版Opera, iOSはiOS Safari, AndroidはAndr
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
WEB Drawer
サイトの更新で、「〇〇」という単語を全部修正するみたいな作業が発生する場合があるのですがその際対象ページのURLを出したい場合の方法です。 DreamWeaverで検索してxmlとして出力する まずDreamWeaverでサイト全体を検索し...
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
Webサイトの作り方のまとめ！コーディングまで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
高速・軽量・高機能……Nginxの基礎知識
処理能力の高さなどを理由に、近年、大規模サイトを中心に急速にシェアを拡大しているWebサーバー「Nginx」。この連載では、その特徴と魅力を分かりやすく紹介します。 第3のWebサーバーとして注目を集めるNginx 1日に数億リクエストを処理するような大規模サイトを中心に、近年急速にシェアを拡大しているWebサーバーが「Nginx（エンジンエックス）」です。HTMLドキュメントや画像ファイルといった静的コンテンツを高速で配信し、消費メモリが少なく、リバースProxyやロードバランサーといった機能も有した注目の軽量Webサーバーです。ネットクラフト社の調査によると、2014年6月時点でApache HTTP、Microsoft IISに次ぐ第3位のシェアを獲得しています。 依然としてApache HTTPやMicrosoft IISのシェアは高いものの、Nginxの認知度は日に日に高くなって
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選：Webサイト作成手順を勉強するまとめ（3）（1/3 ページ） 新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。 前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトに
センス良し！スマホサイトのデザインギャラリーサイト10選\ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
スマホサイトのデザインを考えるときに参考になりそうなサイトを10サイトご紹介します。どれも参考になりますよー！
![センス良し！スマホサイトのデザインギャラリーサイト10選\ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/44431ef804130f3a0dd6b23915b35bd367a44002/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47492699.jpg)
素材辞典、イラスト、フォントのことならデザインポケット
タイプフェイス 明朝体 角ゴシック 丸ゴシック 楷書体 宋朝体 清朝体 教科書体 行書体 草書体 勘亭流 江戸文字 デザイン毛筆 古印体 隷書体 篆書体 POP体 手書き風書体 リアル手書き デザイン書体 新聞書体 アンチック体 字幕書体 その他 セリフ サンセリフ 欧文手書き 筆記体 ブラックレター ディスプレイ
TAM｜クリエイティブ・テックエージェンシー
一緒に悩んで、 創って、 成果に喜びます。 TAMが目指す姿は創業した30年前から変わらず、 お客様に愛される「共創パートナー」。 上場企業をはじめ、多くのクライアントと長くお付き合いさせていただいています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://abcyahhh.com/
http://www.osu.ac.jp/~kazuto/sub2.html
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
Skillhub [スキルハブ]
