20200326のCSSに関する記事は9件です。

【wordpress】【css】【PHP】cssが更新されないor読み込まれない

メモです

CSSの読み込みはどこに書く?WordPress公式マニュアルに書かれている正しい手順。

以下、追加

functions.php

function add_css_js() {//関数名add_css_js()を作成
    //CSSの読み込みはここから

    //全てのページにstyle.cssを読み込み
  wp_enqueue_style('style',get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );

    //全てのページにcss/store.cssを読み込み
    wp_enqueue_style('store', get_template_directory_uri().'/css/store.css');

    //固定ページスラッグcontact か 投稿ID46の記事 か カスタム投稿タイプadd_newsの記事 か カスタム投稿タイプadd_newsの一覧だった場合、css/store2.cssを読み込み
    if (is_page('contact')||is_single(46) || is_singular('add_news') || is_post_type_archive('add_news')) {
        wp_enqueue_style('store2', get_template_directory_uri().'/css/store2.css');
    }

    //JavaScriptの読み込みはここから

    //全てのページにjs/pagetop.jsを読み込み
    wp_enqueue_script('pagetop', get_template_directory_uri().'/js/pagetop.js');

    //トップページのみ
    if (is_home()) {

    //js/main.jsをfooter直下で読み込み  
        wp_enqueue_script('main', get_template_directory_uri().'/js/main.js', array( 'jquery' ), '', true); 
    }
}
//関数名add_scripts()を表側で呼び出す
add_action('wp_enqueue_scripts', 'add_css_js);

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[CSS]フォントの太さをさらに太くする

[CSS]フォントの太さをさらに太くする

文字の太さは、CSSのfont-weightプロパティで変更することができます。
タイトルなどには、太字を使った方が強調されて、また、本文とのメリハリもつくので、全体的に整って見えます。

本記事では、font-weightプロパティ以外に、さらに文字を太くしてみたいと思います。
これは軽く思いついたネタなだけなので簡単に行きたいと思います。

方法

今回はtext-strokeプロパティを使います。text-strokeプロパティは文字の縁取りをするもので調べるとかなり縁取りの仕方などがサイトに載っています。
```
// HTML


Hello World.

// CSS
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 2rem;
font-family: Arial;
font-weight: bold;
color: black;
-webkit-text-stroke: 2px black;
}
```
今回は文字と縁取りをあえて同じ色にすることによって文字を少し太くしています。あんまり変わらないかもしれないですし、すごく役に立つネタでもなんでもないですが、使い方として面白いかと思いました。以上です。

補足

こんなことだってできます。文字をただ縁取る以外の使い方も面白いですね。
スクリーンショット 2020-03-26 22.38.00.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【css】【flexBox】【レスポンシブ】w100%で、3つ並べて、3つの間隔を均等にしたい

メモです

イメージ
スクリーンショット 2019-11-07 17.31.11.png
間隔を保ったまま、端と端を埋めつつ、3等分したい
↓↓↓↓↓↓
並べたい要素に(子要素に)

.item{
  margin: 0 50px 20px 0;
  width: calc((100% - 100px) / 3);/*50px * 2 = 100px*/
}

.item:nth-child(3n){
  margin-right: 0;
}

その親要素に

.wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:100%;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WebサイトをHerokuでデプロイしようとしたら、エラーで躓いた話。

はじめに

制作したWebサイトを取り敢えずHerokuにあげて確認してみたかったのでデプロイしようとしたのですが、
エラーにかなり悩まされたので、同じところで詰まっている方の手助けになれば幸いです。

WebサイトをHerokuでデプロイ

GitHubでコード管理を行っていたので
HerokuとGitHubを連携してHerokuサイトからデプロイしようとしていたところ、

スクリーンショット 2020-03-26 9.49.33.png

上記画像のようなエラーが出てしまいました。

エラーの原因

調べてみたところ、
今回エラーが発生したざっくりとした理由としては
HTMLベースのサイトだとHerokuがアプリとして認識してくれない為でした。

〜〜〜〜〜〜〜〜〜〜〜〜
以下少し詳しく解説します。

まずエラーで何を言われているのかというと、

No default language could be detected for this app.
このアプリではデフォルトの言語を検出できませんでした。

HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
ヒント: これは、Herokuがこのアプリケーションで使用するビルドパックを自動的に検出できない場合に発生します。

とのことです。

ビルドパックは使用するプログラミング言語(PHPやRuby等)に応じて、
実行する前にデプロイされたコードを変換する役割を果たします。
これらのビルドパックは、使用言語に基づいてデプロイされたリポジトリ内で検索されます。
しかし、HTML、CSS、JavaScriptでは検出されません。その為このようなエラーが出たということです。

解決策

index.php
<?php header('Location: /index.html'); ?>

上記画像のように
index.phpファイルを作り、中のコードも同じように記述することで解決しました。
スクリーンショット 2020-03-26 12.03.15.png

↑デプロイ完了後のHeroku画面

〜〜〜〜〜〜〜〜
以下解説します。

今回なぜPHPファイルを作成したのかというと、
WebサイトをPHPアプリとして認識させる為です。

index.phpファイル内の
header関数は、
HTTPヘッダを送信する機能を持っています。

header関数では、
Locationの後ろに
飛び先のファイル名やURLを記述することで
その記述した場所へ移動することが出来ます。

今回はindex.htmlのページに飛ばしたかったので
上記のように記述しました。

まとめ

話をまとめると

今回のエラーの原因は、
HTMLベースのサイトの為アプリ認識してくれなかったこと。
解決策は、
phpファイルを作りアプリ認識してもらえるようにすること。

最後に、
参考にさせていただいたサイトのURLを下記に紹介します。

[Herokuを使って簡単にウェブページをインターネットで公開する方法]
https://qiita.com/reoring/items/bca12aaa5f94b190a488

[単純なHTML/CSS/JSをHerokuにデプロイする時つまずいたこと]
https://qiita.com/hozukikancho/items/b8d475e67a147cd54453

[How to Run a Simple HTML/CSS/Javascript Application on Heroku]
https://medium.com/@winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b

[PHPのheader関数でリダイレクト処理を行う方法【初心者向け】]
https://techacademy.jp/magazine/11609

以上です。
最後までご覧くださり、ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【完全初心者】Web系エンジニアを目指す ~LP模写に挑戦(随時更新)~

出産後は赤ちゃんの傍で
在宅Webプログラマーとして働きたいので
これからWeb系エンジニアになるための勉強を始めます
(出産まであと1ヵ月切ったけど…笑)

とりあえず、かなりご無沙汰であったHTML,CSSの復習からスタート。

◆目標

「LP案件」をバンバン取れるようになりたい。

◆やったこと(2020.3.25~2020.3.28現在)

・Photoshop無料期間登録
Photoshopデータからコーディングする方法の動画記事を見る
・HTML,CSSの基本知識がほぼぶっ飛んでることに気づき焦る
・テキストエディタでHTML,CSSの動画を見ながら手を動かす
・作業効率化のために無償のVisualStudioCodeダウンロード
拡張機能などはこちら
こちらのサイトを参考にした
こんな海外プログラマーさんのYoutubeもみたりした
・VisualStudioCodeで動かしてデバッグしてみた
・GoogleCromeで模写参考サイトを覗く
模写参考に使用したサイトたち
・GoogleCrome上で模写参考サイトの検証ページからデバッグしてみた
有能なおまとめがあったので、こちらと、こちらも参考にさせてもらった
・bodyタグ内の大まかな構造理解から組み立てスタート
こちらのサイトを参考にした

◆以下、詳しい手順

とりあえず、大まかな構成を確認しつつ、
コーディングの仕方の復習

image.png

う~ん全くわからん。

超・基本的な構成がそうそう、こんな感じ?

image.png

VisualStudioCodeだと予測変換で型が一発なのか!
(普通のことなんだろうけど、私的には感動)

image.png

image.png

!だけでも出るのか…(感動)

image.png

有能なおまとめに出会ったので、こちらと、こちらも参考にさせてもらった
(上記のものと同じリンク)

↓次の日、有能なおまとめに出会っても手が止まってしまったので
とりあえず大まかな構造理解から…再スタート

こちらのサイトを参考にした
image.png

ちょっと不要なの混ざってるのもあるけどとりあえず手を止めぬように

image.png

区分ごとに、お色を付けて…おお

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

#【HTML】ウィンドウの大きさでレイアウトがグチャる...【CSS】

ウィンドウの大きさ変更でレイアウトがグチャる...

そんな時は、widthで、コンテンツの入ったcontainerを固定しちゃいましょう!

これにより、ウィンドウの幅の変更に対応出来ます

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【HTML】ウィンドウの大きさでレイアウトがグチャる...【CSS】

ウィンドウの大きさ変更でレイアウトがグチャる...

そんな時は、widthで、コンテンツの入ったcontainerを固定しちゃいましょう!

これにより、ウィンドウの幅の変更に対応出来ます

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 273日目

100日チャレンジの273日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
273日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Web開発の基本知識(メモ用)

背景

フロントサイドのソースを見たら、なんじゃこれ?のこれをメモする目的

jQuery

  • $から始まる
  • ready(function(){})関数

内側の関数は:HTMLの読み込みが終わった後に、実行される。

$(document).ready(function() {
  ここに処理記述
});

readyが省略可能

上記の例の省略形
$(function() {
  ここに処理記述
});
  • 各種セレクター

1.要素セレクター:$("li").css("color", "blue");

要素セレクター
<ul>
  <li>要素</li>
</ul>

2.IDセレクター:$("#myID").css("color", "blue");

IDセレクター
<ul>
  <li id="myID">IDセレクターの場合、"#"を使う</li>
</ul>

3.クラスセレクター:$(".myClass").css("color", "blue");

クラスセレクター
<ul>
  <li class="myClass">クラスセレクターの場合、"."を使う</li>
</ul>

4.子孫セレクター:$(".myClass strong").css("color", "blue");

クラスセレクター
<ul>
  <li class="myClass"><strong>子孫セレクター</strong>の場合、"space"を使う</li>
</ul>

5.ユニバーサルセレクター:$(".li *").css("color", "blue");

ユニバーサルセレクター
<ul>
  <li><strong>ユニバーサルセレクター</strong>の場合、"*"を使う</li>
  <li><span>ユニバーサルセレクター</span>の場合、"*"を使う</li>
</ul>

6.グループセレクター:$("#myId1", #myId3).css("color", "blue");

グループセレクター
<ul>
  <li id="myId1">IDセレクターの場合、","を使う</li>
  <li id="myId2">IDセレクターの場合、","を使う</li>
  <li id="myId3">IDセレクターの場合、","を使う</li>
</ul>

まとめ

セレクター サンプル 備考
要素 $("li").css("color", "blue");
ID $("#myID").css("color", "blue"); "#"を使う
クラス $(".myClass").css("color", "blue"); "."を使う
子孫 $(".myClass strong").css("color", "blue"); spaceを使う
ユニバーサル $(".li *").css("color", "blue"); "*"を使う
グループ $("#myId1", #myId3).css("color", "blue"); ","を使う
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む