Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現) - kojika17
置換前の文字と検索、置換の対応 特定の文字からHTMLを作成 (.*)と$による呼び出しを覚えれば、様々なことに応用ができます。 下記の文字から、HTMLのリストを作成してみましょう。 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing https://www.bing.com/ Yandex https://www.yandex.com/ 百度 http://www.baidu.com/ 用意した文字は「タイトル」「スペース1つ」「URL」というルールになっています。タイトルとURLを(.*)に置き換えて検索し、li要素とa要素に置き換えます。 例 置換前の文字 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing ht
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました 2015-07-22 Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。様々なIDEやエディタに対応しています。 アドビ公式ブログの「Adobe Creative Station」でEmmetの連載をはじめてました。 全6回中4回まで掲載されたので、補足を含めて紹介します。 Emmetの連載 アドビ製品の機能などを紹介する「Adobe Pinch in」というサイトで連載のはじめましたが、現在は「Adobe Creative Station」に移行して、連載を行っています。 連載内容は以下のとおりです。 第1回 Emmetを薦める理由 第2回 Emmetの省略記法を使って、HTMLを素早く入力する 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ 第4回 Emme
Sassで視覚的にレイアウトを変更してみる
Sassで視覚的にレイアウトを変更してみる 2015-05-22 Almost Profoundの「Sass Pixel Art」という記事で、レンダリング用のマトリックスからアイコンを作成する方法が紹介されていました。 この方法を応用すれば、Sassで視覚的にカラムを変更できるのではないかと思ったので、やってみました。 マトリックスのルール 「Sass Pixel Art」で紹介されていたマトリックスは、スクリーンショットのような感じで紹介されています。 Sassを利用して、視覚的にアイコンを作成できるように工夫されています。 ただこのマトリックスをよく見てみると、何かに似ています。 2015年3月にWorking Group Noteに移動してしまった「CSS Template Layout Module」です。 この仕様のEXAMPLE 43を見ると、「Sass Pixel Art」
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
Markdown記法
HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 - kojika17
最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit:
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
IE8から始めるテーブルレイアウト と IE10からのFlexible Box
IE8から始めるテーブルレイアウト と IE10からのFlexible Box 2012-11-08 テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table; display: table;はIE8以降のtable要素に、デフォルトスタイルシートで定義されているものです。 IE8からサポートされているのでIE7以下を切り捨てれば、今からでも使うことができます。 display: table;以外にも多くの値が存在し、tableを形作る要素に振り分けられています。 以下は、tableに振り分けられているCSS
Emmet CSSショートコード
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
コーディングスピードはまだ上がる！！ <br>Zen-Coding カスタマイズ
コーディングスピードはまだ上がる！！ Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍！10倍！上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
Zen-Codingの次期バージョン、Emmet について - kojika17
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
