絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

25 件中 1 - 25 件表示
カバー画像

プロのWeb開発エンジニアが教える、これからHTML+CSSを勉強したい人の勉強方法

Webシステム開発の会社、Nickel Lab. です。今回は弊社のエンジニアがオススメする、HTML+CSSを覚えていきたい人の為の勉強方法を公開します!この方法を実践すれば、がむしゃらに勉強をするより素早く習得することができますので、是非試してみて下さい。よくつまづくポイントは皆同じHTML+CSSを始めるとつまづくポイントはいくつかありますが、皆さん大体同じだったりします。なにがわからないのかわからないできないところを検索しても解決できないある程度わかった後でも、プロみたいな綺麗な作り方がわからないそれ!と思った方には、今回の記事はかなり効果的かなと思います!実践はとても簡単です。順番通りにやってみましょう。1.HTML+CSSの基本中の基本を覚えよう(むしろ基本だけでいい)どんな方法でも、基本中の基本をある程度把握していなければ、手を動かすことができないものです。なので、やっぱりそこは触っておきましょう。HTMLであれば、・<head>と<body>・cssの読み方・見出しと文章の書き方・<div>の使い方・タグにclassを指定する方法これだけ!これだけわかればある程度のものは作れるようになります。フォームを作ったり、クリックしたら何か出来たり。といった事は後回しにしましょう。タグでいうと、以下のものがわかれば大丈夫です。<html><head><body><h1> <h2><p><div>まずはこれらのタグを使って、適当な小説から文章を構成してみて
0
カバー画像

『Wordpress』プラグインをインストールする方法

こんにちは、山本佑樹です。先日からWordpressのプラグインについてご紹介させていただいておりますが、今回はそのプラグインのインストール方法を3つご紹介させていただきます。①WordPressの管理画面からインストールこちらが1番簡単な方法になります。以下がインストールの流れです。1、Wordpressの管理画面にログイン2、左側のメニュー「プラグイン」より「新規追加」をクリック3、右上の検索ボックスにインストールしたいプラグインを入力4、「今すぐインストール」をクリックして有効化これでインストールは終わりです。基本的にはこの方法でインストールするのが簡単なのでオススメです。②プラグインのファイルをアップロードWordpress公式配布サイトなどからダウンロードしたファイルをアップロードしていきます。1、Wordpress公式配布サイトからプラグインを検索し、Zipファイルをダウンロード2、Wordpress管理画面の「プラグイン」より「新規追加」をクリック3、「プラグインのアップロード」をクリック4、「ファイルを選択」もしくは「ドラッグ&ドロップ」でインストールあとは有効化して完了です。有料で購入したプラグインなどはこちらの流れでインストールすることになるかと思います。③FTPファイルに直接ダウンロードこちらはあまり使う機会はないかと思いますが、念のためご紹介致します。1、自身が利用している「FileZilla」「Cyberduck」などのFTP画面を開く2、「ドメイン名 → public_html → wp-content → plugins」とクリックし、pl
0
カバー画像

『Wordpress』プラグインを導入する際に注意したいこと3選

こんにちは、山本佑樹です。昨日はWordpressのオススメプラグインをご紹介させていただきましたが、今回はプラグインを導入する際の注意点を3つ挙げさせていただきます。Wordpressのプラグインは種類も豊富で便利なのですが、いくつか気をつけなければいけないことがありますので、ご参考ください。注意点①「必要なプラグインだけインストールする」プラグインは多く入れすぎるとファイルが重たくなり、サイトのパフォーマンスに影響してきます。なので、できるだけ不要なものは入れない方がいいでしょう。注意点②「ウイルスに注意する」プラグインをインストールすることでウイルスに感染するケースもあるようです。(私は経験がありませんが・・)対策としては、口コミや評判を確認する、Wordpress公式のプラグインをインストールする、更新日がかなり古いプラグインは避けるなどが挙げられます。導入したいプラグインを一度自身で調べるてみるのがいいでしょう。注意点③「一つ一つ順番にインストールする」プラグイン同士で干渉を起こし、不具合が生じる場合があります。もしそうなってしまった場合に、どのプラグインが原因か特定しにくくなってしまいます。プラグインを導入した際は、サイトの表示などに不具合が出ていないか都度確認するようにしましょう。以上、3つの注意点をご説明しました。今後Wordpressを作成する際に、少しでも参考になれば嬉しいです。
0
カバー画像

