Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
Twitter Bootstrapで固定ナビゲーションを使う - CMS専門 Web開発者ブログ
Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。 簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは？ Twitter（ツイッター）社が提供しているBootstrap（ブートストラップ）はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。 使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にする ページの上部にあるナビゲーションを固定ナビゲーションにします。 スクロールしても同じ場所にあり続けます。 常にページ内の同じ位置にあり続けますのですぐにアクセスできます。 １．基本 body 要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fixed-
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
イケてるUIのデザインパターンを集めたサイト「Design Patterns on CodePen」 | ライフハッカー・ジャパン
「Design Patterns on CodePen」はイケてるUIのデザインパターンを集めたサイトです。CodePenというHTML、CSS、JavaScriptのコードを共有することができるサイトがあります。その中から、特に優れたUIを集めたのがこのサイトになります。その場で実行され、動作の確認もできますし便利ですね。 以下に使ってみた様子を載せておきます。まずDesign Patterns on CodePenへアクセスしましょう。「ボタン」「メールフォーム」「ページング」「タブ」などのUIパーツごとにカテゴライズされています。 詳細はこのように表示されます。コードが上部にあり、下部にそれを実行した結果が表示されます。コードを書き換えるとリアルタイムで結果も変わるので便利ですね。気に入ったUIを見つけたら、その作り方を参考にしてみましょう。ぜひUIを考える際にもご活用ください。 D
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
RIAに代わる技術、実用的SPAについて考える～第7回エンタープライズ×HTML5ナイトセミナー～
RIAに代わる技術、実用的SPAについて考える～第7回エンタープライズ×HTML5ナイトセミナー～ 佐川 夫美雄（Ashiras, inc.） Appleショックにより禁じ手となったFlex、Silverlight、JavaアプレットなどのプラグインベースRIA製品の代替として、SPA(Single-page Application)が注目を集めています。HTML5の高度なオフライン機能を大規模開発で利用する際にも重要な役割を担う技術です。 しかしながらその実装方法には、ベンダ製品からOSS製品まで、思想も実装もバラつきがあります。何をもって正しいとするのか、どのような判断基準により選定するのかも、難しいという状況ではないでしょうか。 2014年1月27日に開催されたhtml5jエンタープライズ部による「第7回エンタープライズ×HTML5ナイトセミナー」。会場はKDDI様品川イーストワンタ
DeNAが社内利用しているMySQLの自動フェイルオーバーツール、オープンソースで公開開始
MySQLがダウンしたときに自動的に別のMySQLへ処理を引き継ぐことで、高可用性を実現するフェイルオーバーツール「MySQL-MHA: MySQL Master High Availability manager and tools」がオープンソースとして公開されたことを、作者の松信嘉範（まつのぶよしのり）氏がブログで伝えています。 Yoshinori Matsunobu's blog: Announcing MySQL-MHA: "MySQL Master High Availability manager and tools" 松信氏はモバゲーなどで知られるDeNAに勤務しており、MySQL-MHAによる自動フェイルオーバー機能はDeNAのインフラ運用を支えているとのこと。同氏のブログから引用します。 Difficulties of master failover is one of
自由ソフトウェア - Wikipedia
この記事は中立的な観点に基づく疑問が提出されているか、議論中です。 そのため、中立的でない偏った観点から記事が構成されているおそれがあり、場合によっては記事の修正が必要です。議論はノートを参照してください。 (2018年2月) 最近の自由ソフトウェアのオペレーティングシステムの例。いくつかの代表的な自由ソフトウェアを実行している。画面に表示されているのは、Xfce デスクトップ環境、Firefox ウェブブラウザ、Vim テキストエディタ、GIMP 画像編集ソフト、VLC メディアプレイヤーなどである。 自由ソフトウェア（じゆうソフトウェア、英語: free software、libre software）[1][2][3]とは、ユーザーがどのような目的に対しても実行することを許可し、また、プログラムについて研究したり、変更したり、それを配布したりする自由も認めることを条件として配布される
OracleがGoogleを訴えた理由、「AndroidはJavaと競合する」はどういう意味だろうか
米国で、オラクルがグーグルを著作権侵害で提訴した、というニュースが流れています。なぜオラクルはグーグルを訴えたのか、その裏にどのような思惑が隠れているのでしょうか？ その解説をPublickeyのゲストブロガーとして、ITジャーナリストの星暁雄さんに書いてもらいました。また、記事の要所には星さん自身のブログへのリンクがありますので、興味がある方は参照してみてください。 AndroidがJavaの特許と著作権を侵害している？ 2010年8月12日、OracleはGoogleを訴えた（関連記事）。Oracleの主張は「AndroidがJavaプラットフォームに関する特許と著作権を侵害している」というものだ。 一方Googleは翌8月13日に「訴訟には根拠がなく、Googleとオープンソース・コミュニティへの攻撃である」との声明を一部メディアを通して発表した（関連記事）。今後両社は全面対決するこ
Solaris 11は来年登場、SPARCは2年ごとに2倍の性能向上を約束。その陰でOpenSolarisは方針転換へ
Solaris 11は来年登場、SPARCは2年ごとに2倍の性能向上を約束。その陰でOpenSolarisは方針転換へ サン・マイクロシステムズを買収したオラクルが、今後のサーバ戦略を米国で発表。6年ぶりの新バージョンとなるSolaris 11は、来年2011年に登場、そしてSPARCでは2年ごとに少なくとも性能を2倍にすると、同社エグゼクティブバイスプレジデント John Fowler氏（写真）が明らかにしました。 発表のポイントを紹介しましょう。 2015年には128コア、64TBメモリへ オラクルのサーバ戦略の要は、「Oracle Applicationsのためのベストな“オープン”サーバ」であること。オラクルのソフトウェアはもちろん、SAP、IBM、SASなどさまざまなアプリケーションを実行するためのサーバであること。 少なくとも2年ごとに2倍以上のアプリケーション性能を提供する。
MySQLの将来が心配なので、（たぶん）日本一のMySQLエキスパート「日本男児」に聞いてみた
オラクルは、サン・マイクロシステムズを買収後、オープンソースとして提供されていたOpenSolarisを事実上終了し、またオープンソースとしてAndroidを提供しているグーグルに対して「Javaと競合する」という理由で訴訟を起こすなど、オープンソースに対して非協力的と見える行動が続いています。 こうなると、同社が保有するオープンソースデータベースのMySQLの今後は大丈夫なのか懸念されます。すでにMySQLのコアな開発者の何人かは同社を去り、MariaDBやDrizzleといったほかのオープンソースデータベースに取り組んでもいます。今後、MySQLの開発が弱体化したり、方向転換してSolarisのようにクローズドになったりすることはないのでしょうか？ そこでMySQLのエキスパートとしてブログ「漢（オトコ）のコンピュータ道」を執筆するブロガー「@nippondanji」であり、かつ日本オ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Demonstrating Responsive Design
マウスオーバーをデザインする | DesignWalker
Visual Studio Community - Visual Studio
Design Patterns on CodePen
TechCrunch | Startup and Technology News