Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 デモページ ※リンク切れ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。 スラッシュで区切ることにより、水平
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク·PocketGrid MOONGIFT
PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。 Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。 サンプルです。左が30%、右が70%のコンテンツです。 幅を狭めても比率を維持しています。 よくある三層のWeb構造です。 このように組み変わります。 比率を維持させることもできます。 より複雑な表示です。 レスポンシブに並びが変わっています。 維持させることもできます。 元がこれで… 隙間をなくす設定も可能です。 PocketGridはピュアなCSSだけで作られています。レスポンシブだけでなくセマンティックにも対応しています。メディアクエ
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
CSS専門のスニペット共有サイト・CSSPop
コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
Creatorish is for sale at Squadhelp.com!
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
CSS3だけで作るボタンデザインいろいろ