業務遂行にあたって意識していること

✅納期より速く納品する→納期ギリギリで納品すると予想していなかった変更などに対応できなくなるため、クオリティを担保するためとお客様の要望に答えやすくするために余裕をもって制作していくことが重要です。✅連絡がつきやすい仕組みをつくる→常にテキストメッセージではお客様の工数を減らす工夫をしております。✅納期時は追加で悩みごとがないかを確認する→ご依頼いただいた内容以外にもお悩みごとがないかを毎回お聞きするようにして、お客様の目的達成に少しでも近づくように意識しております。以上のことを意識し、いただいたお仕事には常に120%コミットするようにしております。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

屋号「Lifement」の由来

僕がフリーランスとして活動するために使用している屋号の「Lifement」ですが、Life(人生)とmoment(瞬間)を組み合わせた造語になります。また、「ment」は動作を表す英単語に使われることが多く、人生は常に行動し続けることでより良いものになる。今この瞬間を心から楽しみ、前に進み続けるという意味を込めています。過ぎ去った時間に囚われず、この変化の目まぐるしい時代の中で先の未来を見据えて、今この瞬間を大切にして行動する。お客様とともに瞬間瞬間を全力で楽しみ、未来を明るくする。「Lifement」はお客様に寄り添いWebの力を活かして、時代の変化を楽しみ続けたい。という想いのもと屋号を決めました。僕自身、個人でお仕事を進めることもありますが、チームで開発をしたりして上手く分業し、お仕事を行うことも多々あります。自分の専門スキルを最大限に活かしつつ、得意ではない分野は他の人にお願いしているので、屋号にふさわしく「今この瞬間を心から楽しみ、前に進み続ける」ということを体現できているかと思っております。フリーランスとして活動していて本当にお仕事が楽しいので、今後も日々精進していきます!今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

可読性が良くなるコードの書き方

可読性の高いコーディングをするために意識していることは、・Sassをネストさせない→入れ子を活用すると短期的には効率良くコードは書けますが、デベロッパーツールからエディタへ検索がしにくかったり、入れ子が深いと可読性が悪くなってしまう。・プロパティの順番に規則性を持たせる→ABC順だったり、視覚順など規則を設けることが大切です。・クラス名は極力省略しない→「category」なども「cat」と省略しない方が、役割が分かりやすいです。サイトの保守•拡張性を良くするのは、デザインを再現することと同じくらい大切。「作って終わり」ではないことをクリエーターとして心得ておくことが必要ですね。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

STUDIOでのコーディング代行を承っています

はじめまして鈴木と申します。普段はwebサイト制作を行っております。皆さんはホームページ制作というとHTMLによるコーディングによる作成を思い浮かべるかと思いますが、実はコーディングをしなくてもホームページを作成できることをご存じですか?現在私はSTUDIOというツールを用いてサイト制作を行っております。STUDIOの特徴はHTMLコーディングをしなくても簡単に直感的にホームページ制作を行えることです。HTMLコーディングのいらないホームページ制作ツールにはWixやペライチなどもありますが、これらはカスタマイズの自由度が低いというデメリットがあります。しかし、STUDIOはノーコードツールでありながらデザインの自由度もかなり高いことが特徴です。簡単に直感的にHTMLコーディングよりも速くおしゃれなサイトが作成できるSTUDIOであなたもホームページ制作をしてみませんか?現在、STUDIOによるコーディングを承ってます。
0
カバー画像

サーバーにアップしたCSSファイルが反映されない時の解決法

