ホームページ制作者が知っておくべき恐ろしく便利な６２のサービス＋α

2010/09/14 3873 users サービス ツール Webデザイナー向け 軽量化 限り全て

今回はホームページ制作者・WEBデザイナー向けに 便利で使えるサービスを知る限り全てまとめてみました。 （海外サービスは解説サイトにリンクしているもの有り） CSS・ワードプレス関係（８） CSS Sprite Generator サイト内で使う画像を１つにまとめてくれるツール。 １つ１つのCSSまで作成してくれます。サイトの軽量化に。 YAML Builder ドラッグ＆ドロップだけでマルチカラ... 続きを読む

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】 | eureka tech blog

2017/12/13 3803 users フェードイン 挙動 HTML 最強 全力

エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「 Goのフレームワーク“Revel”を触ってみた 」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き 最近、HTML要素をフェードイン/フェードアウトする実装をし... 続きを読む

TEST CORDING » Sass:共通のプロパティをまとめる様々な方法をCSSと比較してみた

2012/10/17 3087 users Sass Orange font-size color 共通

今回のエントリーでは、 Sass による共通のプロパティや設定をどうまとめるかについて書いてみます。結局どうやって書くのが安定しているのか？ ということを試行錯誤する際に参考にしてみてください。 CSS 元となるCSSソース div.container h1 { color: orange; font-size: 20px; } div.container ul { font-size: 20px... 続きを読む

TEST CORDING » Sass：CSSで描く図形36種をたった一行で書けるようにしてみた

2012/10/04 3087 users Sass 図形 一行 TEST CORDING アニメーション

Sass を使って一行で図形を書いてしまうというエントリーです。前回のエントリーである「Sass：CSSで描く図形13種をたった一行で書けるようにしてみた」に引き続き、少し複雑な図形21種類を追加しました。 どんな感じで実装しているのか、というのは前回のエントリーに任せて、今回は書けるようになった図形の一覧を見ていただこうと思います。また、基本図形とは違ってホバー時のアニメーションには対応していま... 続きを読む

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

2011/11/07 2951 users z-index フロート 必須 レイアウト 配置

CSSの視覚整形モデルについてのまとめです。CSSでレイアウトするときに必須な配置についてのレポートです。フロート、相対配置、絶対配置、z-indexなどはもちろん、通常フローや包含ブロックなど、基本的な部分をまとめてみました。最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間... 続きを読む

CSSの知識をもっと深める30+2の小技テクニック集｜Webpark

2011/05/11 2337 users 復習 Webpark 小技テクニック たくさん 新しい発見

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。 続きを読む

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

2010/02/22 2247 users Zen-Coding コーディング EC studio 3倍

最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動... 続きを読む

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

2011/10/11 2159 users jQuery jQu HTML 表現 webデザイン

Webデザインに欠かせない？jQuery。HTML と CSS はわかるけど、 jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQu... 続きを読む

良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと | 秋田県webデザイナー【weblog】

2012/02/23 2085 users Illustrator Weblog Photoshop

デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良... 続きを読む

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2010/04/14 2024 users 実装 Webクリエイターボックス CSS小技集 コード 少し

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む

10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。

2016/04/03 1980 users ツケ react-router redux React 日々

2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + ... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2017/07/07 1897 users div全体 Webクリエイターボックス 目次 実装 小技

2015年3月17日 CSS 2011年に「 少しのコードで実装可能な20のjQuery小技集 」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2015/03/17 1897 users 偶数 div全体 奇数 Webクリエイターボックス 目次

2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変... 続きを読む

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

2011/06/16 1640 users 挙動 クセ CSSサンプル Webテクニック スタイルシート

CSSでWebデザイン、レイアウトするときに気をつけておきたいブロックレベル要素のクセをもとめてみました。ブロックレベル要素をdisplay:inlineしたときや、floatさせたときなどの挙動などを中心にCSSサンプルも作りました。スタイルシートでレイアウトするときに参考にしてもらえればうれしいです。Webテクニック CSS Share Webデザインをするときに必ず使うスタイルシート。思うよ... 続きを読む

HTMLからツイッターbotの作り方まで無料で教えてくれるプログラミング学習サイト『ドットインストール』が素敵 * 男子ハック

2011/12/22 1636 users ドットインストール 男子ハック HTML 作り方 JUNP

JUNPです。プログラミングってハードルが高いイメージです。今でこそ何となくわかったり使えるようになったHTMLやCSSも最初は意味不明な文字の羅列でした。そんなプログラミング言語を無料でしかもわかりやすく教えてくれる学習サイト「ドットインストール」の紹介です。 1コマのコンテンツが3分だから空いた時間に学習できる 3分動画でマスターする初心者向けプログラミング学習サイト｜ドットインストール ドッ... 続きを読む

CSSによる段組（マルチカラム）レイアウト講座

2006/03/16 1583 users ブラウ position float カラム マルチカラム

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

WordPressで記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技*frasm

2012/05/13 1580 users YouTube frasm shintarowfresh

最近困ったことはプラグインとCSSが大抵解決してくれると思ってます ほんとにプラグインとCSSは知らないと損することがてんこ盛りでね。「てんこ」って何よ@shintarowfreshです。 貼り付けるビデオの幅、変更できるって知ってますか？ とりあえず、コンテンツの横幅一杯になってくれたら便利だと思いませんか？ はいこれ。 YoutubeやHTML5video等の埋め込み動画のサイズをwindow... 続きを読む

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

2017/03/07 1568 users コピペ

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを50つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。 この記事の目次 シンプル系 おしゃれ系 グラデーションを使った見出し アイコンフォントを使った見出し かわいい系 使用する際のコツ 続きを読む

CSSのコーディングが光の速さになるかも知れない、っていうかなったwebジェネレーター「OneClickCSS」*frasm

2013/03/06 1566 users 一撃 面倒 アレ frasm OneClickCSS

泣いた。 最近ちまちま自分のブログのCSSなんかを変更かけてるんですが、クラスとかいちいちアレするのがめんどうなんですよね。もう、面倒。 この辺の面倒さというか、ちまちま感がカスタマイズしてみたいけど、なんかアレだわって人多いと思います。はい。 そんなわけで、コーディングするためのタグやらコードやらを一撃で自動作成してくれるの、あります。 OneClickCSS+ どういう風にえげつないかと言うと... 続きを読む

CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め

2011/04/21 1555 users 半日 ころ Webテクニック スタイルシート トラブル

CSS、スタイルシート初心者の頃悩んだりハマったことを少しまとめてみました。フロートまわりのトラブルや、IE特有のhasLayout問題など。Webテクニック BeginnerBrowserCSS Share CSS、スタイルシート。初心者のころにはCSSのスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近ではやっとひと通り覚えて思うようにできるかなーという感じです。今回... 続きを読む

WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド

2012/10/09 1535 users PHP WordPress WEB製作 ガイド ブログツール

WordPress で Web製作をしたいけど、PHPはまだちょっと ... という初心者さん向けの PHP ガイドです。PHP の基本的なことのほんの一部ですが、簡単にまとめてみました。PHPの基本構文や変数、関数などについて書きました。WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして ... 続きを読む

「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

2012/05/09 1524 users 原文 書式 REFLECTDESIGN 文書 HTML

4/24に公開された「Google HTML/CSS Style Guide」が面白そうだったので適当に訳してみました。長いので各項の細かい説明は省いてます。より詳細に知りたい方は、原文を読んでみてください。 Google HTML/CSS Style Guide この文書の背景 この文書は、HTMLやCSSの書式とスタイルのルールを定義するものです。コードの品質が維持される場合に限り、難読化、最... 続きを読む

JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜

2016/05/19 1501 users サル 一つ一つ HTML 要素 JavaScript

今回はJavaScriptの基本について話をします。 JavaScriptではWebページに様々な動きをつけることができ、これまでHTMLやCSSしか触ってこなかった人が、より多くのことをWeb上でできるようになります。 この記事では、そんなJavaScriptの基本を簡単に入門できるようにまとめました。 一つ一つの要素は簡単だけど、少し量が多いというのが大変なところ。ですが、この記事だけで基本的... 続きを読む

CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG

2013/02/07 1473 users Compass 初耳 応用 株式会社LIG 常識

こんにちは、デザインナーの王です。CompassのおかげでCSSを書くのが楽しくなってきている今日この頃です～～ この記事を読んでいるあなたは多分以下二つのタイプに分けることが出来るでしょう。 なんとなく「Compass」という言葉を小耳に挟んだことがあって、いずれは導入しようとは思っているがなかなか行動に移せないでいる。 「Compass」？初耳だがCSSの代替品って言うからちょっと興味が湧いた... 続きを読む

初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-

2011/05/23 1472 users WEB Drawer Web制作 iPhone メモサイト

スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの... 続きを読む