軽い・簡単・使いやすい！3拍子揃ったおすすめのCSSフレームワークをご紹介【2023年最新版】｜PRONIアイミツ
HTMLは、webページを制作するのに欠かせないものです。しかし、HTMLだけでは見栄えのいいWebページを制作できません。 マークアップ言語であるHTMLは、タイトルや段落を含む文書構造は指定できるものの、最新版のHTML5ではフォントの指定や大きさ・カラーなどの装飾はできないため、webページの見栄えを良くするにはスタイルシートを組み合わせなければなりません。この装飾を指定するのに使われるスタイルシートがCSS（Cascading Style Sheets）というわけです。 当初はフォント、背景、テキスト、ボックスといったシンプルなレイアウトや装飾に使われていたCSSですが、CSS3からは手軽にアニメーションが表現できるようになり、CSS3を活用したこだわりのボタンデザインなども良く見かけるようになりました。一方で、デザインにこだわればこだわるほど、CSSの記述が複雑になり時間がかかっ
FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT
※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。 Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計があるの？ F、L、O、Uの4つに分けよう Foundation Layout Object Utility FLOU設計のメリットは？ レイアウトが劇的に楽 CSSの見通しが良くなる FLOUで書くときのポイントは？ まとめ どんな設計があるの？ CSS設計について調べてみると、OOCSSだとかSMACSSだとかFL
【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10
フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで本稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か？ フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性
Open Source Ruby on Rails Content Manager - Refinery Content Manager
The most popular Ruby on Rails CMS With more than 825,807 downloads, 3,890 watchers on GitHub and 384 contributors, Refinery is the leading open source CMS on the Ruby on Rails framework. View on Github Latest stable gem version 4.0.3 - Last updated 2023-05-22 by GitHub. Refinery CMS is perfect for creating custom content manageable websites. We use "The Rails Way" where possible so you have to le
Bootstrapを使ってみる（その３） ～グリッドシステム～ - 一から開発技術を鍛え直すブログ
Bootstrapの続き。 今回はグリッドシステムについて試してみる。 今回のソースファイルはこちら FlyingHighAgain/bootstrap-test · GitHub １２分割でレイアウトする BootstrapではHTMLの表示項目をレイアウトするのに、画面横幅を論理的に１２分割した擬似的なグリッドでレイアウトを指定する。具体的にはclassに"col-md-"などで始まり数字を付加したクラス名を付け、数字の合計が１２になるように指定する。 例えばこんな感じ。 <div class="container show-grid"> <p>12分割</p> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-
プログラミングの必要なし！簡単にスマホアプリが開発できるツール9選
アプリ開発をしてみたいけれど、プログラミングがわからないから諦めてしまったという方は少なくないのではないでしょうか。 ところが最近はプログラミング知識がなくても簡単にアプリ開発ができるサービスがどんどん登場しており、ノンプログラマでもアプリ開発ができるようになっています。 これより、プログラミングの知識がない方でも簡単にスマホアプリが開発できるツールを11個厳選してご紹介しますので、iOSやAndroid(アンドロイド)のアプリ開発をしてみたい方はぜひ使ってみてください。 レバテックフリーランスはITエンジニア専門の フリーランスエージェントですまずは相談してみる Yappli https://yapp.li/ 「Yappli」は、iOSとAndroidアプリをブラウザで制作できるツールです。 ブラウザ上でドラッグ＆ドロップするだけでアプリを作れるため、プログラミングの知識は必要ありません
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。
先週書いた10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。という記事がまずまずの反響を得たのですが、僕の予想とは異なり、「こんなに多くのツールやフレームワークを必要とする現状はおかしい」といった、状況批判の意見が多く集まりました。 Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており、この半年間ほどは「実際にどの組み合わせがベストか」という議論が行われていました。そして、そういった議論もようやく落ち着きを見せ、おおよそ僕が書いたような組み合わせに帰結しつつあります。 そのため、まさか「フロントは変化が激し過ぎる」とか「保守が大変そう」などといったような、1年くらい前に言われていた意見が、いまだに多くを占めるとは、まったく予想していなかったというのが正直な意見です。ひと昔まえであれ
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Service Design Park - プロジェクト事例紹介：介護業界向けコミュニケーションサービス
こんにちは、株式会社コンセントのサービスデザイナー、赤羽太郎です。 さて今回ぼくの記事では、サービスデザインの実際のプロジェクト事例について書いていきます。 ※ちなみにこの事例についてはコンセントのコーポレートサイトにも事例として紹介されていますが、ここでは、途中の紆余曲折や、どんな手法を用いたか、というプロセスをちょっとだけ掘り下げてお伝えします。 まず、このプロジェクトのクライアントはカシオ計算機株式会社様です。同社にとって未知の市場である「介護」に関わる課題を解決することをスコープとして、最終的に冒頭画像のスマートフォンアプリ「DaisyCircle」を開発・リリースしました。 クライアントからのオーダーには現在進行形で超高齢化社会へと突き進む日本において、今後あるべき家族の形を描き出したい、という思いがありました。今回のプロジェクトはそれを実現するためのソリューション、というわけで
プログラミングの開発環境に便利！Cloud9の使い方【Rails・WordPressテンプレートの解説あり】
プログラミングの開発環境に便利！Cloud9の使い方【Rails・WordPressテンプレートの解説あり】 プログラミングの開発環境に便利な【Cloud9】の使い方を解説した記事です。登録方法、ワークスペースの作成、画像ファイルのアップ方法などを紹介。最後にはRuby on RailsとWordPressのテンプレートの使い方も解説。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 これからプログラミングを勉強するという初心者にとって、最
Bootstrapだけじゃない！デザイナー必見のCSSフレームワーク5選
デザインを簡単に制作することのできるCSSフレームワークは、ウェブデザインでは大いに活躍してくれます。特に、TwitterがリリースしているBootstrapはCSSフレームワークの中では圧倒的な人気。しかし他にも魅力的なCSSフレームワークはいくつも知られています。制作するデザインや開発体制によって、最適なCSSフレームワークを選択していきたいものです。本稿では、おすすめのCSSフレームワークをその特徴とともにご紹介していきます。 CSSフレームワークとは？ ところで、そもそもCSSフレームワークとはどういったものなのでしょうか？おすすめのフレームワークについてご紹介する前に、CSSフレームワークの基本について簡単に復習しておきましょう。 ホームページやウェブサービスなどのウェブ制作物は、いくつかのプログラミング言語で作られています。中心となるのは、HTMLとCSSでしょう。HTMLとは
スマホのレスポンシブデザインで右側に余白ができる場合 | Web Design Leaves
レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。 HTML の構造は以下のようなもの。 <body> <div id="header" class="clearfix"> <div id="header_inner"> <h1 id="logo">タイトル</h1> </div> <div id="navi"> <ul id="navi_menu" class="clearfix"> <li><a href="index.html">Home</a></li> <li><a href="works.html">Works</a></li> <li><a href="statement.html">Statement</a></li> <li><a href="#" class="disabled">Resume</a></li> <li
【Bootstrap】DIV本体を中央寄せするにはOffsetを上手く使えば良い
Offsetクラスは左側に空のカラムを入れてくれる お恥ずかしい話、理解力の乏しい私は最初Bootstrapのドキュメントページを見た時にOffsetクラスの意味があまり良くわからなかったのです。 でもまあ簡単に言うと左側に指定カラム分の空白を作れるということですね。 「左側」というのが重要です。 画像で説明すると下記のようなイメージ。 「col-xs-4」のカラムの左側に「col-xs-offset-4」分の空白が出来ることが分かるかと思います。 中央寄せするグリッドカラムパターンは５種類 Bootstrapでは一つのrow（行）のカラム数が「12」と決まっていますので、中央寄せするのには下記の５パターンになっています。 ① .col-xs-10 .col-xs-offset-1 ② .col-xs-8 .col-xs-offset-2 ③ .col-xs-6 .col-xs-offse
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
SINAP | 注目のプロトタイピングツールまとめ-アプリのUIデザイン
こんにちは。デザイナーの飯山です。 夏の暑さも都内では落ち着きすっかり秋めいてきました。9月のシルバーウィークの過ごし方に想像を膨らませる今日この頃です。 さて、今回は数多くあるプロトタイピングツールの中から注目の�ツールをまとめてご紹介したいと思います。「なぜ？」「なにそれ？」という方もいらっしゃるかもしれないので、シナップでのプロトタイピング活用事例について少し触れたいと思います。 SINAPではR&D活動に取り組んでいます。新しい技術や制作手法を用いてトライ&エラーを繰り返すR&D活動では、アジャイル型の開発で進めていることもあり各種プロトタイピングツールをその時の目的に応じて使用しています。 R＆D活動の近況はSINAP Journalでも掲載していて、SINAPのR&Dチームのひとつで取り組んでいるブラウザで読める電子書籍公開サービス『パン』β版にも掲載されてるのでご興味ある方は
Prototyperを使ったモックアップ主導のUI設計プロセス
ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査（理解）を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ
Best Free Website Builder Software [2023]
FREE WEBSITE BUILDER SOFTWARE Create awesome websites on your computer! No code & free. Publish anywhere. What is Mobirise? Mobirise is a free offline downloadable app for Windows, Mac, Linux to easily create small/medium websites, landing pages, simple web stores. 8000+ beautiful website blocks, templates and themes help you to start easily. For whom? Mobirise is perfect for non-techies who are n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
キャンバス・マップをまとめてみる(後半) | GuildWorks Blog
キャンバス・マップをまとめてみる(前半) | GuildWorks Blog