XserverにWEBサイトをアップしたのですが、CSSファイルを修正して再度アップしてサービスにアクセスしてブラウザで表示したところ・・・CSSが反映されない!!!!ことが何回かありました。対処法下記の解決法を試してみました。1.ブラウザ側のキャッシュを削除する2.サーバー側のキャッシュを削除する3.Disable cacheにチェックを付けてリロードするちなみに私は1.ブラウザ側のキャッシュを削除するで解決しました。そもそもキャッシュって?キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組み。1.ブラウザ側のキャッシュを削除する①GoogleChromeのデベロッパーツールを開くGoogleChrome上で表示された画面でoption+⌘command+Iを押すもしくは画面上で右クリック→検証をクリックすることでデベロッパーツールを起動できます。②リロードボタンを右クリックしてキャッシュの消去とハードの再読み込みをクリックします。ちなみに、PHPファイルをブラウザだけで表示している場合に修正箇所が反映されないことがよくあるのですが、この方法で解決します。2.サーバー側のキャッシュを削除するサーバーに公開しているサイト・サービスの場合はブラウザ側だけでなくサーバー側にキャッシュが残っている場合があるみたいなのでこれを削除する方法です。Xserverでのサーバー側のキャッシュを削除方法を説明します。①Xserverのサーバーパネルにログインする②サーバーキャッシュ設定をクリックする③修正したいサイトのド
0
カバー画像

【続・続】ウェブページ制作珍道中…『少しずつコーディングにも慣れてきた!』

印刷媒体や動画の制作に慣れていると、ウェブ制作がいかに大変かがわかります。というのも、印刷デザインや動画編集の場合は直感的に作業ができるのですが、ウェブの場合はHTMLやCSSなどのコードを書き込むことで組み立てていくという、間接的な行程が待ち受けているのです。最近はワードプレスなどもあり、WordやExcel感覚で作ることもできて便利になりましたが、現在使っているAdobeのアプリに「Dreamweaver」というウェブ編集アプリケーションがあり、それを利用しています。白い背景の部分はHTMLと呼ばれる「ウェブの骨格部分」。灰色の部分はCSSと呼ばれる「骨格に肉付けや色などを盛り付けていく部分」。一つずつ数値などを当てはめていき、ダメだったらやり直す…の繰り返しです。ところで、私の場合はウェブデザインの参考本のほかに、Adobeのサイトで視聴できる「ウェブ制作の手引き」動画を見ながらメモをしていました。動画を見ながら実際に少しずつ組んでみて、コードをプリントアウトしてルーズリーフに貼り付けて、マーカーで線を引きメモをしていく…の繰り返し。そうしないと、すぐに忘れてしまう。そのほかに気がついたことを逐一メモをしていきましたので、総ページ数が200を超えました。ルーズリーフの輪に収まらないほどにまで、膨れ上がっています。でも、後々これが大いに役に立つのでした。というわけで、架空の食堂をイメージして作り上げたウェブサイト。ホームのページはもちろん、各ページもスマホとPCで表示が切り替わる「レスポンシブデザイン」を取り入れました。ホームはイメージ写真を背景にドーンと載せる「フルスクリ
0
カバー画像

7記事で300View

たくさんの方々に読んでいただきまして、本当にありがとうございます。これが多いのか少ないのか、他の方の情報がありませんので、正直よく分かりませんが、ココナラで本格再始動してまだ1週間ちょっと。別段、SNSで発信することもなく、純粋にココナラを利用されている方、利用を検討されている方が読んでくれたのかなと思っています。これほど多くの方に読んでいただけるものなんだという感謝と、新規でお仕事いただけたことにも感謝感謝の限りです。今後も私たちの想いと、新たにHPを持つ方・リニューアルされる方に有益な情報が提供できればと考えています。またココナラで書くのも変ですが笑、私たちは「お客様ご自身で作業ができること」をサポートさせて頂くこともそのミッションと考えています。スタートダッシュの後押しは私たちの仕事。それ以降はお客様ご自身で楽しんでHPを管理していただける。そんなブログも投稿できればと考えています。今回は取り急ぎ、お礼まで。
0
カバー画像

【Micro CMS】静的サイトを高く売る方法 3/5【完全無料】

