HTML/CSSを学ぶ 【複数行対応】たった4行のCSSで、長すぎる文章を3点リーダーで省略する
こんにちは。例えばブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらの文章が長すぎるとレイアウトを崩す原因になってしまいますから、何らかの方法で省略をする必要があります。バックエンドアプリケーション側で文字...
HTML/CSSを学ぶ HTML/CSSを学ぶ marginとpaddingの違いと正しい使い分け方を完全解説
こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。要素の外側はmarginで内側はpaddingという説明もされたりしますが、そうは言っても実際のコードを書くと迷ってしまいませんか？そんなmarginと...
Web制作の考え方を学ぶ 【フリーランス8年目が語る】Web制作とWeb開発は似て非なるものである
こんにちは。皆さんはWeb制作とWeb開発の違いをきちんと理解していますか？この2つは非常に似た言葉ですが、全く違うものを指しています。これらを混同してしまうと、間違ったものを学んでしまう可能性があります。そこで今回はこの2つの言葉が具体的...
WordPressを学ぶ 一瞬でWordPressをテスト、ローカル環境から本番環境へ移行する方法
こんにちは。WordPressサイトの開発って、テスト環境やローカル環境から本番環境へのアップロードで手間取ることが多くないでしょうか。テーマファイルだけならFTPでアップロードすれば良いですが、一部プラグインの設定があったりします。Adv...
WordPressを学ぶ 「Local」を使って数クリックでWordPress開発環境を構築する
こんにちは。Web制作を学習していく上で、よくWordPressはやった方が良いと耳にすると思います。WordPress開発を学ぶ上で、まず最初に立ちはだかる壁が「環境構築」ではないでしょうか。2022年3月24日現在「wordpress ...
WordPressを学ぶ ConoHaサーバーでWordPressの表示速度を最大限に！速度最適化の実践ガイド
こんにちは。今回はサイトの表示速度を上げる時に、「サーバー選定」という観点から改善する方法を解説していきます。一般的にレンタルサーバーといえば「エックスサーバー」や「さくらのレンタルサーバ」をよく耳にすると思います。もちろんこれらのサーバー...
HTML/CSSを学ぶ 【コピペ可】どんなテキストにもCSSで蛍光ペンのようなマーカーを引く方法
はい、今回はテキストにこんな感じでマーカーを引く方法を紹介していきます。オレンジの線で区分けしていますが、画像のようにテキスト部分のみと行全体の場合の両方を紹介します。テキスト部分のみコード<p class="Text"> ダミーテキストダ...
HTML/CSSを学ぶ 【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
こんにちは。今回はパララックス表現を行うためのプロパティ、background-attachment: fixedがスマホ、特にiOSのSafariで動かない問題を回避するための方法を書いていきます。結論（コピペ可）最初にコードを載せておき...
HTML/CSSを学ぶ Sass、別に言うほどいらない説
こんにちは。プログラミングスクールとか、いろんな教材見ているとやたらにSassをやらせているように見受けられます。しかし、実際の現場でSassが効力を発揮している場面って実はあまり多くないのでは？と感じています。少なくとも初心者がSassを...
JavaScriptを学ぶ height: auto;（＝高さ可変）なアコーディオンメニューの作り方
はい、今回はアコーディオンメニューについてです。このメニューはwebデザインにおいて採用されることが多く、実装の機会も多くなります。そこで良く出会うのが、「height: auto;にアニメーションが効かない」問題です。コーダーをやっている...