はてなブックマーク

「取扱商品一覧ページを簡単につくりたい」 「商品の入れ替えが多いので、簡単に差し替えられる商品一覧ページをつくりたい」 画像は3つ、4つと横に並んだ商品一覧ページ。 整然と並ぶとスマートですし、何よりお客様に一度に見てもらえるメリットがあります。 https://ladies-sample.shop-pro.jp/ ただ、商品一覧ページをつくるときは、今後の更新作業が問題になりがちです。 Webデザイナーさんに現状の商品一覧ページをつくってもらうのは簡単なことですが、商品が入れ替わるたびに修正を頼むとコストがかさみます。 特に食品や雑貨、アパレルなど。季節で商品がガラッと変わるものは一回の更新で一度に入れ替えることができるページをつくっておきたいですね。 WordPressでつくられたWebサイトであれば、プラグインひとつで商品一覧ページをつくることができます。プラグイン「Content

CSSSの設計 CSSSはシンプルで理解しやすい反面、破綻しやすい言語ともいわれています。 サイトの規模が大きくなるにつれ、CSSのコード量も増えます。 そのような場合、重複しているコードや無駄なコードなどが発生してしまうことが多いです。 CSSをできるだけスマートかつ扱いやすいようにするのがCSSの設計です。 CSSを設計する上で、意識するポイントは以下の3つになります。 ・保守性 ・可続性 ・再利用性 この3つを維持し続けるのが、CSSを設計する目的です。 具体的な方法をこれから説明します。 CSSの名称 CSSの設計を説明する前にCSSの各パーツの名称について説明します。 セレクタ セレクタとは、スタイルを適用させたい対象をいいます。 以下のようなモノがセレクタとして設定されます。 ・id名 ・class名 ・pタグ ・hタグ ・aタグ ・ulタグ ・liタグ ・headerタグ ・

WordPresのテーマ開発といえば、MAMPで環境開発を整えて開発をおこなうのが主流でした。 しかし、いま主流となっているのが「local by flywheel」で環境開発を整えてWordPressの開発をおこなうスタイルです。 「local by flywheel」は、使いやすいデザインと機能性が高いことで人気を集めています。 今回は、「local by flywheel」のインストール方法や本番環境への移行方法を紹介します。 「これからWordPressのテーマを開発したい」と考えている方には、local by flywheelがおすすめです。 local by flywheelとは 「local by flywheelってなに？」と思う方もいるでしょう。 local by flywheelは、WindowとMacで利用できるロカル開発環境をつくるアプリケーションです。 MAMPと

Pug（Jade）の特徴やメリット、基本的な使い方、導入方法についてまとめました。Pugをご存じない方にもご理解いただけるように、できるだけ丁寧に解説していきますね。 Pugの基礎知識 まずはPugの基礎知識から見ていきましょう。Pugの特徴やメリットについてもまとめています。 Pugとは？ Pug（旧Jade）とは、HTMLを書くためのJavaScriptテンプレートエンジンです。 » Getting Started – Pug（公式ドキュメント） » Pug · GitHub（GitHubリポジトリ） PugはJST（JavaScript Templates）の一つとして知られ、同じくHTML系のテンプレートエンジンであるHamlに影響を受けたとされています。 ※Hamlについては、話が逸れるのでここでは割愛します。興味のある方は、下のリンクからHamlの公式サイトをご覧ください。 »

ホームページを使って集客・PRするためには、見やすく美しい装飾が必要です。 ホームページを美しく装飾するためには、CSSのスキル・デザインツールなどを使用します。 「CSSの使い方があんまりわからない..」や「どんなデザインツールを使えばよいのかわからない」という人もいるでしょう。 今回は、そのような悩みを抱えている人のためにCSSのツールやデザインツールなどを紹介します。 ホームページを制作・リニューアルしたい人は、ぜひ参考にしてください。 CSSツール まずはCSSのツールから紹介します。 CSS3 Generator カラー設定・色合いなどを簡単に調整できるCSSツールです。 完成したイメージを見ながら調整できるのが、便利なポイント。 制作したCSSコードは、コピーして貼り付けるだけで使えます。 制作したコードは、WEBブラウザはもちろん、Android・iOSなどにも使用可能です。

ホームページを制作する上で必要となるプログラミング言語は、HTML、CSS、PHP、JavaScriptなどが挙げられます。 これらのプログラミング言語は、それぞれ役割や機能を持っています。 「今からプログラミングを始めたいけど、どの言語から勉強すればいいの？」このような悩みを持つ方も少なくないと思います。 そのような悩みを解決するために本記事では、HTML、CSS、PHP、JavaScriptの違いや使い分け方を現役エンジニアの視点から説明します。 未経験の方やプログラミング学習を始めたばかりの方は、言語の違いや特徴を理解することで、学習効率が格段にアップするので、この機会に覚えておきましょう。 HTMLとは HTMLはWebサイトを制作する上で必ず必要になります。 この言語は土台の役割を果たしており、家で例えると骨組みに相当します。 具体的には文字、画像の表示や文章を構成するための言語