Micro CMSの解説記事、第3回目です。今回からはいよいよ、投稿した記事をサイトに表示させますよ!前回の記事はこちら↓APIキーを使ってデータを読み込もうでは前回作った、メニューコンテンツを表示させていきましょう!まずはブラウザでAPIを表示させるために、sdkを読み込む必要があります。これはごく普通に、HTMLファイルに記載すればいいだけですね。ですが、公式のドキュメントにGetting Startedとして雛形が用意されていますので、それをまるっと使用しましょう。service-domain というところと api-key というところは、自身の使用しているmicro CMSのドメイン、APIキーに書き換える必要があります。※注 前回の記事でも記載しましたが、これから行う方法はブラウザ上でAPIキーを読み込む方法です。APIキーがそのままソースに表示されるため、実際にサイトとして公開することはセキュリティ上おすすめしません。理由等は前回の記事をご覧ください。また次回の記事では、公開しても問題が内容にAPIキーを隠す方法を記載する予定です。service-domain は XXXX.microcms.io の XXXX 部分をそのまま記載しておきます。シングルコーテーションは削除せず、残しておくよう気をつけてください。APIキーの確認方法作成したメニューコンテンツを表示し、表示させたい記事をクリックすると、右上に以下のような「APIプレビュー」という表示があるかと思います。それをクリックします。すると以下の画面になります。キャプチャでは塗りつぶしてありますが、X-API-
0
カバー画像

【Micro CMS】静的サイトを高く売る方法1/5【完全無料】

