CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
みなさんは、サイトをスクラッチで作る時にどうされていますか? HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか? それは、 パーツが完璧に揃いすぎている! のが原因です。 Twitter Bootstrapがバージ
InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる!と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた!Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか?Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
WebサービスHTMLからツイッターbotの作り方まで無料で教えてくれるプログラミング学習サイト『ドットインストール』が素敵2011年12月22日367 @JUNP_Nです。プログラミングってハードルが高いイメージです。今でこそ何となくわかったり使えるようになったHTMLやCSSも最初は意味不明な文字の羅列でした。そんなプログラミング言語を無料でしかもわかりやすく教えてくれる学習サイト「ドットインストール」の紹介です。 1コマのコンテンツが3分だから空いた時間に学習できる 3分動画でマスターする初心者向けプログラミング学習サイト|ドットインストール ドットインストールの良いところは3分という短いコンテンツと、今までの学習履歴を管理しやすいというところ。 ログインしたらホーム画面に学習中の項目がどこまで進んでいるかをひと目で確認することができるし、完了したレッスンも確認することができる。 現
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く