皆さん、エディタは何を使っていますか？ 今回は海外でも日本でも大人気、一度使ったら恋に落ちるエディタ「Sublime Text」について紹介いたします。 Sublime Textは「見やすい」、「書きやすい」、「使いやすい」の三拍子揃った万能なエディタになります。 この記事を最後までお読みいただければ、インストールから便利な機能まで、簡単にマスターすることができるので、今使っているエディタに不満がある、使いやすいエディタを知りたい方は、ぜひ参考にしてください。 インストール Sublime TextはWindowsとMacの両方で使うことができますが、使うためには、インストールする必要があります。 現在（2017年10月15日）の最新バージョンは「Sublime Text 3」になり、ダウンロードするためには公式ホームページにアクセスしてダウンロードします。 http://www.subl

MySQLはWeb制作では欠かせないツールの一つです。ホームページやWebアプリの開発でも使われていますし、WordPressやMovable Type、EC-CUBEなどの大手CMSでもMySQLが採用されています。 本記事のテーマは、MySQLの基本的な使い方です。MySQLのインストール手順から、基本的な文法、代表的なGUIツールについても併せてご紹介しています。 MySQLの基礎知識 はじめにMySQLの基礎知識について簡単にまとめておきましょう。公式サイトにも解説があるので、併せてご覧いただければと思います。 » MySQL MySQLとは？ MySQLは日本を含む世界中で使われているデータベース（データベース管理システム、RDBMS）です。世界中で最も普及しているオープンソースのRDBMSで、Web関連の制作物ではスタンダードとも言われるほど頻繁に採用されています。 もともとは

Webアプリケーションの開発に使えるHerokuの基礎知識や利用する時のポイントについてまとめました。Ruby on Railsを中心にWeb開発を便利にしてくれるクラウドサービスなので、使えるようになっておくことをおすすめします。 Herokuとは？ 早速、Herokuの基本から解説していきましょう。Herokuというサービスの基礎知識や利用可能な言語の種類、料金プランなどを解説していきます。 Herokuの基礎知識 » Cloud Application Platform | Heroku Heroku（ヘロク）とは、Webアプリケーションの開発を便利にしてくれるサービスです。いわゆるPaaS（Platform as a Service）にあたるクラウドサービスで、アプリケーションの実行環境を提供してくれます。 Webアプリケーションの開発では、実行環境は必須です。実行環境と一言に言っ

Webページの要素にアニメーションが付けられるjQueryプラグインについてまとめました。デザインでのちょっとしたアクセントになるだけでなく、使いようによってはユーザビリティ向上にもつなげられます。とはいえ、使いすぎは禁物です。使いどころをよく考えながら、上手に使っていきましょう。 Animate.css » Animate.css その名の通り、アニメーションが実装できるjQueryプラグインです。使えるアニメーションの数がとても多いことが特徴的でしょう。 「Bounce（バウンス）」や「Fading（フェードイン、フェードアウト）」などのよく知られたものから、「hinge（ヒンジ）」などおもしろいアクションも使えます。 Hover.css » Hover.css – A collection of CSS3 powered hover effects その名の通り、要素にホバーした時の

パララックスを実装するためのjQueryプラグインについてまとめました。パララックスデザインの基礎知識も掲載していますので、パララックスをはじめて聞いた方にもぜひご覧いただければと思います。 パララックスとは？ 本稿のテーマはWebデザインの最新トピックであるパララックスです。本題に入る前に、パララックスとはどういったものなのか解説しておきましょう。 パララックスとは、Webデザインで最近注目されている手法の一つです。国内外のWebサイトで利用されていて、パララックスという言葉は知らなくても日ごろから目にしている方は多いことでしょう。なお、パララックスは日本語では視差効果と訳されています。 百聞は一見にしかず、ということで、実際にパララックスを採用しているサイトを見てみましょう。例として、シンガーソングライターの森山直太朗さんの公式サイトをご紹介します。 » 森山直太朗オフィシャルサイト

リセットCSSの基礎知識と、おすすめのリセットCSSについてまとめました。リセットCSSと一言に言っても、その特徴はさまざま。シーンに応じて、最適なリセットCSSを使っていくようにしましょう。 ※ご紹介したリセットCSSを利用したりカスタマイズする場合は、各リセットCSSのライセンスを確認するようにしてください。 本題に入る前に、リセットCSSとはどういったものなのか簡単にご紹介しておきましょう。 リセットCSSとは？ このページをご覧の方はご存じの方が多いかと思いますが、Webページは主にHTMLとCSSから出来ています。HTMLはページ構造やコンテンツを司っていて、CSSはデザインやレイアウトを指定しています。 さて、ご存じのようにブラウザにはさまざまな種類があります。Google ChromeやMozillaが開発しているFirefox、Macなどのアップル製品にお馴染みのSafar