はじめまして。Web制作会社で勤めています鐘倉(かねくら)と申します。今回から5回にわたって「静的サイトを高く売る方法」というテーマで連載をしていきます。※ここでいう静的サイトとはWord Press等のCMSを使わずHTML、CSS、javascriptで作成されたサイトを指します。単価が上がらない...Web制作を始められた方はまずHTML,CSSから入るかと思いますが、ひと通りコーディングが身に付いてくると直面する問題があります。それは、「静的サイト(not CMS)」だと単価が上がらない...といった問題です。でもHTML、CSSを使いこなせるって実はすごいことですよね。だってHTML、CSSができればそれだけでめちゃくちゃかっこいいサイトが作れちゃいますもの。ですが実際のところ、静的サイトのコーディングができる人は数が多いです。ライバルが多い=需要に対しての供給が多い、であれば単価が上がらないのは市場原理ですよね(汗ですからある程度静的サイトコーディングができるようになってくると、やはりWord PressなどのCMSを覚えようかな...となってくるわけです。そんなこんなで奮起してWord Pressを覚えたはいいものの、Word PressでのWeb制作はそれはそれで悩みが多いです。ええ、かなり多いです...涙CMSのコスパの悪さ自身もWeb制作会社でCMSと日々格闘していますから本気で実感しているのですが、CMSでフルのWebサイトを作成するのは実はかなりコスパが悪いです。CMSで制作するがゆえにデザインに制約が出てしまったり、HTML+CSSだけであれば簡単にコ
0
カバー画像

僕がコーディングを続けている理由

Web制作を始めてから、多くの技術を習得してきました。僕がコーディングを続ける理由は、学生時代から前職で会社員として働いていたときも「モノを作るのが好きだったから」です。「好き」という気持ちがWeb制作に向いている感じです。フリーランスは好きを仕事にしやすいので毎日楽しく過ごせております。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

保守性の高いコーディングを迅速に行うために実践していること

コーダーなら保守性の高いコーディングを行うことが大事です。保守性を高くするために意識していることは、・CSS設計の理解・BEM、FLOCSSベースでの記述・制作着手前に動的部分の把握・EJSを活用・パーツの共通化(共通化しすぎないことも大事)・クラス名は意味を明確にする・CSSの詳細度は適当にしないなどです。始めの理解は難しいですが、コツコツやっていきましょう。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

コーディングでの検索力を上げる方法

コーダーなら誰しもググることからは逃れられないと思うのですが、技術的につまづいたときの僕なりの解決のコツがあります。それは「技術的に信頼のおける方のブログをブックマークしておくこと」です。実装に迷ったときは、Google検索する前にその方々の記事を参照して解決を図るとかなり効率的に自己解決できます。既に誰かがまとめてくださっているものはフル活用していきましょう。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

コーディング着手前にデザインカンプで確認すること

デザインカンプをいただいた際に確認することは様々あるのですが、以下の項目は意外と抜けがちな気がします。•余白ルールが統一されているか•共通パーツ(3つ目以降から共通化)•フォント(有料フォントに注意)•動的コンテンツ部分•アニメーションの挙動これらは、のちの工数の影響が大きいので確認必須です。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

第4回コーディング講座を開催いたしました!

3月5日にコーディング講座を開催いたしました。今回は記事部分のコーディングをしました。こちらも「文字数が増えたらどうか」を考えて、表示崩れが起きないようなコードの書き方を解説しました!サイトを作るにおいて大切なことは、「デザインを再現すること」はもちろん、「動的にコンテンツが変化した場合」を想像してコーディングすることが大切なので、そのことについてもお話しました。以下は実際に使用した資料を抜粋したものになります。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

第3回コーディング講座を開催いたしました!

2月19日にコーディング講座を開催いたしました。3回目はカードタイプコンポーネントの並べ方について解説しました!4種類のBlockを用いてBEMの解説をしたので、かなり理解が深まる内容にできたかと思ってます!BEMの理解は実際にサイトを作ってみるとようやく分かるものだと思うので、参加してくださった方が実案件でも品質の高いコードが書けると嬉しいです^^以下は実際に使用した資料を抜粋したものになります。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

第2回コーディング講座を開催いたしました!

前回に引き続き、2月5日にコーディング講座を開催いたしました!初回はコーディング部屋の概要説明とCSS設計についてのことを主に語らせていただきましたが、今回はがっつりカードレイアウトをコーディングしました!カードは頻出パーツなので、迷いなくコーディングができるようになっていったほうがいいと思うのでここはスニペットとして持っておくのもありですね。以下は講義に使用した資料の抜粋になります。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

第1回コーディング講座を開催いたしました!

前回のブログで記載しましたが、現在は現役のコーダーとしても活動しつつ、コーディング講師としても活動しております。1月22日に行なった初回の講座ではCSS設計の概念を伝えつつ、実際にボタンをコーディングしながら、実践形式でお話をしました。以下のスライドは使用した資料を抜粋したものになります。今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

最近の活動について

コーダーと活動して始めて、今に至るまでCSS設計やGulp、EJSなどなどかなり応用的な知識を学んできました。最近はコーディングの案件以外にもコーディング講師としても活動しております。具体的には、CSS設計の考え方を共有しながらライブコーディング形式で20~30分ほど講義を行なっております!知識をアウトプットすることでさらに学びを深まっていくことを実感しているところです。今後もこちらのブログで活動報告を行なって行く予定なので、フォローやお気に入り登録してくださるととても嬉しいです!!よろしくお願いいたします!
0
カバー画像

案件受注

案件受注しました。期待に応えるられるよう丁寧に全力で取り組みます。
0
カバー画像

保守性の高いきれいなコード

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう
0
カバー画像

【要素を縦並びにしたときに、順番を入れ替える】

【要素を縦並びにしたときに、順番を入れ替える】 スマホ画面のときなど 縦並びにするだけなら display: block; だけでOK。 さらに、順番を変えたいとき 親要素に display: flex; flex-direction: column; 子要素に order:  ;で順番を指定すると 要素の順番を意図的に変えれます片メガネをかけた顔
0
カバー画像

【カード型レイアウト】

カード型レイアウトを実装の際 display: grid;で3行でシンプルに実装できます display: grid; /*gridレイアウト指定*/ gap: 30px; /*隣り合う要素間の数値を指定*/ grid-template-columns: repeat(3,1fr); /*カラム数の指定*/ コードがシンプルになり使いやすい
0
25 件中 1 - 25
有料ブログの投稿方法はこちら